2. UI/UX 디자인 및 위젯 구성
FlutterFlow의 직관적인 빌더를 사용하여 아름답고 사용하기 쉬운 인터페이스를 만듭니다.
2.1. 기본 위젯 이해 (Container, Column, Row)
Flutter의 핵심인 Container, Column (세로 배열), Row (가로 배열) 위젯을 사용하여 모든 레이아웃을 구성합니다.
// FlutterFlow의 위젯 트리 구조
Column
-> Container (Padding/Margin 설정)
-> Row (Horizontal Alignment)
-> Text (Label)
-> Icon (Button)2.2. 반응형 디자인 설정
앱이 모바일과 웹에서 일관되게 보이도록 반응형(Responsive) 속성을 사용합니다. 특히 Wrap 위젯이나 `visibility` 설정을 통해 화면 크기에 따라 위젯을 숨기거나 재배치할 수 있습니다.
팁: 너비 설정 시 px 대신 %나 Flex를 사용하여 유연한 레이아웃을 확보하는 것이 중요합니다.