Flutter 강좌 04 - 레이아웃Flutter/Flutter 강좌2023. 10. 18. 21:25@webnautes

Table of Contents

Flutter의 레이아웃에 대해 다루고 있습니다.

2022. 9. 25 최초작성

다음 글을 바탕으로 작성되었습니다.

https://docs.flutter.dev/development/ui/layout

위젯을 세로/가로로 배치

일반적인 레이아웃은 자식 위젯을 세로 또는 가로 방향으로 일렬로 배치하는 것입니다. Row 위젯을 사용하여 자식 위젯을 가로 방향으로 일렬로 배치하거나 Column 위젯을 사용하여 자식 위젯을 세로 방향으로 일렬로 배치할 수 있습니다.

아래 스크린샷의 레이아웃은 Row 위젯이 메인 위젯으로 구성됩니다. Row에는 두 개의 자식 위젯이 있습니다. 왼쪽에 Column 위젯이 있고 오른쪽에 이미지 위젯이 있습니다.

왼쪽 Column 위젯에는 Column 위젯과 Row 위젯이 아래 그림처럼 중첩되어 있습니다.

mainAxisAlignment, crossAxisAlignment 속성을 사용하여 Row 위젯이나 Column 위젯이 자식 위젯을 정렬하는 방법을 제어합니다. Row 위젯의 경우 주축(main axis)은 수평 방향이 되고 교차축(cross axis)은 수직 방향이 됩니다. Column 위젯의 경우 주축은 수직방향이 되고 교차축은 수평방향이 됩니다.

아래 예제 코드는 3장의 사과 이미지를 Row 위젯을 사용하여 가로로 배치하여 보여줍니다.

진행하기 전에 프로젝트에 이미지를 추가하여 사용하는 방법을 다음 포스트에서 참고하세요.

Flutter 프로젝트에 이미지 파일 추가하여 사용하기

https://webnautes.blog/4244/

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),

       // Row - 자식 위젯을 가로 방향으로 나란히 배치합니다.
body: Row(

          // MainAxisAlignment.spaceEvenly - 같은 크기로 위젯 사이에 공백을 추가합니다.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          // 자식 위젯으로 이미지 3장을 추가합니다.
children: [
Image.asset('assets/images/apple1.jpeg', width:100, height:100, fit:BoxFit.fill),
Image.asset('assets/images/apple2.jpeg', width:100, height:100, fit:BoxFit.fill),
Image.asset('assets/images/apple3.jpeg', width:100, height:100, fit:BoxFit.fill),
],
),
),
);
}
}

아래 예제 코드는 3장의 사과 이미지를 세로로 배치하여 보여줍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),

        // Column - 자식 위젯을 세로 방향으로 나란히 배치합니다.
body: Column(

          // MainAxisAlignment.spaceEvenly - 같은 크기로 위젯 사이에 공백을 추가합니다.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          // 자식 위젯으로 이미지 3장을 추가합니다.
children: [
Image.asset('assets/images/apple1.jpeg', width:100, height:100, fit:BoxFit.fill),
Image.asset('assets/images/apple2.jpeg', width:100, height:100, fit:BoxFit.fill),
Image.asset('assets/images/apple3.jpeg', width:100, height:100, fit:BoxFit.fill),
],
),
),
);
}
}

위젯 크기 조정

레이아웃이 너무 커서 장치에 맞지 않으면 아래 스크린샷처럼 영향을 받는 가장자리를 따라 노란색 및 검은색 줄무늬 패턴이 나타납니다. 다음은 너무 넓은 행의 예입니다.

Expanded 위젯을 사용하여 높이나 너비에 맞게 위젯의 크기를 조정할 수 있습니다.

아래 예제는 이미지 너비가 너무 넓은 문제를 해결하기 위해 이미지 위젯을 Expanded 위젯에 포함시켜 사용합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),

        // Row - 자식 위젯을 가로 방향으로 나란히 배치합니다.
body: Row(

          // CrossAxisAlignment.center - 자식 위젯을 가운데 정렬합니다.
crossAxisAlignment: CrossAxisAlignment.center,

children: [

            // Expanded 위젯의 자식 위젯으로 이미지 위젯을 추가하면 크기를 적절하게 조정해주기 때문에 이미지가 잘리는 문제를 해결해줍니다.
Expanded(
child: Image.asset('assets/images/apple1.jpeg'),
),
Expanded(
child: Image.asset('assets/images/apple2.jpeg'),
),
Expanded(
child: Image.asset('assets/images/apple3.jpeg'),
),
],
),
),
);
}
}

가운데 있는 이미지가 다른 이미지보다 2배 크게 보이도록 하는 예제 코드입니다. 이를 위해 Expanded 위젯의 flex 속성을 사용합니다. 기본 flex 속성값은 1입니다.

