[Flutter] 오늘의 위젯 : Expanded

플러터 학습 기록 시작!

GDSC Hongik Mobile 파트원들과 함께 공부하고 있는 flutter의 여러 위젯들을 공부한 내용을 기록해보는 포스팅!

오늘 함께 공부해 볼 위젯은 Expanded입니다

참고한 공식 API Document 링크!

Epanded가 뭐야...?

---

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

위는 공식문서의 설명인데 영어는 짜증나니까 쉽게 말하면 Expanded 위젯이 감싼 위젯을 부모의 남은 부분에 말그대로 확장(expand)하여 채워주는 위젯이라고 할 수 있습니다.

중요한 것은 이 위젯이 자식이 될 수 있는 부모 위젯은 오직
Column, Row, Flex 뿐이라는 것!
즉, 축이 있는 위젯 안에서만 작동한다는 말이 되죠.

따라서 Expanded는 부모의 주축(MainAxisAlignment)의 방향으로만 자식을 늘려서 채워주게 됩니다.

자신이 속한 부모에게 Expanded가 여러개 있더라도 사용이 가능한데요
이럴땐 flex 속성을 통해서 각 위젯들의 비율을 설정해줄 수 있습니다.

주요속성들을 보면서 자세히 알아볼게요!

주요속성

---

다른 여러 위젯들과 마찬가지로 여러 속성들이 있지만
주로 flex, child 정도를 자주 사용하게 될겁니다!

하나씩 알아보면

child → Widget
The widget below this widget in the tree.

가장 자주 보는 속성이죠? 늘려줄 자식을 결정하는 속성입니다.
required 속성이기 때문에 비워둘 수 없습니다.
자식을 늘려주는 위젯인데 자식이 없는건 상식적으로 말이 안되죠..? ㅋㅋ

flex → int
The flex factor to use for this child.

얼만큼 차지 할 것이냐? 를 결정하는 속성입니다. 말 그대로 유연하게 비율을 설정할 수 있다고 생각하시면 될 텐데요.

기본적으로 1이 할당되어있고 Expanded가 한 개뿐이면 크게 의미는 없습니다.
다만 여러 개일 경우에는 각각의 Expanded가 가지고 있는 값의 비율을 계산하여 채워주게 되는 신기한 속성입니다.

말로만 하면 어려우니 직접 작성한 예시코드를 보며 공부해보시죠!

예시코드

---

Row(
  children: <Widget>[
    Expanded(
      child: Container(
      color: Colors.red,
    ),
  ),
	Expanded(
      child: Container(
      color: Colors.amber,
    ),
  ),
  ],
),

Row의 자식이자 Container의 부모로 만든 예시 코드입니다.
Row의 기본 축인 가로로 확장되어있는 모습을 볼 수 있죠.
(위 아래로 확장되어있는 것은 Container가 따로 높이를 지정해주지 않으면 부모를 모두 채우기 때문입니다)

아무것도 설정하지 않았을 때는 flex가 자동으로 1이 설정되어서
1:1의 비율로 보여주는 것을 알 수 있습니다.

아래의 코드를 보시면 차이를 쉽게 알 수 있습니다.

Row(
  children: <Widget>[
    Expanded(
      flex: 3,
      child: Container(
      color: Colors.red,
    ),
  ),
	Expanded(
      child: Container(
      color: Colors.amber,
    ),
  ),
  ],
),

아까와는 다르게 3:1의 비율이 된 것을 보실 수 있습니다!
오른쪽의 flex 속성을 비웠음에도 정상작동하는 것을 알 수 있죠.

Row(
  children: <Widget>[
    Expanded(
      flex: 3
      child: Container(
      color: Colors.red,
    ),
  ),
  ),
  ],
),

보시다시피 Expanded가 하나 뿐일때는 flex 값이 의미가 없습니다!

Row(
  children: <Widget>[
    Expanded(
      flex: 3,
      child: Container(
      color: Colors.red,
      ),
    ),
    Container(
      color: Colors.blue,
      width: 200,
    ),
    Expanded(
      flex: 1,
      child: Container(
      color: Colors.red,
      ),
    ),
  ],
),

중요한 것은!
보시는 것 처럼 Expanded의 flex값은 항상 부모의 남은 영역에서 계산하여 적용한다는 것입니다.

가운데에 Container가 차지하는 만큼을 제외하고 나머지 공간 안에서 자신의 부모(Row)안에서의 위치(순서)를 지킨 상태로 3대 1비율로 확장시켜주는 것을 알 수 있습니다.

마무리 및 전체 코드

---

오늘은 함께 Expanded 위젯에 대해서 알아보았습니다!
오늘의 예시 코드는 Row를 사용하였지만 Column안에서도 동일한 방식으로 작동한다는 것은 아래의 코드를 참고해서 각자 연습해보시길 바랍니다.

그럼 다음 포스팅에서 뵙겠습니다!

마지막 이미지의 전체 코드입니다

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded()'),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.red,
              ),
            ),
            Container(
              color: Colors.blue,
              width: 200,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}