Layouts in Flutter

조은, Eun Cho
Jun 12 · 5 min read

Flutter의 모든 것은 위젯이다. HTML이나 CSS에 익숙한 사람이라면 특정한 HTML요소에 CSS를 통해 레이아웃을 그리는 것이 굉장히 익숙할텐데 Flutter에서는 레이아웃 위젯을 통해 레이아웃을 그리게 된다.

레이아웃 위젯은 크게 두개 종류를 가진다.

  • 자식을 하나만 가지는 레이아웃 위젯
  • 자식을 여러개 가지는 레이아웃 위젯

자식을 하나만 가지는 레이아웃 위젯

자식을 하나만 가지는 레이아웃 위젯은 해당 자식을 어떻게 제어할 지를 결정한다. 모든 Widget을 다 설명할 수는 없으니 대표적인 Widget 몇가지만 살펴보자.

  1. Center : 위젯의 자식을 수평, 수직으로 중앙정렬하기 위해 사용한다.
  2. Padding : 위젯에 Padding을 주기 위해 사용한다. 다만 Padding 위젯을 실제로 많이 사용하지는 않고, 보통Container 에서 padding 속성을 이용해서 정의한다.
  3. Container : 다른 시스템에서 Box라고 하는 기본 단위를 Flutter에서는 Container 라고 지칭한다. 일반적인 padding, margin 등을 사용할 수 있고, widthheight 의 선언도 가능하다.

예를 들어, 아래와 같이 중앙 정렬되어있는 간단한 박스를 하나 만들고싶다고 가정해보자.

중앙정렬 되어있는 작은 박스. flutter의 예제를 가져왔다.

이 경우에는 아주 간단하게 CenterContainer 를 조합하여 구현이 가능하다.

Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
),
)

다시 한 번 말하지만 Flutter의 모든 것을 Widget으로 구성되어있다. 따라서 어떤 Widget을 어떤 곳에서 적절히 활용하느냐에 따라서 여러분이 구현 가능한 레이아웃의 범위도 넓어질 것이라 생각한다.

자식을 여러개 가지는 레이아웃 위젯

자식을 여러개 가지는 레이아웃 위젯은 그 의미 그대로 자식을 여러개 가질 수 있다. 마찬가지로 여기에도 다양한 위젯이 있지만 대표적인 Widget 몇가지를 알아보도록 하자.

  1. Row : 자식 위젯들을 수평으로 배치시키기 위한 위젯
  2. Column: 자식 위젯들을 수직으로 배치시키기 위한 위젯
  3. GridView: 수직, 수평으로 일정 패턴의 셀 배열을 노출시키기 위한 grid list 위젯
  4. ListView : 스크롤이 가능한 위젯 목록. 배열로 이루어진 패턴 데이터를 계속 리스트로 노출시켜주고자 할 때 유용하다.

Flutter의 RowColumn 위젯은 기본적으로 Flex 모델을 가진다. 각 모델은 Main Axis와 Cross Axis를 가지며 축 (Axis)에 따라서 정렬을 다르게 하는 등의 코드 사용이 가능하다.

예를 들어, 아래 이미지처럼 여러 이미지를 수평으로 보여주고싶다고 가정해보자.

3개 Image가 수평으로 위치해있다.

이런 경우에는 Row 위젯과 Image 위젯을 조합하여 사용할 수 있다.

Row(
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg')
],
)

결국 Flutter에서 레이아웃이란 여러 레이아웃 위젯들을 조합하여 만들어내는 것이다. 적절하게 사용 가능한 레이아웃 위젯들을 찾아내서 해당 레이아웃을 구현할 때 적절한 것을 사용해내는 것이 관건이라고 볼 수 있겠다.

예를 들어 아래 이미지 같은 위젯을 구현하고 싶다면,

아주 간단해보이지만..

UI 다이어그램은 아래와 같아진다.

UI 다이어그램

우선 전체 위젯을 Container 가 한번 감싸고 있는 모습을 알 수 있다. 이 최상위 Container 는 일종의 페이지를 표현하기 위한 것이며, Container 에 margin, padding, border 등을 넣을 수 있다.

Row 는 3개 위젯을 수평으로 보여주기 위해 사용하는 위젯이다. Column 도 마찬가지로 Icon 위젯과 Text 위젯을 보여주기 위해 사용한다.

마지막의 Text 위젯을 감싸고 있는 Container 위젯은 적절한 위치에 Text 위젯을 두기 위해 사용한다. 이 경우에는 Icon 위젯과 Text 위젯 사이에 margin 을 넣기 위해 Container 위젯을 추가한 것이다.

마무리

이번 글에서는 Flutter 레이아웃의 컨셉에 대해서 간단히 알아보았다. 이런 저런 이야기를 했지만 결국 Flutter의 레이아웃은 전부 Widget들의 조합으로 이루어져있으며 여러분들이 원하는 대부분의 레이아웃은,

  1. Row
  2. Column
  3. Container

위 세가지 레이아웃 위젯을 이용하게 될 것이다.

다음 글에서는 실제 레이아웃을 구현하기 위해 어떤 식으로 Flutter 레이아웃 위젯을 조합할 수 있는 지 살펴보도록 하겠다.

이전 글:

조은, Eun Cho

Written by

Front End Engineer from Apollo, NAVER Corp. Google Developers Experts for Web Technologies. Translator