다음 예제 코드는 중간 이미지를 두배 크게 하기 위하여 Expanded 위젯의 flex 속성을 2로 설정합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),

        // Row - 자식 위젯을 가로 방향으로 나란히 배치합니다.
body: Row(

          // CrossAxisAlignment.center - 자식 위젯을 가운데 정렬합니다.
crossAxisAlignment: CrossAxisAlignment.center,

children: [

            // 디폴트 flex 속성값은 1입니다.
Expanded(
child: Image.asset('assets/images/apple1.jpeg'),
),

            // flex 속성을 2로 설정하여 다른 위젯보다 2배 커보이도록 합니다.
Expanded(
flex: 2,
child: Image.asset('assets/images/apple2.jpeg'),
),

            // 디폴트 flex 속성값은 1입니다.
Expanded(
child: Image.asset('assets/images/apple3.jpeg'),
),
],
),
),
);
}
}

인접 위젯을 하나로 묶기

기본적으로 Row 위젯이나 Column 위젯은 주축을 따라 자식 위젯을 배치후, 여유 공간을 많이 둡니다. 자식 위젯들이 인접하게 붙어서 배치하도록 하고 싶으면 mainAxisSize 속성을 MainAxisSize.min으로 설정하면 됩니다.

아래 코드는 이 속성을 사용하여 별 아이콘을 하나로 묶습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),

        // Row - 자식 위젯을 가로방향으로 나란히 배치합니다.
body:Row(

          // MainAxisSize.min - 자식 위젯 사이의 여유공간을 최소로 합니다.
mainAxisSize: MainAxisSize.min,

          // 자식 위젯으로 별 다섯개를 추가합니다.
          children: [
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
),
),
);
}
}

Row, Column 위젯을 중첩하기

레이아웃 프레임워크를 사용하면 필요한 만큼 행과 열 내부에 행과 열을 중첩할 수 있습니다.

위 스크린샷에서 빨간색 사각형으로 표시한 부분은 두 개의 행으로 구현됩니다. 첫번째 행에는 별 5개와 리뷰 수가 표시됩니다. 두번째 행에는 아이콘과 텍스트로 구성된 3개의 열이 포함되어 있습니다.

첫번째 줄을 트리로 표시하면 다음과 같습니다. 별 아이콘 5개를 Row 위젯을 사용하여 한줄로 묶어주고 텍스트와 한줄로 묶어주기 위해 다시 Row 위젯에 포함시킵니다. Container는 좌우 공백을 위해 추가됩니다.

두번째 줄을 트리로 표시하면 다음과 같습니다. 아이콘과 텍스트를 세로로 배치하기 위해 Column 위젯을 사용하고 3개의 Column을 하나의 Row 위젯으로 묶어줍니다. 여백을 추가하기 위해 Row 위젯을 Container 위젯에 포함시킵니다.

import 'package:flutter/material.dart';

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

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo',
home: buildHomePage('Strawberry Pavlova Recipe'),
);
}

Widget buildHomePage(String title) {
const titleText = Padding(
padding: EdgeInsets.all(20),
child: Text(
'Strawberry Pavlova',
style: TextStyle(
fontWeight: FontWeight.w800,
letterSpacing: 0.5,
fontSize: 30,
),
),
);

const subTitle = Text(
'Pavlova is a meringue-based dessert named after the Russian ballerina '
'Anna Pavlova. Pavlova features a crisp crust and soft, light inside, '
'topped with fruit and whipped cream.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Georgia',
fontSize: 25,
),
);

// #docregion ratings, stars
var stars = Row(

      // MainAxisSize.min - 자식 위젯 사이의 여백을 최소로 합니다.
mainAxisSize: MainAxisSize.min,

      // 자식 위젯으로 별 5개를 추가합니다.
children: [
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
Icon(Icons.star, color: Colors.green[500]),
const Icon(Icons.star, color: Colors.black),
const Icon(Icons.star, color: Colors.black),
],
);
// #enddocregion stars

    // 내부 여백을 주기 위해서 컨테이너를 사용합니다.
final ratings = Container(

      // 내부 여백으로 20 픽셀을 추가합니다.
padding: const EdgeInsets.all(20),

      // 위젯을 가로 방향으로 나란히 배치합니다.
      child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,

        // 자식 위젯으로 별 5개(stars)와 문자열을 추가합니다.
children: [
stars,
const Text(
'170 Reviews',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20,
),
),
],
),
);
// #enddocregion ratings

// #docregion iconList
const descTextStyle = TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 18,
height: 2,
);

