Expanded와 Flexible 사용방법

Flutter를 이용해서 어플리케이션을 개발하고자 하는데 위젯들의 위치를 잡는게 어려우신가요? Expanded와 Flexible 사용방법에 대해서 제대로 알고 싶으신가요? Column과 Row를 열심히 나열하고 있는데 내 마음대로 정렬이 안되신다면 다음의 내용을 확인하시기 바랍니다. 여러분들의 앱 개발이 한층 쉬워질 것입니다.

플러터를 이용해서 개발할 때 페이지의 대략적인 그림을 그렸다면 각각의 컴포넌트가 위치할 영역의 구역을 나누는 것이 좋습니다. 먼저 큰 프레임들을 Container를 이용해서 구역을 지정한 뒤 그 안에 세부적인 내용을 채워가는 식으로 하는 방법을 주로 사용합니다. Container는 width 및 height 속성을 부여하여 어플리케이션 내에서 일정한 작업공간을 차지하도록 설정할 수 있습니다. 처음 레이아웃을 그릴 때에는 각 구역이 어느정도의 자리를 차지하는지 확인하기 위해서 color 속성을 부여하기도 합니다. Container의 크기는 고정되어 있기 때문에 화면의 크기가 바뀌거나 윈도우 프로그램의 경우 어플리케이션의 화면 크기가 달라질 경우 overflow가 발생할 수 있으며 이는 사용자의 사용 경험을 좋지 않게 만드는 요인이 됩니다. 화면의 크기에 따라서 유연하게 반응하는 프로그램을 만들기 위해서는 Container 위젯과 함께 Expanded와 Flexible 위젯의 사용법을 잘 숙지해 두어야 합니다. 아래에서 Flexible과 Expanded를 언제 어떻게 사용하는지에 대해서 더욱 자세히 알아보도록 하겠습니다.

Flexible와 Expanded는 서로 같은 종류의 효과를 낼 수 있다.
Container를 Flexible과 Expanded로 감싸서 유연하게 변화시킬 수 있다.
Flexible의 기본 fit 속성은 FlexFit.loose이다.
Flexible의 fit 속성을 FlexFit.tight로 변경할 경우 Expanded와 동일한 효과를 내게 된다.
Flexible은 overflow가 발생할 경우 자신의 크기를 줄여 크기 변화에 반응한다.
Flexible은 flex라는 값을 부여할 수 있는데 flex값이 부여된 다른 Flexible 위젯 및 Expanded 위젯과 부여된 비율만큼의 남은 공간을 나눠갖는다.
Flexible의 경우 fit 속성이 tight가 아니면 flex값에 의해서 공간은 할당받지만 공간을 차지하지 않고 비워두게 된다.

Expanded와 Flexible 사용방법 예제파일

Expanded와 Flexible의 사용방법에 대해서 실습할 수 있도록 코드와 예제 링크를 제공합니다. 코드를 자신이 사용하는 vsCode와 같은 IDE에 복사 붙여넣기 하시어 사용하시거나 아래의 링크를 통해서 Dartpad에서 실습을 진행해 보시기를 추천드립니다.

DartPad에서 열어보기 (클릭!)

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children : [
            Container(
              height : 200, 
              color : Colors.red, 
              child : const Center(child: Text('200.0')),
            ),
            Container(
              height : 200, 
              color : Colors.blue, 
              child : const Center(child: Text('200.0')),
            ),
          ],
        ),
      ),
    );
  }
}

Container

처음 코드에는 두 개의 Container 위젯을 Column 위젯 아래에 두고 모두 200px의 height 속성을 부여하였으며, 색상을 각각 red, blue로 설정하였습니다. Column의 자식으로 두 개의 Container를 위치하였기 때문에 Column의 main Axis 방향인 vertical 방향으로 두 개의 위젯이 쌓이는 것을 볼 수 있습니다. width 속성을 별도로 부여하지 않았지만 화면의 넓이를 모두 차지하는 것을 볼 수 있죠. 만약 height 속성을 부여하지 않았다면 Container의 자식으로 설정한 Text 위젯의 높이만큼의 크기를 할당하게 됩니다.

현재의 실행화면의 height는 400px보다 큰 상태이기 때문에 400px 이외의 부분은 빈 공간으로 남게 됩니다.

Expanded 적용

