Flutter와 위젯(Widget) (2)

이번 글에서는 Container 위젯과 위젯을 배치하는 방법에 대해 학습한다.

여러 위젯을 넣기 위한 테스트 코드는 다음과 같다.

import 'package:flutter/material.dart';

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

class Example extends StatelessWidget{
  const Example({Key? key}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: //이곳에 테스트 할 코드를 넣는다.
        ),
      ),
    );
  }
}

Center 안에 있는 child 파라미터 안에 테스트할 코드를 넣어준다.

1. Container

Container는 이름처럼 다른 위젯을 안에 넣을 때 사용하는 위젯이다.

넣고 싶은 위젯을 child 안에 넣을 수 있다.

child: Container(
  color: Colors.pink,
  width: 70.0,
  height: 70.0,
  child: const Center(
    child: Text(
      "Con1",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
),

각각의 요소가 의미하는 바는 다음과 같다.

• color : Container의 배경 색을 결정한다.
• width, height : 각각 너비와 높이를 나타낸다.
• child : Container 안에 넣을 위젯을 의미한다.

이 예제에서는 위젯으로 Center를 넣었고, 그 안에 Text를 넣었다.

그림으로 표현하면 다음과 같다.

위젯 구조

이렇게 해준 이유는 텍스트가 container의 중간에 위치하도록 만들기 위해서이다.

결과는 다음과 같다.

실행 결과

 

2. Padding

Padding은 위젯에 여백을 주기 위해 사용한다.

child 파라미터 안에 넣을 위젯을 추가한다.

child: Container( //색으로 padding을 확인하기 위한 용도의 container
  color: Colors.cyanAccent, //색은 cyan으로 설정
  child: Padding( // padding을 주기 위한 위젯
    padding: const EdgeInsets.all(8.0), //모든 부분에 padding을 8만큼 준다.
    //이전 예제 코드
    child: Container(
      color: Colors.pink,
      width: 70.0,
      height: 70.0,
      child: const Center(
        child: Text(
          "Con1",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
),

위에서 사용한 container를 padding으로 감싸고, 그 상위 위젯을 container로 설정했다.

이렇게 한 이유는 색을 통해 padding이 얼마나 있는지 확인하기 위해서이다.

Padding 위젯 안의 padding 파라미터로 EdgeInsets.all(8.0)을 주었다.

이는 모든 방향에 8.0만큼의 padding을 준다는 의미이다.

 

실행 결과는 다음과 같다.

실행 결과

붉은색 container 바깥으로 cyan 색이 padding 크기만큼 나타나 있는 것을 확인할 수 있다.

padding 크기를 16으로 주면 다음과 같이 나온다.

실행 결과

padding의 크기가 커진 것을 확인할 수 있다.

 

3. Row, Column

Row와 Column은 child 위젯의 배치 방법을 결정한다.

 

1) Row

Row는 위젯을 열 방향으로 배치한다.

child: Row( //Row widget
  mainAxisAlignment: MainAxisAlignment.center, //row 방향을 기준으로 어떻게 정렬할지 결정
  crossAxisAlignment: CrossAxisAlignment.center, //column 방향을 기준으로 어떻게 정렬할지 결정
  children: [ //이 안에 정렬할 widget들을 넣어준다.
    Container(
      color: Colors.tealAccent,
      width: 70.0,
      height: 70.0,
    ),
    Container(
      color: Colors.pink,
      width: 70.0,
      height: 70.0,
    ),
    Container(
      color: Colors.lightBlue,
      width: 70.0,
      height: 70.0,
    ),
  ],
),

실행 결과는 다음과 같다.

실행 결과

3개의 다른 컨테이너가 열 방향으로 정렬된 것을 확인할 수 있다.

 

각각의 parameter는 다음과 같은 역할을 한다.

• mainAxisAlignment : row 방향에서 정렬을 어떻게 할지 지정. 예제에서는 중앙 정렬로 설정
• crossAxisAlignment : column 방향에서 정렬을 어떻게 할지 지정.
• children : 정렬할 위젯이 무엇인지 나타냄

mainAxisAlignment와 crossAxisAlignment를 어떻게 설정하느냐에 따라 다양한 배치 모양이 나타난다.

 

mainAxisAlignment 값 :

• MainAxisAlignment.start : 시작지점부터 정렬
• MainAxisAlignment.center : 중앙에 정렬
• MainAxisAlignment.end : 끝에서부터 정렬
• MainAxisAlignment.spaceBetween : children 안에 있는 위젯 사이의 간격을 균등하게 만듦
• MainAxisAlignment.spaceAround: spaceBetween과 같이 정렬하고 양 끝은 child 사이 거리의 반만큼 설정
• MainAxisAlignment.spaceEvenly : 모든 간격을 균등하게 설정

여러 배치 방법. 위에서 부터 Between, Around, Evenly

crossAxisAlignment 값:

• CrossAxisAlignment.start : 시작지점에 정렬
• CrossAxisAlignment.center : 중앙에 정렬
• CrossAxisAlignment.end : 끝 지점에 정렬
• CrossAxisAlignment.stretch : 최대한 늘려서 정

stretch 결과

 

2) Column

Column 위젯도 Row 위젯과 동일한 방식으로 사용한다.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(
      color: Colors.tealAccent,
      width: 70.0,
      height: 70.0,
    ),
    Container(
      color: Colors.pink,
      width: 70.0,
      height: 70.0,
    ),
    Container(
      color: Colors.lightBlue,
      width: 70.0,
      height: 70.0,
    ),
  ],
),

결과는 다음과 같다.

실행 결과

mainAxisAlignment와 crossAxisAlignment에 사용되는 값은 Row와 동일하다.

 

4. Flexable

Flexable은 유동적으로 크기가 조절되는 위젯이다.

flex 파라미터를 통해 해당 위젯이 공간을 얼마만큼 차지할 것인지 결정할 수 있다.

이 위젯은 Row나 Column 안에 넣어서 사용한다.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Flexible(
      flex: 1,
        child: Container(
          color: Colors.tealAccent,
        ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.orange,
      ),
    ),
  ],
),

앞서 말한 것처럼 flex 값이 달라지면 해당 위젯이 차지하는 비율이 달라진다.

아래 결과를 보자.

왼 : 1대1, 오 : 3대1

왼쪽 화면은 flex를 둘 다 1로 했을 때의 모습이고, 오른쪽은 각각 3,1로 했을 때의 모습이다.

두 화면에서 flexible 위젯이 차지하는 비율이 다른 것을 볼 수 있다.

 

5. Stack

Stack 위젯은 children 안에 있는 위젯을 순차적으로 쌓아 올리는 위젯이다.

child: Stack(
  children: [
    Container(
      color: Colors.red,
      width: 300.0,
      height: 300.0,
    ),
    Container(
      color: Colors.blue,
      width: 200.0,
      height: 200.0,
    ),
    Container(
      color: Colors.green,
      width: 100.0,
      height: 100.0,
    ),
  ],
),

결과는 다음과 같다.

실행 결과

3개의 컨테이너가 쌓여있는 모습을 확인할 수 있다.