flutter column row 테이블 구성

 

body 안에 컨테이너를 구성하겠습니다. 

 

세로로 가로세로 200px 박스를 구성해보겠습니다. 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("안녕하세요"),
    ),
    body: Container(
      alignment: Alignment.center,
      child: Column(
        children: [
          Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    ),
  );
}

 

결과물입니다. 

 

Column 을 Row 로 변경해주면 정렬이 가로로 변경됩니다.

body: Container(
  alignment: Alignment.center,
  child: Row(
    children: [
      Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
      Container(
        width: 200,
        height: 200,
        color: Colors.red,
      )
    ],
  ),
)

그리고 여기서 Row 에 우클릭 하게 되면 Show Context Actions 를 누르게 되면 더 할 수 있는 액션들이 나옵니다. 

한열에 여러개의 row(행) 를 추가하려면 어떻게 할까요? 

여기서 wrap with column 을 하게되면 아래와 같이 하나의 column 에 여러개의 row를 추가할 수 있게 children 이 생깁니다.

body: Container(
  alignment: Alignment.center,
  child: Column(
    children: [
      Row(
        children: [
          Container(
            width: 150,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 150,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    ],
  ),
)

하나의 줄이고 row 를 추가하게 되면

아래 코드처럼 row 를 추가합니다. 

body: Container(
  alignment: Alignment.center,
  child: Column(
    children: [
      Row(
        children: [
          Container(
            width: 150,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 150,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
      Row(
        children: [
          Container(
            width: 150,
            height: 200,
            color: Colors.blue,
          ),
          Container(
            width: 150,
            height: 200,
            color: Colors.red,
          )
        ],
      ),
    ],
  ),

여기서 추가로 정렬에 대해서 말씀드리겠습니다.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [

column 에는 mainAxisAlignment 라는 속성이 있어서 해당 속성값을 center 로 해주면 세로(열) 정렬이 중앙이 됩니다.

column 클래스에 대해서 mainAxisAlignment 이기 때문에 세로(열) 정렬이고
row 클래스 내에서 mainAxisAlignment 인 경우 가로 정렬입니다. 

추가로 column 클래스의 crossAxisAlignment 는 가로(행) 정렬입니다. 

crossAxisAlignment: CrossAxisAlignment.center,

 

박스를 가운데로 정렬하는 코드는 아래와 같이 해주면 됩니다.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
           Row(
             mainAxisAlignment: MainAxisAlignment.center,
             ...
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.center,
             ...
           ),
           ]

여기서 만약 정렬이 아니라 어떤 기종이든 화면 가득 스크린을 채우고 싶다면 MediaQuery 를 이용하면 됩니다.

상자가 2개 이기 때문에 MediaQuery.size.width 에서 2를 나누면 두개의 container 가 화면을 가득채우게 됩니다. 

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: MediaQuery.of(context).size.width / 2,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: MediaQuery.of(context).size.width / 2,
      height: 200,
      color: Colors.red,
    )
  ],

 

요약

 

• Column과 Row를 사용하여 위젯을 세로 또는 가로로 정렬.

• mainAxisAlignment와 crossAxisAlignment로 정렬 제어.

• MediaQuery를 사용하여 화면 크기에 맞게 위젯 크기 조절 가능.