화면 구성 위젯 (영역 생성 및 배치하기)

SizedBox

역할
- 자식 위젯의 크기를 지정
- 위젯 사이의 공간을 생성
크기가 지정된 자식 위젯이 있으면 자식 위젯의 크기에 맞춰진다.
자식 위젯이 없거나 width나 height를 지정하지 않으면 각각 기본 값으로 double.infinity를 가지며,
부모 위젯의 최대 크기를 갖게 된다.
참고

Center(
    child: SizedBox(
        width: 300,
        height: 300,
        child: Container(
            color: Colors.blue,
        ),
    ),
)

Container

역할
- 자식 위젯의 크기를 지정
- 앱 내의 영역끼리 구분하는 요도
크기가 지정된 자식 위젯이 있으면 자식 위젯의 크기에 맞춰진다.
자식 위젯이 없거나 width나 height를 지정하지 않으면 각각 기본 값으로 double.infinity를 가지며,
부모 위젯의 최대 크기를 갖게 된다.
참고

Container(
    width: 300, //가로 길이
    height: 300, //세로 길이
    padding: EdgeInsets.all(50), //내부 여백
    margin: EdgeInsets.all(50), //외부 여백
    decoration: BoxDecoration(
        color: Colors.cyanAccent, //배경 색상
        //선의 둥근 정도
        borderRadius: BorderRadius.all(
            Radius.circular(70),
        ),
        //그림자 효과
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                blurRadius: 20,
                spreadRadius: 2,
            ),
        ],
        //선의 색상 및 두께
        border: Border.all(
            color: Colors.blue,
            width: 3,
        ),
    ),
)

Row

역할
- 내부의 위젯 목록을 가로로 정렬하기 위한 위젯
주로 사용하는 속성
- mainAxisAlignment (가로 정렬 기준)
  - MainAxisAlignment.start
    - 좌측에 몰아서 정렬한다.
  - MainAxisAlignment.center
    - 중앙에 몰아서 정렬한다.
  - MainAxisAlignment.end
    - 우측에 몰아서 정렬한다.
  - MainAxisAlignment.spaceBetween
    - 첫번째 위젯과 마지막 위젯을 양끝에 배치한다.
    - 나머지 영역을 아직 배치되지 않은 위젯의 개수에 비례하여 균등하게 배분한다.
  - MainAxisAlignment.spaceAround
    - 위젯 간의 간격을 균등하게 배분한다.
    - 첫번째 위젯과 마지막 위젯에는 균등하게 배분된 영역의 절반만큼씩 배분한다.
    - 위젯이 n개 있고, 위젯 간의 거리가 x일때,
      간격의 합은 0.5 * x + (n - 1) * x + 0.5 * x가 된다.
  - MainAxisAlignment.spaceEvenly
    - 위젯 간의 간격을 균등하게 배분한다.
    - 위젯의 순번과 관계 없이 모든 위젯의 앞뒤로 간격을 배분한다.
- crossAxisAlignment (세로 정렬 기준)
  - CrossAxisAlignment.start
    - 상단에 몰아서 정렬한다.
  - CrossAxisAlignment.center
    - 중앙에 몰아서 정렬한다.
  - CrossAxisAlignment.end
    - 하단에 몰아서 정렬한다.
  - CrossAxisAlignment.stretch
    - 자식 위젯의 height 속성을 무시하고 부모 위젯의 최대 세로 길이 값을 갖게 한다.
  - CrossAxisAlignment.baseline
    - 베이스 라인을 기준으로으로 정렬한다.
    - textBaseline과 함께 쓴다.
- mainAxisSize (Row 위젯이 차지하는 범위)
  - MainAxisSize.max
    - 부모 위젯의 넓이를 모두 차지한다.
  - MainAxisSize.min
    - 내부의 위젯 목록의 넓이만큼만 차지한다.
기본 값
- mainAxisAlignment
  - MainAxisAlignment.start
- crossAxisAlignment
  - CrossAxisAlignment.center
- mainAxisSize
  - MainAxisSize.max
참고

const Row(
    //정렬할 위젯 목록
    children: <Widget>[
        Expanded(
            child: Text('Deliver features faster', textAlign: TextAlign.center),
        ),
        Expanded(
            child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
        ),
        Expanded(
            child: FittedBox(
                child: FlutterLogo(),
            ),
        ),
    ],
)

Column

