하단 탭 바를 Figma Bottom Navigation 스타일로
This commit is contained in:
@@ -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';
|
||||||
|
|||||||
@@ -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,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user