Flutter Widgets 완전 가이드: 레이아웃부터 상태까지
트리보다 경계를 먼저 본다
실무에서는 보통 다음 세 층이 분리될수록 유지보수가 쉬워집니다.
- 버튼, 카드, 타이포 같은 디자인 프리미티브
- 도메인 의미를 가진 기능 위젯
- 상태와 라우팅을 조정하는 화면 컨테이너
이 층이 섞이면 재사용성도 떨어지고 버그가 어디서 시작됐는지 찾기도 어려워집니다.
Stateless와 Stateful보다 중요한 질문
더 중요한 질문은 “누가 이 변화를 소유해야 하는가”입니다.
- 아주 작은 UI 상호작용에만 필요한 값이면 로컬 상태가 적합합니다.
- 네비게이션, 저장, 서버 통신에 영향을 주는 값이면 화면 밖으로 올리는 편이 안전합니다.
- 서브트리 재구성이 비싸면 무조건 최적화하기보다 렌더링 경계를 나누는 쪽이 먼저입니다.
위젯은 싸지만 책임이 혼란스러운 구조는 비쌉니다.
오래 가는 레이아웃 원칙
- 가능한 한 레이아웃 깊이를 얕게 유지한다
- 간격과 타이포 토큰을 반복 정의하지 않는다
Expanded,Flexible, 제약 조건을 의도적으로 사용한다- 긴 문장과 다국어를 처음부터 고려한다
- 리스트 성능을 나중 문제가 아니라 기능 요구사항으로 본다
특히 긴 리스트, 폼, 복합 스크롤 화면에서 구조의 약점이 가장 빨리 드러납니다.
Key와 리스트는 버그 방지 장치다
Key는 장식이 아니라 항목의 정체성을 보존하는 장치입니다. 정렬, 필터링, 애니메이션이 들어간 리스트에서 Key가 없으면 입력 상태가 날아가거나 엉뚱한 셀이 갱신되는 문제가 쉽게 생깁니다.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return OrderRow(
key: ValueKey(item.id),
item: item,
);
},
);작아 보이지만 이런 결정이 실제 UI 버그를 많이 줄여 줍니다.
출시 전 점검 포인트
- 상태 소유권이 명확한가
- 위젯 구조가 기능 경계와 맞는가
- 리스트와 폼이 정체성을 제대로 유지하는가
- 회전, 분할 화면, 긴 문자열에서 레이아웃이 버티는가
- 성능 문제가 프레임워크가 아니라 구조 문제인지 확인했는가
Flutter 위젯의 힘은 “모든 것이 위젯”이라는 문장 자체보다, UI를 코드로 구조화할 수 있다는 데 있습니다. 결국 품질은 위젯 기술보다 책임 분리에 의해 결정됩니다.
Continue Reading
다음으로 읽기 좋은 글
모바일 앱 성능 최적화: React Native와 Flutter 실전 가이드
React Native와 Flutter 앱의 성능을 실무 기준으로 최적화하는 방법을 설명합니다. 렌더링, 이미지, 리스트, 메모리, 번들 크기, 운영 지표를 다룹니다.
📱 MobileFlutter Riverpod 2.0 상태 관리 완전 가이드
Flutter 상태 관리를 위한 Riverpod 2.0을 실무 관점에서 정리합니다. Provider 종류, Notifier, AsyncNotifier, 의존성 주입, 코드 생성 전략을 다룹니다.
📚 IT 이야기스티브 잡스와 아이폰: 컴퓨팅을 다시 손안으로 가져온 이야기
아이폰의 등장은 단지 성공한 스마트폰 출시가 아니었습니다. 사람들이 컴퓨팅을 만지고 생각하는 방식을 다시 바꿔 놓은 전환점이었습니다.
📚 IT 이야기안드로이드는 어떻게 모바일의 주류가 되었나
스마트폰 시장이 피처폰 시대에서 플랫폼 경쟁으로 넘어가던 순간, 안드로이드는 어떻게 가장 넓은 생태계를 만든 운영체제가 되었을까요.
다음 탐색