역할
- 내부의 위젯 목록을 세로로 정렬하기 위한 위젯
주로 사용하는 속성
- mainAxisAlignment (세로 정렬 기준)
  - MainAxisAlignment.start
    - 상단에 몰아서 정렬한다.
  - MainAxisAlignment.center
    - 중앙에 몰아서 정렬한다.
  - MainAxisAlignment.end
    - 하단에 몰아서 정렬한다.
  - MainAxisAlignment.spaceBetween
    - 첫번째 위젯과 마지막 위젯을 양끝에 배치한다.
    - 나머지 영역을 아직 배치되지 않은 위젯의 개수에 비례하여 균등하게 배분한다.
  - MainAxisAlignment.spaceAround
    - 위젯 간의 간격을 균등하게 배분한다.
    - 첫번째 위젯과 마지막 위젯에는 균등하게 배분된 영역의 절반만큼씩 배분한다.
    - 위젯이 n개 있고, 위젯 간의 거리가 x일때,
      간격의 합은 0.5 * x + (n - 1) * x + 0.5 * x가 된다.
  - MainAxisAlignment.spaceEvenly
    - 위젯 간의 간격을 균등하게 배분한다.
    - 위젯의 순번과 관계 없이 모든 위젯의 앞뒤로 간격을 배분한다.
- crossAxisAlignment (가로 정렬 기준)
  - CrossAxisAlignment.start
    - 좌측에 몰아서 정렬한다.
  - CrossAxisAlignment.center
    - 중앙에 몰아서 정렬한다.
  - CrossAxisAlignment.end
    - 우측에 몰아서 정렬한다.
  - CrossAxisAlignment.stretch
    - 자식 위젯의 width 속성을 무시하고 부모 위젯의 최대 가로 길이 값을 갖게 한다.
  - CrossAxisAlignment.baseline
    - 베이스 라인을 기준으로으로 정렬한다.
    - textBaseline과 함께 쓴다.
- mainAxisSize (Row 위젯이 차지하는 범위)
  - MainAxisSize.max
    - 부모 위젯의 넓이를 모두 차지한다.
  - MainAxisSize.min
    - 내부의 위젯 목록의 넓이만큼만 차지한다.
참고

