[Flutter] Widget - Expanded

1. Expanded란?

Expanded Widget은 Row, Column, Flex Widget의 하위 Widget 영역을 확장하여 빈 공간을 채우는 역할을 합니다.

2. Expanded 생성자 및 속성

https://api.flutter.dev/flutter/widgets/Expanded-class.html

Expanded class - widgets library - Dart API

Flutter Material API 가이드를 통해 Expanded Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

○ 생성자(Constructor)

<Expanded 생성자>

 

○ 속성(Property)

1) child

<child 속성>

- 작성 필수 속성

- 매개변수 타입 : Widget

- 역할 : Expanded Widget 내 1개의 하위 Widget 컨텐츠 추가 가능

 

2) flex

<flex 속성>

- 매개변수 타입 : int

- 역할 : Expanded Widget의 크기 비율 지정

3. Expanded 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  flex: 3,
                  child: Container(
                    color: Colors.blue,
                    height: 100.0,
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.red,
                    height: 100.0,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.green,
                    height: 100.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

예제 코드의 의미는 다음과 같습니다.

• Scaffold Widget으로 메인 화면을 구현
  • SafeArea Widget으로 여백이 확보된 컨텐츠 영역 지정
    • Container Widget으로 하위 Widget 영역 마련
      • Container Widget의 크기를 가로, 세로 기준으로 전체 영역의 크기만큼 설정
      • child 속성으로 Row Widget을 하위 Widget으로 설정
        • 주축, 횡축 기준으로 가운데 정렬
        • children 속성으로 다수의 Expanded Widget들을 가로로 배열
          • 높이 100인 파란색 Container를 3의 비율로 생성
          • 높이 100인 빨간색 Container를 2의 비율로 생성
          • 높이 100인 초록색 Container를 1의 비율로 생성

4. Expanded 실행 결과

<Expanded Widget 실행 화면>