Flutter - Expanded class

• Row, Column, Flex의 하위에 사용하면 공간을 채우기 위한 클래스
• 주축을 따라 사용 가능한 공간을 채루며 하위 자식이 여러 개일땐 flex factor에 따라 공간을 나눠 사용함

• 예제 1. Column을 이용해 새로로 나열 Container는 정해진 height로 보여주고 가운데 expand 클래스가 나머지 자리를 채운다

class ExpandExample extends StatelessWidget {
  const ExpandExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 200,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 200,
            width: 100,
          ),
        ],
      ),
    );
  }
}

• 예제 2. Row를 이용해 가로로 나열하고 첫번째 Expanded에는 flex 2를 줘서 다른 Expanded의 2배의 크기를 가지도록 한다

class ExpandExample extends StatelessWidget {
  const ExpandExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 50,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              height: 100,
            ),
          ),
        ],
      ),
    );
  }
}