const Column(
  children: <Widget>[
    Text('Deliver features faster'),
    Text('Craft beautiful UIs'),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Expanded

역할
- Row/Column/Flex의 남는 영역을 채우는 위젯
특징
- 자식 위젯이 부모 위젯보다 크거나 작거나에 관계 없이 항상 최대 사이즈로 확장된다.
주로 사용하는 속성
- child
  - 자식 위젯을 지정한다.
  - 자식 위젯은 크기 관련 속성이 무시되고 Expanded 위젯이 차지하는 범위만큼의 크기를 가지게 된다.
    - Row의 경우에는 자식 위젯의 width 속성이, Column의 경우에는 height 속성이 무시된다.
- flex
  - n개의 Expanded 위젯이 존재할 때, 그 비율을 나타낸다.
  - 2개의 Expanded 위잿이 있고 각각 flex 속성으로 1과 2라는 값을 가지고 있다면,
    각 위젯의 넓이의 비율은 1:2가 된다.
  - 기본 값 : 1
참고

Column(
    children: <Widget>[
        Container(
            width: 100,
            height: 100,
            color: Colors.blue,
        ),
        Expanded(
        child: Container(
            width: 100,
            color: Colors.amber,
        ),
        ),
        Container(
            width: 100,
            height: 100,
            color: Colors.blue,
        ),
    ],
)

Flexible

역할
- Row/Column/Flex의 남는 영역을 채우는 위젯
특징
- 자식 위젯이 부모 위젯보다 큰 경우
  - 부모 위젯의 크기에 맞게 최대 사이즈로 확장된다.
- 자식 위젯이 부모 위젯보다 작은 경우
  - 자식 위젯의 고유 크기만큼의 넓이를 가진다.
주로 사용하는 속성
- child
  - 자식 위젯을 지정한다.
  - 자식 위젯은 크기 관련 속성이 무시되고 Flexible 위젯이 차지하는 범위만큼의 크기를 가지게 된다.
    - Row의 경우에는 자식 위젯의 width 속성이, Column의 경우에는 height 속성이 무시된다.
- flex
  - n개의 Flexible 위젯이 존재할 때, 그 비율을 나타낸다.
  - 2개의 Flexible 위잿이 있고 각각 flex 속성으로 1과 2라는 값을 가지고 있다면,
    각 위젯의 넓이의 비율은 1:2가 된다.
  - 기본 값 : 1
- fit
  - 자식 위젯이 차지하는 범위를 지정한다.
  - 종류
    - FlexFit.tight
      - 자식 위젯의 크기를 무시하고 남는 영역을 차지한다.
    - FlexFit.loose
      - 자식 위젯의 고유 크기만큼의 넓이를 가진다.
  - 기본 값 : FlexFit.loose
참고

Container(
    width: 300, //가로 길이
    height: 300, //세로 길이
    color: Colors.blue,
    child: Row(children: [
        Flexible(
            fit: FlexFit.tight,
            child: Container(width: 100, height: 100, color: Colors.red,),
        ),
        Container(width: 100, height: 100, color: Colors.yellow,)
    ],),
)

Align

역할
- 자체적으로 하위 항목을 정렬하고 선택적으로 하위 크기에 따라 크기를 조정한다.
주로 사용하는 속성
- alignment
  - 자식 위젯을 정렬하는 방법
  - 종류
    - Alignment.topLeft
      - 상단 좌측 정렬
    - Alignment.topCenter
      - 상단 중앙 정렬
    - Alignment.topRight
      - 상단 우측 정렬
    - Alignment.centerLeft
      - 중단 중앙 정렬
    - Alignment.center
      - 중단 좌측 정렬
    - Alignment.centerRight
      - 중단 우측 정렬
    - Alignment.bottomLeft
      - 하단 좌측 정렬
    - Alignment.bottomCenter
      - 하단 중앙 정렬
    - Alignment.bottomRight
      - 하단 우측 정렬
  - 기본 값 : Alignment.center
  - Alignment(0.5,-0.75)처럼 직접 비율을 설정할 수도 있다.
참고

Center(
    child: Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: const Align(
            alignment: Alignment.topRight,
            child: FlutterLogo(
                size: 60,
            ),
        ),
    ),
)

Center

역할
- 자식 위젯을 부모 위젯의 정중앙에 위치하게 한다.
참고

Container(
    width: 300,
    height: 300,
    color: Colors.blue,
    child: Center(
        child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
        ),
    ),
)

Padding

부모 위젯의 내부에 지정한 만큼의 여백을 추가한다.
여백 지정 방법
- EdgeInsets.all(double value)
  - 모든 방향에 지정한 만큼의 여백을 추가한다.
- EdgeInsets EdgeInsets.only()
  - top/bottom/left/right 속성을 통해 상/하/좌/우에 대한 각각의 여백을 추가할 수 있다.
  - 각 속성의 기본 값은 0.0이다.
- EdgeInsets.zero
  - 모든 방향의 여백을 0으로 지정한다.
- EdgeInsets.fromLTRB(left, top, right, bottom)
  - 좌상우하 순서대로 여백을 지정한다.
  - 여백이 없는 방향의 경우에도 0으로 지정해줘야 한다.
- EdgeInsets.symmetric()
  - vertical/horizontal 속성을 통해 상하/좌우에 대한 각각의 여백을 추가할 수 있다.
  - 각 속성의 기본 값은 0.0이다.
참고

Container(
    width: 300,
    height: 300,
    color: Colors.blue,
    child: Center(
        child: Padding(
            padding: EdgeInsets.all(10),
            child: Container(
                color: Colors.red,
            ),
        ),
    ),
)

Stack

역할
- 부모 위젯의 가장자리를 기준으로 자식 위젯들을 겹치게 배치한다.
- 텍스트나 이미지를 그라디언트로 오버레이하는 등의 작업에 유용하다.
참고

SizedBox(
    width: 250,
    height: 250,
    child: Stack(
        children: <Widget>[
            Container(
                width: 250,
                height: 250,
                color: Colors.white,
            ),
            Container(
                padding: const EdgeInsets.all(5.0),
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: <Color>[
                            Colors.black.withAlpha(0),
                            Colors.black12,
                            Colors.black45
                        ],
                    ),
                ),
                child: const Text(
                    'Foreground Text',
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                ),
            ),
        ],
    ),
)

화면 구성 위젯 (영역 생성 및 배치하기)

SizedBox

Container

Row

Column

Expanded

Flexible

Align

Center

Padding

Stack

관련된 글

Flutter에 대하여

위젯 (Widget)

환경설정