하단 탭 바를 Figma Bottom Navigation 스타일로

This commit is contained in:
Sn-Kinos
2026-09-02 19:31:41 +09:00
parent 9358fd42f9
commit 45454092f7
2 changed files with 23 additions and 11 deletions
+4 -4
View File
@@ -29,11 +29,11 @@ class AppTab {
/// 라벨 문자열과 순서는 스모크 테스트가 정확 일치로 검증한다. /// 라벨 문자열과 순서는 스모크 테스트가 정확 일치로 검증한다.
/// 아이콘은 아직 확정 자산이 없어 Material 기본 아이콘을 쓴다(README 「미투입 항목」). /// 아이콘은 아직 확정 자산이 없어 Material 기본 아이콘을 쓴다(README 「미투입 항목」).
const List<AppTab> appTabs = [ const List<AppTab> appTabs = [
AppTab(label: 'HOME', path: '/home', icon: Icons.checklist_rtl), AppTab(label: 'HOME', path: '/home', icon: Icons.home_outlined),
AppTab(label: 'INSIDE', path: '/inside', icon: Icons.forum_outlined), AppTab(label: 'INSIDE', path: '/inside', icon: Icons.chat_bubble_outline),
AppTab(label: 'GALAXY', path: '/galaxy', icon: Icons.public), AppTab(label: 'GALAXY', path: '/galaxy', icon: Icons.auto_awesome_outlined),
AppTab(label: 'STATION', path: '/station', icon: Icons.storefront_outlined), AppTab(label: 'STATION', path: '/station', icon: Icons.storefront_outlined),
AppTab(label: 'MY', path: '/my', icon: Icons.person_outline), AppTab(label: 'MY', path: '/my', icon: Icons.account_circle_outlined),
]; ];
const String loginPath = '/login'; const String loginPath = '/login';
+19 -7
View File
@@ -50,18 +50,30 @@ ThemeData buildAppTheme() {
surfaceTintColor: Colors.transparent, surfaceTintColor: Colors.transparent,
centerTitle: true, centerTitle: true,
), ),
// 시안 Bottom Navigation(350:215853) — 바탕 #141414, 알약 표시자 없음, 아이콘 24,
// 라벨 ABeeZee 10. 활성은 흰색, 비활성은 #777777.
navigationBarTheme: NavigationBarThemeData( navigationBarTheme: NavigationBarThemeData(
backgroundColor: AppColors.cosmicSurface, backgroundColor: AppColors.cosmicVoid,
surfaceTintColor: Colors.transparent, surfaceTintColor: Colors.transparent,
indicatorColor: AppColors.cosmicSurfaceRaised, indicatorColor: Colors.transparent,
// 탭 항목 높이는 touch-min-app(48) 아래로 내리지 않는다. // 탭 항목 높이는 touch-min-app(48) 아래로 내리지 않는다.
height: AppSizing.touchMinApp + AppSpace.s5, height: AppSizing.touchMinApp + AppSpace.s5,
iconTheme: WidgetStateProperty.resolveWith(
(states) => IconThemeData(
size: 24,
color: states.contains(WidgetState.selected)
? AppColors.onCosmic
: AppColors.onCosmicMuted,
),
),
labelTextStyle: WidgetStateProperty.resolveWith( labelTextStyle: WidgetStateProperty.resolveWith(
(states) => _style( (states) => TextStyle(
AppType.caption, fontFamily: AppFonts.display,
states.contains(WidgetState.selected) fontSize: 10,
? AppColors.cosmicAccent letterSpacing: 0.2,
: AppColors.onCosmicVariant, color: states.contains(WidgetState.selected)
? AppColors.onCosmic
: AppColors.onCosmicMuted,
), ),
), ),
), ),