flutter - rows, columns

1.Row 위젯 

Row 위젯을 사용하면 한 줄(행)에 여러가지를 보이게 만들 수 있다.

body에 Row 위젯을 추가한다.

Row 위젯에 child가 하나만 있어야만 하는 게 아니기 때문에 child가 아닌 children을 사용한다. 

children의 리턴 타입은 <Widget>이다. [] 로 감싸진 것을 통해 알 수 있듯이 여기에 다양한 위젯들을 넣을 수 있다.

body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('hello, world'),
          FlatButton(
            onPressed: (){},
            color: Colors.amber,
            child: Text('click me'),
          ),
          Container(
            color: Colors.cyan,
            padding:EdgeInsets.all(30.0),
            child: Text('inside container'),
          ),
        ],
      ),

children 위젯 안에는 Text(), FlatButton(), Container()가 들어가 있다.

정렬을 하지 않은 경우 서로 붙어있게 된다.

children에 들어간 위젯들을 정렬하고 싶다면, mainAxisAlignment, crossAxisAlignment를 사용해서 정렬해주면 되는데,

mainAxis는 가로 정렬, crossAxis는 세로 정렬이 된다.

 

처음에 mainAxis를 spaceEvenly로 균등하게 줬기 때문에 위젯들 가로 너비는 서로 균등하게 정렬되고, 

CrossAxis를 start로 주면 위젯들이 맨 위에 모두 붙게된다. 만약에 end로 주면 세로길이의 끝에 정렬하게 되는데, 앱 전체 화면에서의 끝이 아니라, row 한줄에서의 끝으로 정렬하게 된다. 즉 제일 큰 위젯의 높이에 맞춰, 그 선을 기준으로 붙게된다. 

---

2. Column 위젯

column위젯도 row와 유사한 방식으로 작성하면 된다. 

column이기 때문에 여러가지 위젯을 넣으면 한 개의 열 안에 순서대로 배치된다.

Column 위젯 안에 Row 위젯이 들어가 있는데, 일단 이를 빼고 컨테이너만 생각해보자.

 

패딩이 각각 20px, 30px, 40px인 작은 컨테이너 박스가 한 열에 쪼르르 나열된다. 

그리고 설정한 정렬 방법에 따라 정렬된다.

 

여기서 헷갈릴 수 있다.

column은 열이기 때문에 가로가 아닌 세로 즉 밑으로 (↓)주르륵 나열된다 그러면

main alignment는 ↓ 이 방향이고, main의 cross alignment는 → 이 방향이 된다.

즉 main 정렬은 해당 위젯에 따라 바뀌는 것이다.

row의 main은 →, column의 main은 ↓가 된다.

end, end로 정렬한다.

 body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Row(
            children: <Widget>[
              Text('hello'),
              Text('world'),
            ],
          ),
          Container(
            padding: EdgeInsets.all(20.0),
            color: Colors.cyan,
            child: Text('one'),
          ),
          Container(
            padding: EdgeInsets.all(30.0),
            color: Colors.pinkAccent,
            child: Text('two'),
          ),
          Container(
            padding: EdgeInsets.all(40.0),
            color: Colors.amber,
            child: Text('three'),
          ),
        ],
      ),

그리고 column안에 row 위젯을 추가해보자.

row 위젯에는 텍스트 위젯 2개가 들어간다. 

 

이렇게 row위젯을 넣고나면 위치가 다음과 같이 바뀌게 된다.

hello, world 라는 rowr가 추가되서 width가 full width로 변하게 된다.

그러면 container 위젯들도 화면 제일 끝으로 이동하게 된다.