// DefaultTextStyle.merge() allows you to create a default text
// style that is inherited by its child and all subsequent children.
final iconList = DefaultTextStyle.merge(
style: descTextStyle,
child: Container(

        // 내부 여백으로 20픽셀을 추가합니다.
padding: const EdgeInsets.all(20),

        // 자식 위젯을 가로방향으로 나란히 배치합니다.
child: Row(

          // MainAxisAlignment.spaceEvenly - 자식 위젯 사이에 같은 크기의 여백을 추가합니다.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          // 자식 위젯으로 4개의 Column 레이아웃 위젯을 추가합니다.
children: [

            // 자식 위젯을 세로 방향으로 나란히 배치합니다.
Column(

              // 자식 위젯으로 아이콘과 2개의 문자열을 추가합니다.
children: [
Icon(Icons.kitchen, color: Colors.green[500]),
const Text('PREP:'),
const Text('25 min'),
],
),

            // 자식 위젯을 세로 방향으로 나란히 배치합니다.
Column(

              // 자식 위젯으로 아이콘과 2개의 문자열을 추가합니다.
children: [
Icon(Icons.timer, color: Colors.green[500]),
const Text('COOK:'),
const Text('1 hr'),
],
),

            // 자식 위젯을 세로 방향으로 나란히 배치합니다.
Column(

              // 자식 위젯으로 아이콘과 2개의 문자열을 추가합니다.
children: [
Icon(Icons.restaurant, color: Colors.green[500]),
const Text('FEEDS:'),
const Text('4-6'),
],
),
],
),
),
);
// #enddocregion iconList

// #docregion leftColumn
final leftColumn = Container(
padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
      # 4가지 자식 위젯이 포함됩니다.
child: Column(
children: [
titleText,
subTitle,
ratings,
iconList,
],
),
);
// #enddocregion leftColumn

final mainImage = Image.asset(
'assets/images/apple1.jpeg',
fit: BoxFit.cover,
);

return Scaffold(
appBar: AppBar(
title: Text(title),
),
// #docregion body
body: Center(
child: Container(
margin: const EdgeInsets.fromLTRB(0, 40, 0, 30),
height: 600,
child: Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
                # SizedBox에 포함시켜서 leftColumn의 너비를 440으로 제한합니다.
SizedBox(
width: 440,
child: leftColumn,
),
mainImage,
],
),
),
),
),
// #enddocregion body
);
}
}

아래 스크린샷처럼 태블릿 가로 모드에서 실행해야 합니다.

일반적인 레이아웃 위젯

Flutter에서 제공하는 레이아웃 위젯은 표준 위젯(Standard Widgets)와 매터리얼 위젯(Material Widgets)으로 나누어집니다.

주의할 점은 매터리얼 앱만 매터리얼 위젯을 사용할 수 있습니다.

표준 위젯(Standard widgets)

Container : 위젯에 패딩(padding), 마진(margins), 테두리(borders), 배경색(background color) 등을 위젯에 추가합니다.
GridView: 스크롤 가능한 그리드 상에 위젯을 배치합니다.
ListView: 스크롤 가능한 리스트 상에 위젯을 배치합니다.
Stack: 위젯 위에 다른 위젯이 배치되도록 할 수 있습니다.

매터리얼 위젯(Material widgets)

Card: 사각 영역에 둥근 코너와 그림자를 추가하는데 사용됩니다.
ListTile: 최대 3줄의 문자열과 1개의 아이콘을 추가할 수 있습니다.

Container

많은 레이아웃은 패딩(Padding)을 사용하여 위젯을 분리하거나 테두리(Border) 또는 여백(Margin)을 추가하기 위해 컨테이너를 사용합니다. 전체 레이아웃을 컨테이너에 배치하고 배경색이나 이미지를 변경하여 장치의 배경을 변경할 수 있습니다.

컨테이너를 사용하여 할 수 있는 작업입니다.

내부 여백(padding), 외부 여백(margin), 테두리(border)를 추가합니다.
배경색을 변경하거나 이미지를 추가합니다.
컨테이너에는 하나의 자식 위젯을 포함할 수 있지만 자식 위젯으로 Row 또는 Column 위젯을 사용하여 다수의 위젯을 추가할 수 있습니다.

다음 예제 코드는 두 개의 Row 위젯에 두 개의 이미지 위젯을 각각 추가한 후, 두 개의 Row 위젯을 Column 위젯에 포함시켜서 4등분한 화면을 생성합니다.

import 'package:flutter/material.dart';

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

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter layout demo'),
),
body: Center(child: _buildImageColumn()),
),
);
}

