[Flutter] 플러터 위젯 레이아웃 정의 하기 (세로(column) 배치, 가로(row) 배치하기)

플러터에서 위젯의 레이아웃은 컬럼(Column)과 로우(Row)가 주로 담당하게 된다. 컬럼은 위젯들의 세로배치에 사용되며, 로우는 가로배치에 사용된다. 컬럼과 로우는 위젯의 세로열, 가로열의 배치를 담당하며, 위젯의 크기, 여백 등의 조절에는 관여하지 않는다. 컬럼과 로우는 UI 컴포넌트의 화면배치에 매우 중요한 역할을 담당한다. 계층 구조는 ‘바디(Body) > 컬럼/로우’로 바디의 하위 계층에서 선언된다.

플러터에서는 위젯 레이아웃을 정의하기 위해 아래와 같이 Column으로 선언을 한후 children으로 widget을 구성한 후, 위젯을 하나하나 추가하는 개념을 제공하고 있다. (Column 선언 시 위젯이 세로로 추가, Row 선언 시 위젯이 가로로 추가)

가로로 위젯을 추가하고자 하면 body: Column이 아니라 body: Row로 지정을 하면 된다.

body: Column(
  children: <Widget>[
     TextField(
      obscureText: true,
      decoration: InputDecoration(
        border: UnderlineInputBorder(),
        labelText: 'ID',
      ),
    ),
      TextField(
      obscureText: true,
      decoration: InputDecoration(
        border: UnderlineInputBorder(),
        labelText: 'Password',
      ),
    ), 
  ],
),