다음은 위쪽의 빨간색 Container위젯을 Expanded로 감싼 상황입니다. 적용한 뒤 실행해보면 화면의 남은 부분을 모두 빨간색 Container 위젯이 차지한 것을 볼 수 있습니다. 파란색 Container는 딱 200px만 차지하고 있죠. Expanded는 남은 여유공간을 모두 차지하는 것이구나라고 생각할 수 있겠습니다.

Flexible 적용

아래의 파란색 Container를 Flexible 위젯으로 감싸보겠습니다. Flexible이라면 뭔가 유연한 모습을 보여야 할 것 같은데 위의 그냥 Container로 감쌌을때와 비교하여 아무런 변화가 없습니다.

위쪽의 빨간색 Container를 Flexible로 바꿔보도록 하겠습니다. 역시 아무런 변화를 보이지 않습니다.

Flexible, fit : Flexfit.tight 적용

그 다음 fit 속성으로 Flexible.tight를 부여해 보겠습니다. 두둥! 이전에 Expanded를 적용했을 때와 동일한 효과로 빨간색 Container가 남은 화면의 전체 부분을 차지하였습니다. Flexible 너도 할 수 있는 거였어! 여기서 확인할 수 있는 것은 Expanded와 Flexible의 fit 속성이 Flexible.tight는 동일한 효과를 보이는 것을 알 수 있습니다.

Flexible fit: Flexfit.loose 적용

fit 속성은 FlexFit.tight와 FlexFit.loose로 구성되어 있습니다. fit 속성을 tight에서 loose로 변경하게 되면 다시 원래대로 돌아오게 됩니다. 여기서 알 수 있는 것은 Flexible의 fit 속성은 기본값이 loose이며, tight로 변경할 경우 Expanded와 동일한 효과를 얻게 된다는 것입니다.

Overflow에 대응하는 Flexible

다시 두개의 Container가 있는 상황을 살펴보도록 하겠습니다. 이번에는 아래 파란색 Container의 height를 700으로 설정해 보도록 하겠습니다. 화면의 아랫쪽에 안전무늬가 나타나며 화면에서 overflow가 발생하였다고 경고를 보내줍니다.

위의 빨간색 Container위젯을 Flexible로 감싸주도록 하겠습니다. 그러면 아래의 안전무늬가 없어지고 대신 빨간색 Container의 크기가 약간 줄어든 것을 확인할 수 있습니다.

파란색 Container의 크기를 키워보면 더욱 확실하게 알 수 있습니다. 이로써 Flexible 위젯은 단순히 빈 공간을 채우기 위한 용도 뿐 아니라 다른 위젯의 크기가 화면의 크기보다 클 경우 자신의 크기를 변화시켜 유연하게 대응하는 역할도 함께 함을 알 수 있습니다.

flex 속성

마지막으로 알아볼 속성은 flex에 관한 내용입니다. 위와 같이 중간에 Expanded로 감싼 세 개의 Container를 생각해 보겠습니다. 남은 화면의 공간을 중간의 빨간색 Container가 모두 차지한 것을 확인할 수 있습니다.

아래의 파란색 Container를 Flexible 위젯으로 감싸 보도록 하겠습니다. 중간에 Expanded 위젯의 크기가 줄어들었습니다. 정확히는 남은 공간을 파란색 Flexible 위젯과 동일한 비율로 나눠가졌다는 것을 알 수 있습니다. 파란색 Flexible 위젯은 fit 속성이 loose 상태이기 때문에 할당받은 50%의 공간에 확장하지 않고 있을 뿐이지요.

할당받은 공간의 비율을 변화시킬수도 있는데 이 때는 각각에 flex라는 속성값을 부여하는 것입니다. Expanded에 1, Flexible에 2라는 값을 부여하였습니다. 이렇게 되면 flex값을 부여받은 위젯들의 전체 flex값의 합에 대하여 자신의 flex값 만큼의 비율로 공간을 할당받게 됩니다. flex값을 2로 할당받은 Flexible 위젯은 남은 공간의 2/3를 할당받았습니다.

flexible_more_than_2_flex_value_fit_tight

역시나 FlexFit.tight로 fit 속성을 부여할 경우 모든 남은 공간으로 확장하게 됩니다. 이로써 Flexible과 Expanded 속성에 대해서 모두 알아보았습니다. 처음 레이아웃을 잡기 위해 Container 위젯을 배치할 때 Flexible을 적절히 활용하면 어디든 원하는 위치에 위젯을 위치시킬 수 있게 될 것입니다.