54 lines
2.6 KiB
Markdown
54 lines
2.6 KiB
Markdown
---
|
|
# Flutter UI 스타일링 초안 (Material 3 기반)
|
|
---
|
|
|
|
## 목적
|
|
- Flutter 앱에서 배지/다이얼로그/데이터테이블 등 핵심 UI 컴포넌트의 일관된 스타일 가이드를 수립한다.
|
|
- Flutter Material 3 디자인을 기본으로, 앱의 브랜드 톤에 맞게 경량 튜닝한다.
|
|
|
|
## 공통 디자인 원칙
|
|
- 그림자/여백: Card, Dialog, Menu에 적절한 elevation(1~4)과 8~16px 패딩 적용
|
|
- 컬러 시스템: Primary(Blue 600/700), Success(Green 600), Warning(Amber 600), Danger(Red 600)
|
|
- 라운딩: 기본 8px, Badge(12px), 버튼 Pill 옵션은 상황별 적용
|
|
- 접근성: 대비비(AA) 확보, 의미색 + 아이콘 병행
|
|
|
|
## 배지(Badge)
|
|
- 형태: Chip + 아이콘 + 텍스트
|
|
- 높이: 24~28
|
|
- 색상 매핑 예시
|
|
- 회원유형: {정회원=Blue 100, 준회원=Indigo 100, 게스트=Grey 200}
|
|
- 참가상태: {등록됨=Grey 200, 확인됨=Green 100, 취소됨=Red 100, 참석함=Blue 100}
|
|
- 결제상태: {미결제=Red 100, 결제완료=Green 100}
|
|
- 아이콘 매핑 예시
|
|
- 정회원=person, 준회원=person_outline, 게스트=person_add_alt
|
|
- 등록됨=how_to_reg, 확인됨=check_circle, 취소됨=cancel, 참석함=event_available
|
|
- 미결제=cancel, 결제완료=check_circle
|
|
|
|
## 다이얼로그(Dialog)
|
|
- AppBar 없는 AlertDialog/BottomSheet 권장
|
|
- 타이틀은 18~20, 본문은 14~16
|
|
- 버튼 영역 Right-aligned, 기본/파괴적 버튼 구분
|
|
- 하단 액션: TextButton(취소)/ElevatedButton(확인)
|
|
|
|
## 데이터 테이블(DataTable)
|
|
- 밀도(dense) 모드: 행 높이 44~48
|
|
- 정렬 화살표, 고정 폭 컬럼 최소화, 긴 텍스트 ellipsis + Tooltip
|
|
- 헤더 강조(반투명 배경), zebra striping(선택)
|
|
|
|
## 적용 우선순위
|
|
1) Badge 컴포넌트 공통화: `_buildBadge(text, color, icon)` 유지 + 색상/아이콘 매핑 상수화
|
|
2) Dialog 일관화: 확인/취소 액션 정렬, 파괴적 액션 색상 구분
|
|
3) 리스트 아이템 overflow 방지: `Row` → `Wrap/Flexible` 전환 규칙 정립
|
|
4) 표형 데이터: `PaginatedDataTable`/`DataTable2` 검토 및 공통 위젯 래퍼 도입
|
|
|
|
## 구현 체크리스트
|
|
- [ ] `_buildBadge` 색상/아이콘 매핑 상수 분리(`lib/theme/badges.dart`)
|
|
- [ ] 다이얼로그 액션 빌더 유틸(`lib/widgets/dialog_actions.dart`)
|
|
- [ ] 리스트 아이템 텍스트/뱃지 Wrap 적용 가이드(`docs/guides/list_wrap_rules.md`)
|
|
- [ ] 데이터 테이블 공용 래퍼(`lib/widgets/data_table_wrappers.dart`)
|
|
- [ ] 샘플 스크린/스토리북(`lib/screens/dev/ui_preview_screen.dart`)
|
|
|
|
## 참고
|
|
- Material 3 디자인 가이드
|
|
- (선택) 타 UI 라이브러리에서 유용한 패턴이 있을 경우 제한적으로 참고
|