Notice
Recent Posts
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- network
- Null Safety
- flutter-layout
- dfs
- 코딩 잘하고 싶어!!
- 이직
- 주변에는 능력자 뿐이야!!
- TODO
- flutter_secure_storage
- 포?코DX
- 프로그래머스
- 플러터 책
- Flutter2.8
- 나도 코딩 잘할래!!!!!!!!!!!
- flutter_local_notification
- 댓글이 하나도 없오...ㅠㅠ
- bloc
- 쒸익!!!!!!!!!
- 주니어개발자
- flutter
- 다트 책
- flutter secure storage
- hero animation
- 다트&플러터
- 플러터
- 편하다요
- 크레인 인형뽑기
- FutureBuilder
- open weather api
- 누가 보기는 하는걸까...ㅠㅠ
Archives
- Today
- Total
오늘하루도 우힣ㅎ
flutter의 기본 레이아웃(Column, Row) 본문
생각보다 처음 flutter를 시작할때 Column과 Row를 사용하는데 애를 먹고는 했던 기억이 갑자기 나서 블로그로 남겨 볼까 한다. 사실 따로 쓰게 되면 쉽게 사용하게 되는데 필요에 따라 Column과 Row를 섞어 쓰게 될때 혼돈이 왔던거 같다.
Column과 Row는 열과 행으로 생각하면 된다.
Column1, Column2, Column3... / Row1, Row2, Row3... 과 같이 이들은 모두 children에 들어가는 순서와 같다.
Column
-Column은 세로용 레이아웃이라 생각하자!
Column1 |
Column2 |
Column3 |
Column4 |
Column5 |
Column의 optional parameter에는 MainAxisAlignment와 CrossAxisAlignment가 존재한다. 이는 Colomn내부에서의 정렬 방식을 설정 할수 있도록 해준다.
- MainAxisAlignment : Column의 주방향인 세로에 대한 정렬을 설정하게 된다.
- start — 시작 정렬
- end — 끝정렬
- center— 중앙정렬
- spaceAround— 중간 여백은 동일하나, 첫번째와 마지막 여백은 중간 여백의 절반
- spaceBetween — 양 끝은 붙이고, 중간 여백만 동일하게
- spaceEvenly— 첫번째, 중간, 마지막 여백이 모두 동일하게
- CrossAxisAlignment의 경우 : Column의 교차방향인 가로에 대한 정렬을 설정하게 된다.
- start — 시작 정렬
- end — 끝정렬
- center— 중앙정렬
- stretch — 가능한 크기만큼 자식 요소의 크기를 키운다.
Row
- Row는 가로용 레이아웃이라 생각하자!
Row1 | Row2 | Row3 | Row4 | Row5 | Row6 |
- MainAxisAlignment : Row의 주방향인 가로에 대한 정렬을 설정하게 된다.
- start — 시작 정렬
- end — 끝정렬
- center— 중앙정렬
- spaceAround— 중간 여백은 동일하나, 첫번째와 마지막 여백은 중간 여백의 절반
- spaceBetween — 양 끝은 붙이고, 중간 여백만 동일하게
- spaceEvenly— 첫번째, 중간, 마지막 여백이 모두 동일하게
- CrossAxisAlignment의 경우 : Row의 교차방향인 세로에 대한 정렬을 설정하게 된다.
- start — 시작 정렬
- end — 끝정렬
- center— 중앙정렬
- stretch — 가능한 크기만큼 자식 요소의 크기를 키운다.
내가 짠 코드는
github.com/eory96/blog_source_code/tree/main/flutter_app_column_row
에서 확인이 가능합니다!!
'flutter > Etc' 카테고리의 다른 글
[Flutter] Flutter 2.8 릴리즈 노트 (0) | 2021.12.18 |
---|---|
Flutter) Null Safety (0) | 2021.08.01 |
책 후기) 모바일 앱 개발을 위한 다트&플러터 (0) | 2020.11.22 |
Flutter) FlutterSecureStorage를 이용한 자동 로그인 구현 (3) | 2020.10.19 |
Flutter) Hero Animation이용하여 앱을 풍부하게 하기 (0) | 2020.09.09 |
Comments