[6주차] Codelab - Basic Flutter layout concepts

6주차 플러터 스터디에서는 flutter 공식 문서로 제공하는 Codelab - Basic Flutter layout concepts를 공부했습니다.

Codelab - <Flutter layout 기본 개념>

https://flutter-ko.dev/docs/codelabs/layout-basics

Basic Flutter layout concepts

 

---

 

# Row and Column classes

Row(  //Row or Column - parents
  children: [ 
    //Widgets
  ]                                                                                                                                                                                                                                                         
)

 

# Axis size and alignment

mainAxisSize property

Row’s main axis : horizontal

Column’s main axis : vertical

mainAxisSize property - Row(Column)이 main axis의 공간을 얼마나 차지할 것인지 결정

-MainAxisSize.max

모든 공간을 차지

children 배치 후 공간이 남으면 중간중간 공백 추가하여 넓게 배치

-MainAxisSize.min

필요한 공간만 차지

children 배치 후 공간이 남으면 빈 공간 없이 중앙에 배치

Row( 
  mainAxisSize: MainAxisSize.max,
  //mainAxisSize: MainAxisSize.min,
  children: [
    //Widgets
  ]                                                                                                                                                                                                                                                         
)

 

mainAxisAlignment property

mainAxisAlignment property - Row(Column)이 빈 공간에 children을 어떻게 배치할지 결정

-MainAxisAlignment

.start: main axis의 시작 부분에 위치

.end: main axis의 끝 부분에 위치

.center: main axis의 중간에 위치

.spaceBetween: 같은 간격으로 넓히는데 맨 끝 간격x

.spaceEvenly: 같은 간격으로 넓히는데 맨 끝도 같은 간격으로

.spaceAround: 간격 넓히는데 양 끝 간격은 위젯들 간격의 1/2

 

crossAxisAlignment property

-CrossAxisAlignment

.start: cross axis의 시작 부분에 위치 (Row only)

.end: cross axis의 끝 부분에 위치 (Row only)

.center: cross axis의 중간에 위치 (Row only)

.stretch: 여백 없이 늘려 채우기

.baseline: character baselines에 따라 children을 정렬 (Text only, testBaseline: TextBaseline.alphabetic)

Row( 
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    //Widgets
  ]                                                                                                                                                                                                                                                         
)

 

 

# Flexible Widget

Row, Column이 widget을 배치할 때 widget은 고정된 size를 가짐 - inflexible

Flexible widget으로 widget을 감싸 widget size 재조정 가능 - flexible

-flex, fit property에 따라 size 조정

 

flex property & fit property

flex: 숫자로 flex widget 사이 공간을 결정

fit: Flexible widget이 공간을 다 채울지 결정

-FlexFit.loose : widget’s preferred size (default)

-FlexFit.tight : widget이 빈 공간을 모두 채우도록

Row(
	children: [
		//Widget
    Flexible(
      flex: 1,
      fit: FlexFit.loose,
      child: //resizable Widget,
    ),
    //Widget
  ],
);      

 

 

# Expanded widget

Expanded Widget으로 widget을 감싸 빈 공간을 모두 채우도록 할 수 있음

Row(
	children: [
		//Widget
    Expanded(
      child: //Widget,
    ),
    //Widget
  ],
); 

 

 

# SizedBox Widget

1. widgets 사이 여백 생성 - SizedBox Widget 단독 사용
2. widget size 조정 - SizedBox로 widget 감싸기

-height, width properties 사용

Row(
	children: [
    SizedBox( //wrap a widget
			width: 100,
      child: //Widget,
    ),
    //Widget
		SizedBox (width: 10), //creating empty space
		//Widget
  ],
); 

 

 

# Spacer widget

widgets 사이 여백 생성

-flex property 사용

Row(
	children: [
    //Widget
		Spacer (flex: 1),
		//Widget
  ],
);