플러터의 위젯 (1) - Container, Child, Children

 

플러터의 모든 것은, 그 앱 자체를 포함해서, 위젯이다.

 

이러한 모양의 위젯은,

이러한 트리로 구성된다.

 

Container의 하위로 위젯을 넣으려면 child이나 children에 넣어주면 된다.

 

이름에서 알수 있듯이, 하나만 넣으려면 child, 여러개면 children이다.

 

• A child property if they take a single child – for example, Center or Container
• A children property if they take a list of widgets – for example, Row, Column, ListView, or Stack.

(https://flutter.dev/docs/development/ui/layout 에서 발췌)

 

여기서 알 수 있듯이, 

child를 속성으로 가지는 위젯은 Center나 Container 등의 하나의 위젯만 들어가는 위젯이고

children를 속성으로 가지는 위젯은 복수의 위젯을 가질 수 있는 Row, Column, ListView, Stack 등이 있다.

 

예를 들면,

Scaffold(
      appBar: AppBar(
        title: Text("TITLE"),
        actions: <Widget>[
          // Add 3 lines from here...
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: Container(child:Column(children: <Widget>[SomeSimpleWidget()])),
    );

여기의 body를 보면 알 수 있듯이, Container하나에 child로 Column하나가 들어가고, 그 Column의 children으로 위젯의 리스트가 들어간다.

 

 

개인적으로 차일드와 칠드런으로 구분한 이유는 아직 잘 모르겠다.

위젯 하나가 들어갈 곳에 프로그래머가 착각을 해서 칠드런으로 써서 위젯 여러개를 넣으면 컴파일러에서 오류를 미리 뱉어내라고 이런식으로 디자인 되어있을 수도 있겠다 싶다.

 

 

더 알게 되는 것이 있으면 또 글을 쓰겠다.