Widget _buildImageColumn() {
return Container(

      decoration: const BoxDecoration(

        // 박스의 내부를 아래 링크에서 볼 수 있는 회색으로 채웁니다.
        // https://api.flutter.dev/flutter/material/Colors/black-constant.html
color: Colors.black26,
),

      // 자식 레이아웃으로 Column 레이아웃 위젯을 추가합니다.
child: Column(

        // Column 레이아웃 위젯에는 2 개의 Row 레이아웃 위젯이 포함되어 있습니다.
children: [

Row(

            // 한개의 Row 레이아웃 위젯에는 2개의 이미지가 포함되어 있습니다.
            children: [
              // 자식 위젯의 크기를 최대한으로 확장해줍니다.
Expanded(
child: Container(
decoration: BoxDecoration(

                    // 박스에 아래 링크에서 볼 수 있는 회색의 너비 10인 테두리를 추가합니다.
                    // https://api.flutter.dev/flutter/material/Colors/black-constant.html
border: Border.all(width: 10, color: Colors.black38),

                    // 박스 코너를 라운드로 합니다.
borderRadius: const BorderRadius.all(Radius.circular(8)),
),

                  // margin - 부모 위젯과의 여백을 지정합니다.
                  // bottom, top, left, right 4가지 방향으로 여백을 4픽셀 추가합니다.
margin: const EdgeInsets.all(4),

                  // 자식 위젯으로 이미지를 추가합니다.
child: Image.asset('assets/images/autom.jpg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black38),
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
margin: const EdgeInsets.all(4),
child: Image.asset('assets/images/autom.jpg',
),
),
)
]
),
Row(
              // 2개의 이미지가 포함되어 있습니다.
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black38),
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
margin: const EdgeInsets.all(4),
child: Image.asset('assets/images/autom.jpg'),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 10, color: Colors.black38),
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
margin: const EdgeInsets.all(4),
child: Image.asset('assets/images/autom.jpg',
),
),
)
]
),
],
),
);
}

}

GridView

GridView는 위젯을 2차원 그리드에 배치합니다. 두 개의 라이브러리에서 제공되는 그리드를 사용하거나 커스텀 그리드를 사용할 수 있습니다. 화면 크기보다 콘텐츠가 많은 경우 스크롤이 가능하도록 해줍니다.

GridView.count를 사용하면 열의 개수를 정할 수 있습니다.
GridView.extent를 사용하면 타일(tile)의 최대 픽셀너비를 지정할 수 있습니다.

다음 예제에서는 GridView.extent을 사용하여 그리드에 있는 타일 하나의 너비를 150픽셀로 지정하고 있습니다.

ListView

Column/Row 레이아웃 위젯처럼 자식 위젯을 세로/가로 방향으로 배치합니다. 자식 위젯이 화면에 보이는 것보다 많은 경우 스크롤을 지원합니다.

ListTile을 사용하여 레스토랑과 극장 리스트를 리스트뷰에 보여줍니다.

수평선을 사용하여 레스토랑과 극장 아이템을 구분하고 있습니다.

Stack

위젯이 다른 위젯 위에 표시되도록 할 수 있습니다. 첫번째 위젯이 맨 아래에 놓이고 그 다음 위젯이 첫번째 위젯 위에 올라가는 순으로 배치됩니다. 스택 위젯은 스크롤을 지원하지 않습니다.

스택 위젯을 사용하여 원형 안에 이미지가 있는 CircleAvatar 위젯 위에 텍스트 위젯을 보여주고 있습니다.

Card

Card 위젯만 사용하여 구성할 수도 있지만 보통 ListTile 위젯과 함께 사용됩니다. Card 위젯을 사용하여 둥근 코너와 그림자를 추가할 수 있습니다.

높이를 지정한 SizeBox 위젯의 자식 위젯으로 Card 위젯이 추가됩니다. Card 위젯에는 3개의 ListTile 위젯이 포함되어 있습니다. 각각의 ListTile 위젯에는 아이콘과 문자열이 포함되어 있습니다. Divider 위젯은 첫 번째 ListTile 위젯과 두 번째 ListTile 사이에 구분을 위해 수평선을 그리는 용도로 사용됩니다.

ListTile

ListTile 위젯에는 최대 3개의 문자열과 아이콘 하나를 추가할 수 있습니다. 아이콘은 문자열 앞에 혹은 문자열 뒤에 배치할 수 있습니다.

첫번째 예제 코드는 Card 위젯 예제와 동일합니다.

ListView 위젯에 다수의 ListTile을 배치하는 예제입니다.

저작자표시 비영리 동일조건

'Flutter > Flutter 강좌' 카테고리의 다른 글

Flutter 프로젝트에 이미지 파일 추가하여 사용하기 (0)	2023.10.18
Flutter 강좌 03 - 위젯 간단히 살펴보기 (0)	2023.10.18
Flutter 강좌 02 - Flutter에서 StatefulWidget과 StatelessWidget의 차이 정리 (0)	2023.10.18
Flutter 강좌 01 - 첫번째 앱 작성하기 (0)	2023.10.18