[Flutter] 플러터 위젯 크기, 사이즈 변경 및 여백(margin,padding) 조절

플러터는 위젯(Widget)의 크기, 여백 등의 설정을 위해 컨테이너(Container) 개념을 두고 있다. 컨테이너는 자식 위젯의 크기와 여백(Margine, Padding) 등을 설정한다. 또한 컨테이너는 다시 부모 위젯으로 컬럼(Column)과 로우(Row)를 둘 수 있다. 개별 위젯을 조종하기 위해서는 먼저 ‘바디(Body) > 컬럼/로우 > 컨테이너 > 위젯(예:TextField, Button)’의 계층 구조를 갖음을 이해해야 한다.

아래와 TextField 위젯의 예를 살펴보면 위젯의 크기, 사이즈 및 여백(margin,padding)을 조정하기 위해서는 Container 위젯을 상위에 지정한 후, TextField를 child로 지정한 다음 Container 파라미터 설정에서 다음과 같이 설정을 해야 한다.

1. 위젯 크기 조절

위젯의 크기 조절은 다음과 같이 지정한다.
width:숫자.0

2. 위젯 여백 조정

컨테이너 위젯의 상,하,좌,우 여백을 각각 지정하고자 할 때는 다음과 같이 설정한다.
margin:EdgeInsets.only(left:숫자.0)

컨테이너 위젯의 상,하,좌,우 여백을 동일하게 지정하고자 할때는 다음과 같이 설정한다.
margin:EdgeInsets.all(숫자.0)

위젯 크기나 여백 지정 시, 숫자 입력은 숫자다음에 ,(콤마)가 아니라 .(마침표)으로 구성한다는 점에 주의한다.

body: Column(
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(left:20.0, top:40.0),
      width: 300.0,
      child: TextField(
        obscureText: true,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Password',
        ),
      ),
    ),
  ],
),