[Flutter] 2. Expanded

https://flutter.dev/docs/codelabs/layout-basics#expanded-widget

flexible 과 비슷하게, Expanded 위젯은 위젯을 감쌀 수 있고, 여분의 공간에 강제로 채워넣을 수 있다.

💡Tip : Flexible 과 Expanded 위젯의 차이점은 무엇일까?

Flexible 은 Row 나 Column 위젯에서 특정 위젯을 resize하기 위해 사용한다. 이렇게하면 부모 위젯과 관련하여 크기를 유지하면서 자식 위젯의 간격을 조정할 수 있다. Expanded 위젯은 자식 위젯의 제약을 변경하고 다른 여백의 공간을 채운다.

• 남아있는 공간을 알아서 채워줌.
• css에서의 flex 를 먹일수도있음.

class FirstWeek extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('1st Week'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text('First Week'),
          ),
          Row(
            children: <Widget>[
              FlatButton(
                color: Colors.red, onPressed: () {}, child: Text('Red')),
              Expanded(
                child: FlatButton(
                  color: Colors.orange,
                  onPressed: () {},
                  child: Text('Orange')),
              ),
              FlatButton(
                color: Colors.yellow,
                onPressed: () {},
                child: Text('Yellow')),
              FlatButton(
                color: Colors.green, onPressed: () {}, child: Text('Green')),
            ],
          )
        ],
      ),
    );
  }
}