4. Column, Row, Expanded

지난 시간 Container에 이어 오늘은 Column, Row, Expanded에 알아보려고 한다. 이전 포스팅에서 불가능했던 Container 간의 분리를 이러한 위젯들을 이용하여 해결할 수 있다.

 

https://codekodo.tistory.com/95

3. Container, Padding

오늘 알아볼 것은 Container와 Padding 위젯이다. 같이 묶어서 작성하는 이유는 두 위젯이 거의 유사하기 때문이다. 우선 공식문서에는 Container가 자식 위젯을 커스터마이징 할 수 있는 위젯이라고 나와있다.

Column

Column은 수직 방향으로 element를 보여주는 위젯이다. Column도 다양한 속성을 가지고 있다.

Column Column({
    Key? key,              
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,   
    MainAxisSize mainAxisSize = MainAxisSize.max,             
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,     
    TextDirection? textDirection,                  
    VerticalDirection verticalDirection = VerticalDirection.down,      
    TextBaseline? textBaseline,                
    List<Widget> children = const <Widget>[]
    })

속성들은 실제로 코드를 작성해보면서 알아보자. 우선 mainAxisAlignment와 crossAxisAlignment가 정렬에 관한 속성이다. Column의 경우 main은 수직방향으로 정렬, crossAxisAlignment는 수평방향으로의 정렬을 위미한다. verticalDirection은 Column의 자식들의 배치에 대한 옵션이다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Column 예제"),
        ),
        body: Column(
          verticalDirection: VerticalDirection.up,
          children: <Widget>[
            Container(
              height: 100,
              color: Colors.red,
            ),
            Container(
              height: 100,
              color: Colors.blue,
            ),
            Container(
              height: 100,
              color: Colors.green,
            ),
          ],
        ),
      ),
    );
  }
}

이렇게 코드를 작성하고 빌드를 진행하면 Container끼리 겹치지 않고 지난 시간에 우리가 원했던 출력 결과가 나오는 것을 볼 수 있다.

Column의 정렬에는 두 가지 타입이 존재하는데 수평 방향과 수직 방향이다. 수평 방향은 CrossAxisAlignment, 수직 방향은 MainAxisAlignment이다. 정렬 속성에도 여러 가지가 존재하는데 자주 쓰이는 spaceAround, spaceBetween, spaceEvenly을 보면 spaceAround의 경우 Column의 children의 위젯을 중심으로 양쪽에 같은 여백을 주는 속성이다. spaceBetween의 경우 위젯들 사이에 같은 여백을, spaceEvenly는 모든 여백이 같은 크기인 속성이다. 실제 출력 결과를 보면 쉽게 이해가 될 것이다.

spaceAround

spaceBetween

spaceEvenly

VerticalDirection 속성은 말 그대로 위에서 아래로 보여줄 것인지, 아래에서 위로 보여줄 것인지를 정하는 속성이다.

Row

Row도 Column과 유사하다. 차이가 있다면 MainAxisAlignment와 CrossAxisAlignment가 의미하는게 Column과 반대다. Column에서는 Main은 수직 방향, Cross는 수평 방향이었는데 Row에서는 Main은 수평 방향, Cross는 수직 방향이 된다.

 

자세한 설명은 생략하는 걸로...

Expanded

Expanded는 뭘까? 해석하면 확장? 의 의미인데 어디에 사용하는 것일까? Expanded는 Column과 Row에서 사용할 수 있는 위젯으로 확장 가능한 Container라고 생각하면 편하다. 아래의 두 출력 결과를 보면 첫 번째는 Expanded를 사용하지 않은 결과이고, 두 번째는 Expaned를 사용한 결과이다.

Expanded를 사용하면 여백 없이 유연하게 Container를 채울 수 있다. 또한 Expanded에는 flex라는 속성이 존재하는데 이는 Expanded 간에 크기를 의미한다.

이렇게 사용할 수 있고 Black : Indigo Container의 크기가 1 : 2 가 된다.

검은색 영역의 크기가 좀 더 커진 것을 볼 수 있다.