플러터(Flutter)는 Google이 개발한 사용자 인터페이스(UI) 툴킷으로, 다양한 플랫폼에서 동작하는 네이티브 앱을 개발할 수 있습니다. 앱의 레이아웃은 사용자에게 정보를 전달하고 사용자 경험을 제공하는 핵심 요소입니다. 따라서, 플러터에서 레이아웃을 잘 다루는 것은 앱 개발의 중요한 부분입니다.
플러터(Flutter) 레이아웃 클래스 소개
플러터에서는 다양한 레이아웃 클래스를 제공하여 유연하고 다양한 화면 구성을 가능하게 합니다. 가장 기본이 되는 레이아웃 클래스는 Container, Row, Column, Stack입니다. 아래에서 각 클래스의 특징을 살펴보겠습니다.
1. Container 클래스
Container 클래스는 사각형 영역을 생성하고, 자식(Child) 위젯을 포함하는 가장 기본적인 레이아웃 클래스입니다. 배경색, 경계선, 여백 등 다양한 스타일을 지정할 수 있습니다.
Container(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Hello, Flutter!'),
)
2. Row 클래스
Row 클래스는 가로로 자식 위젯을 배치하는 레이아웃 클래스입니다. 각 자식 위젯은 가로 공간을 동등하게 나누어 차례대로 배치됩니다.
Row(
children: <Widget>[
Text('One'),
Text('Two'),
Text('Three'),
],
)
3. Column 클래스
Column 클래스는 세로로 자식 위젯을 배치하는 레이아웃 클래스입니다. 각 자식 위젯은 세로 공간을 동등하게 나누어 차례대로 배치됩니다.
Column(
children: <Widget>[
Text('One'),
Text('Two'),
Text('Three'),
],
)
4. Stack 클래스
Stack 클래스는 겹쳐진 위젯을 배치하는 레이아웃 클래스입니다. 각 자식 위젯은 겹치는 순서에 따라 배치되며, 위치를 임의로 조정할 수 있습니다.
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
)
레이아웃 위젯 조합하기
플러터에서는 위에서 소개한 레이아웃 클래스를 조합하여 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, Row 내부에 Column을 배치하고, 그 안에 Container를 추가하는 방식으로 다양한 형태의 레이아웃을 구성할 수 있습니다.
Row(
children: <Widget>[
Column(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.yellow,
),
],
),
Column(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.blue,
),
],
),
],
)
결론
플러터(Flutter)를 사용하여 앱의 레이아웃을 다루는 방법에 대해 알아보았습니다. Container, Row, Column, Stack 등의 다양한 레이아웃 클래스를 조합하여 원하는 화면 구성을 할 수 있습니다. 플러터를 사용하여 멋진 인터페이스를 가진 앱을 개발해보세요!