Column()

flutter 위젯 중 위젯을 배치시키는 위젯인 Column(), Row()에 대해서 알아보자
이 글에서는 Column()에 대해서만 알아보겠다

flutter로 UI 작업을 해보면 여러 widget들을 스크린 상에 배치를 시켜줘야 한다
Column() widget은 세로/열을 기준으로 widget을 배치한다

Column() arguments..

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>[],
  }) 

사용 방법은 Column()으로 감싸서 children 속성에 widget을 넣어주면 세로로 위젯들이 배치되서 나오는 것을 확인할 수 있다

Column() widget의 중요한 인자 값인 crossAxisAlignment, mainAxisAlignmet가 있다
crossAxisAlignment는 children 안에 있는 위젯의 가로 배치를 제어하고 mainAxisAlignmet는 세로 배치를 제어할 수 있다

mainAxisAlignmet: MainAxisAlignment.start;
mainAxisAlignmet: MainAxisAlignment.center;
mainAxisAlignmet: MainAxisAlignment.end;
mainAxisAlignmet: MainAxisAlignment.spaceAround;
mainAxisAlignmet: MainAxisAlignment.spaceEvenly;
mainAxisAlignmet: MainAxisAlignment.spaceBetween;

crossAxisAlignment: CrossAxisAlignment.start;
crossAxisAlignment: CrossAxisAlignment.center;
crossAxisAlignment: CrossAxisAlignment.end;
crossAxisAlignment: CrossAxisAlignment.center;
crossAxisAlignment: CrossAxisAlignment.baseline;
crossAxisAlignment: CrossAxisAlignment.stretch;

FLUTTER을 세로로 배치하는 방법임

Column(
            crossAxisAlignment: crossAxisAlignment(index),
            mainAxisAlignment: mainAxisAlignment(index),
            children: [
              const Text('F'),
              const Text('L'),
              const Text('U'),
              const Text('T'),
              const Text('T'),
              const Text('E'),
              const Text('R'),
              crossTitle(),
              mainTitle(),
            ],
          ),

Example