Container Widget
플러터에서 가장 베이직한 레이아웃은 Conatiner 위젯이다. 이 위젯은 박스를 제공하는데 이건 다른 위젯들을 포함할 수 있다.
컨테이너 위젯은 너비, 높이, 패딩, 데코레이션, 정렬과 같은 속성들을 정의한다.
Container(
width: 200,
height: 100,
color: Colors.blue,
child: Text("hello"),
)Column 과 Row 위젯
부모 위젯내에서 위젯 여러개를 수직으로 혹은 수평으로 정렬하려면 Column Widget 이나 Row Widget 을 사용할 수 있다. 이러한 위젯들은 자동적으로 자식들의 사이즈를 조정하고 배치를 조정한다. 예를 들어 간단한 로그인폼을 칼럼 위젯으로 만들어보자.
Column(
children: [
TextFormField(),
TextFormField(),
ElevatedButton(),
],
)Wrap 과 GridView 위젯
더 복잡하고 반응적인 레이아웃들을 만들려면 플러터는 Wrap 과 GridView 를 제공한다. Wrap 위젯은 위젯들을 칼럼 위젯과 비슷하게 배열하는데 여기서 여러개의 line 들로 wrapping 하는 것을 허용한다.
한편, GridView 위젯은 커스터마이즈한 그리드로 아이템들을 배치할 수 있다.
효과적인 레이아웃 팁 💘
- 공간 채울때는 Expanded 위젯을 사용하기
- Align, Center 등의 위젯을 사용하여 정렬 제어하기
- Padding과 SizedBox 위젯을 사용하여 패딩과 여백 추가하기
- 디버깅 목적으로 LayoutBuilder로 레이아웃 주석 달기
- 시맨틱스와 포커스 순회를 사용하여 접근성 고려하기
이미 만들어져있는 Material 과 Cupertino 위젯
플러터에서는 Material 과 Cupertino 라는 이미 만들어진 위젯들을 제공하고 있다. 이건 디자인 가이드라인에 일치하는 위젯들이다. 이러한 위젯들은 예를 들어 AppBar, BottomNavigationBar, Drawer 등등의 위젯들을 포함하고 있다.
잘 디자인된 홈스크린은 아마 이런 느낌?
Scaffold(
appBar: AppBar(),
body: ListView(
children: [
ListTitle(),
ListTitle(),
],
),
bottomNavigationBar: BottomNavigationBar(),
)반응형이고 직관적인 UI를 만들려면 어떻게 연습할까?
레이아웃 기본을 마스터하는 것이 중요하지만, 반응형 및 직관적인 UI를 생성하기 위한 최선의 방법을 따르는 것도 마찬가지로 중요하다.
예를 들면,,
- 대비와 여백을 효과적으로 사용하여 가독성 향상시키기.
- 다양한 화면 크기와 방향을 지원하기.
- 터치 대상에 대한 어포던스(예: 그림자, 물결 모양) 제공하기.
- 시각 및 이동성 장애를 가진 사용자의 접근성 고려하기.
- 지연 로딩과 캐싱을 구현하여 성능 최적화하기.
- 사용자에게 친숙한 경험을 제공하기 위해 플랫폼 관례 따르기.
이 원칙들을 실천하기 위해, GridView 위젯을 사용하여 모의 소셜 미디어 피드를 하려고 한다. 이 피드는 이미지, 텍스트 및 액션이 포함된 게시물을 표시하고, 게시물을 탭하면 상세 화면으로 이동한다. 이 과정에서, 레이아웃 조정과 사용성 테스트를 통해 디자인을 반복적으로 개선할 것이다. (목표는 플랫폼 품질 기준을 충족하는 세련되고 직관적인 인터페이스를 만드는 것이다)
다음 장에서는 동적 데이터와 서비스를 우리의 Flutter 앱에 통합하는 방법을 배울 것이다.
