02. Expanded in Flutter [Flutter Widget of the Week 톺아보기]

Flutter of the week란?

 공식 유튜브 채널에서 주 1회  Flutter의 다양한 기능, 팁, 패키지등의 사용 사례에 대한 간결하고 유익한 정보를 제공하는 영상시리즈
바로가기

 

Flutter의 레이아웃은 Row(열)와 Column(행)으로 이루어져있습니다. 이중 하나의 child를 넓게 퍼뜨려 사용가능한 모든 공간을 차지하게 하는 Expanded에 대해 알아보도록 하겠습니다.

 

Expanded란?

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.
- Row, Column 또는 Flex의 child를 확장하여 사용 가능한 공간을 채우도록 하는 위젯입니다.
* 출처 flutter.dev(https://api.flutter.dev/flutter/widgets/Expanded-class.html)

 

 

 Expanded 사용법

UI 작업을 하다보면 위젯의 크기를 직접 입력할 경우 다양한 디바이스에 대응하기 어려워지는데 이러한 부분에 유용하게 사용할 수 있는 위젯입니다. Expanded는 Row, Column 또는 Flex와 함께 사용되어 자식 위젯들에게 공간을 적절히 분배할 수 있도록 합니다.

 

 또한 flex 속성을 활용하여 위젯의 비율을 지정 할 수 있는데요. 2번 Container의 경우 빨간색을 flex: 1 파란색을 flex: 2로 설정하여 1:2비율을 차지하도록 지정하였습니다. 이 비율은Expanded가 적용된 위젯에만 적용됨으로 3번 Container와 같이 다른 Container가 차지한 공간을 제외하고 비율에 맞춰 공간을 차지 하게 됩니다.

 

주의사항

 해당 위젯은 꼭! Row, Column 또는 Flex 내에서만 사용해야 합니다. 이외의 경우에 사용될경우 아래와 같은 에러를 만나실 수 있습니다.

Incorrect use of ParentDataWidget.

사용예제

 

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Expanded'),),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          FirstWidget(),
          SecondWidget(),
          ThirdWidget(),
        ],
      ),
    );
  }
  Widget FirstWidget(){
    return Container(
      width: 100,
      child: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('1',style: TextStyle(fontSize: 32),),
            ),),
          Expanded(
            child: Container(
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }

  Widget SecondWidget(){
    return Container(
      width: 100,
      child: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('2',style: TextStyle(fontSize: 32),),
            ),),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.red,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
            ),
          ),

        ],
      ),
    );
  }

  Widget ThirdWidget(){
    return Container(
      width: 100,
      child: Column(
        children: [
          Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('3',style: TextStyle(fontSize: 32),),
            ),),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.yellow,
            ),
          ),
          Container(
            height: 100,
            child: Placeholder(),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.purple,
            ),
          ),

        ],
      ),
    );
  }
}