[Flutter] Row & Column Widgets

 

 

Row widget

Row 하위 위젯들을 수평(가로) 방향으로 배치하는 위젯

 

Row(
  mainAxisAlignment: MainAxisAlignment.center, // 주 축 기준 중앙
  crossAxisAlignment: CrossAxisAlignment.center, // 교차 축 기준 중앙
  children: <Widget>[
    Text('Hello!'),
    Text('Flutter Beginner!'),
    Icon(Icons.sentiment_very_satisfied),
  ]
)

mainAxisAlignment 속성을 사용하면 주 축을 기준으로 정렬을 수정하는 것이 가능하며,

교차 축 정렬은 crossAxisAlignment 속성을 사용할 수 있다.

 

Column widget

Row와 동일 하지만 수직 방향으로 배치

 

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 주 축 기준 중앙
  children: <Widget>[
    Text('Hello,'),
    Text('Flutter Beginner!'),
    Icon(Icons.sentiment_very_satisfied),
  ]
)

 

 

MainAxisAlignment

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• spaceAround— 중간 여백은 동일하나, 첫번째와 마지막 여백은 중간 여백의 절반
• spaceBetween — 양 끝은 붙이고, 중간 여백만 동일하게
• spaceEvenly— 첫번째, 중간, 마지막 여백이 모두 동일하게
•  

crossAxisAlignment

• start — 시작 정렬
• end — 끝정렬
• center— 중앙정렬
• stretch — 가능한 크기만큼 자식 요소의 크기를 키운다.