[Flutter] 18. 컨테이너 배치하기 연습 문제

[Flutter] 18. 컨테이너 배치하기 연습 문제

 

 

-컨테이너들을 배치할 때, HTML에서 사용했던 <div> 태그, display: flex 개념과 flex-direction: column, justify-content/align-items 개념을 숙지하고 응용하면 쉽다

import 'package:flutter/material.dart';

void main(){
  runApp(Test1());
}
class Test1 extends StatelessWidget {
  const Test1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            child: Row(
            textDirection: TextDirection.ltr,
              children: [
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              textDirection: TextDirection.rtl,
              children: [
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,  // 가로 중앙 정렬
              crossAxisAlignment: CrossAxisAlignment.center,  // 세로 중앙 정렬
              textDirection: TextDirection.rtl,
              children: [
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,  // 가로 중앙 정렬
              crossAxisAlignment: CrossAxisAlignment.center,  // 세로 중앙 정렬
              textDirection: TextDirection.rtl,
              children: [

                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow,
                    margin: EdgeInsets.only(left: 50)
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red,
                    margin: EdgeInsets.only(right: 50)
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,  // 가로 중앙 정렬
              crossAxisAlignment: CrossAxisAlignment.center,  // 세로 중앙 정렬
              textDirection: TextDirection.rtl,
              children: [

                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow,
                    margin: EdgeInsets.only(left: 100)
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red,
                    margin: EdgeInsets.only(right: 100)
                ),
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,  // 가로 중앙 정렬
              crossAxisAlignment: CrossAxisAlignment.center,  // 세로 중앙 정렬
              textDirection: TextDirection.rtl,
              children: [

                Container(
                    width: 50,
                    height: 50,
                    color: Colors.yellow,
                    margin: EdgeInsets.only(left: 130)
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue
                ),
                Container(
                    width: 50,
                    height: 50,
                    color: Colors.red,
                    margin: EdgeInsets.only(right: 130)
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}