[flutter] 레이아웃 - ROW, COLUMN
서론
오늘은 flutter에서 가장 기본이 되는 레이아웃(배치)에 대해 알아보려 합니다.
- ROW : 행 - 수평 형태로 (왼쪽에서 오른쪽) 위젯을 순차적으로 배치 합니다.
- COLUMN : 열 - 수직 형태로 (위에서 아래) 위젯을 순차적으로 배치 합니다.
플러터란 ? 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크이다. 언어는 구글이 개발한 Dart 를 사용한다. 안드로이드, iOS, Web, Desktop 을 지원하며 구글의 차기 OS Fuchsia의 메인개발환경이 된다고 한다.
참조링크
소스코드
body: Row ( Row, Column )
mainAxisAlignment: MainAxisAlignment.start ( start, center, end )위와 같이 변형하여 테스트 한 결과 입니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'demo01',
home: Scaffold(
appBar: AppBar(
title: Text('Row - MainAxisAlignment.start'),
),
body: Row (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.star, size: 50, color: Colors.red),
Icon(Icons.star, size: 50, color: Colors.red),
Icon(Icons.star, size: 50, color: Colors.red),
Icon(Icons.star, size: 50, color: Colors.red),
Icon(Icons.star, size: 50, color: Colors.black),
],
),
),
);
}
}
ROW
- 일부 중복된 레이아웃은 삭제하였음을 양해 바랍니다. ( 이미지 첨부가 너무 많아져서 ... )
COLUMN
- 공간을 조절해 주는 spaceXXX 같은 경우 미묘하게 차이가 있네요 :)
기타 설정
crossAxisAlignment (상하좌우 양축 정렬)
- CrossAxisAlignment.baseline : 폰트크기가 다르거나 할때 기본 라인 축에 맞춰 정렬할때 유용
- CrossAxisAlignment.start : 시작지점으로 맞춤, 이후 좌우(Column인 경우) 또는 상하(Row인 경우) 간격을 맞춤
- CrossAxisAlignment.stretch : 늘림(최대화)
- CrossAxisAlignment.center : 중앙정렬
mainAxisSize 메인 축의 크기(컨테이너 영역)
- MainAxisSize.min : 최소화
- MainAxisSize.max : 최대화
관련 글 링크
@flutters : 제가 작성한 글 중 fluter 관련 글만 모아서 리스팀 처리
짱짱맨 호출에 응답하여 보팅하였습니다.
플러터는 레이아웃이 다양하네요.
저는 앱 레이아웃 잡는게 제일 어렵습니다.
Hi @wonsama!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.802 which ranks you at #4673 across all Steem accounts.
Your rank has improved 1 places in the last three days (old rank 4674).
In our last Algorithmic Curation Round, consisting of 237 contributions, your post is ranked at #65.
Evaluation of your UA score:
Feel free to join our @steem-ua Discord server