From ee12843d65f531b83bfcd073176c1ed07e9d853d Mon Sep 17 00:00:00 2001 From: krille-chan Date: Sun, 23 Jul 2023 06:45:13 +0200 Subject: [PATCH] design: Style bottom navigation bar in backgroundcolor --- lib/config/themes.dart | 127 +++++++++++++----------- lib/pages/chat_list/chat_list_view.dart | 5 + 2 files changed, 72 insertions(+), 60 deletions(-) diff --git a/lib/config/themes.dart b/lib/config/themes.dart index 956f4415..f129959f 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -60,71 +60,78 @@ abstract class FluffyThemes { static const Duration animationDuration = Duration(milliseconds: 250); static const Curve animationCurve = Curves.easeInOut; - static ThemeData buildTheme(Brightness brightness, [Color? seed]) => - ThemeData( - visualDensity: VisualDensity.standard, - useMaterial3: true, - brightness: brightness, - colorSchemeSeed: seed ?? AppConfig.colorSchemeSeed, - textTheme: PlatformInfos.isDesktop || PlatformInfos.isWeb - ? brightness == Brightness.light - ? Typography.material2018().black.merge(fallbackTextTheme) - : Typography.material2018().white.merge(fallbackTextTheme) - : null, - snackBarTheme: const SnackBarThemeData( - behavior: SnackBarBehavior.floating, + static ThemeData buildTheme(Brightness brightness, [Color? seed]) { + final colorScheme = ColorScheme.fromSeed( + brightness: brightness, + seedColor: seed ?? AppConfig.colorSchemeSeed ?? AppConfig.primaryColor, + ); + return ThemeData( + visualDensity: VisualDensity.standard, + useMaterial3: true, + brightness: brightness, + colorScheme: colorScheme, + textTheme: PlatformInfos.isDesktop || PlatformInfos.isWeb + ? brightness == Brightness.light + ? Typography.material2018().black.merge(fallbackTextTheme) + : Typography.material2018().white.merge(fallbackTextTheme) + : null, + snackBarTheme: const SnackBarThemeData( + behavior: SnackBarBehavior.floating, + ), + dividerColor: brightness == Brightness.light + ? Colors.blueGrey.shade50 + : Colors.blueGrey.shade900, + popupMenuTheme: PopupMenuThemeData( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius), ), - dividerColor: brightness == Brightness.light - ? Colors.blueGrey.shade50 - : Colors.blueGrey.shade900, - popupMenuTheme: PopupMenuThemeData( + ), + inputDecorationTheme: InputDecorationTheme( + border: UnderlineInputBorder( + borderSide: BorderSide.none, + borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), + ), + filled: true, + ), + appBarTheme: AppBarTheme( + systemOverlayStyle: SystemUiOverlayStyle( + statusBarColor: Colors.transparent, + statusBarIconBrightness: brightness.reversed, + statusBarBrightness: brightness, + systemNavigationBarIconBrightness: brightness.reversed, + systemNavigationBarColor: colorScheme.background, + ), + ), + textButtonTheme: TextButtonThemeData( + style: TextButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), + ), + ), + ), + outlinedButtonTheme: OutlinedButtonThemeData( + style: OutlinedButton.styleFrom( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), + ), + ), + ), + dialogTheme: DialogTheme( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), + ), + ), + elevatedButtonTheme: ElevatedButtonThemeData( + style: ElevatedButton.styleFrom( + padding: const EdgeInsets.all(16), + textStyle: const TextStyle(fontSize: 16), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(AppConfig.borderRadius), ), ), - inputDecorationTheme: InputDecorationTheme( - border: UnderlineInputBorder( - borderSide: BorderSide.none, - borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), - ), - filled: true, - ), - appBarTheme: AppBarTheme( - systemOverlayStyle: SystemUiOverlayStyle( - statusBarColor: Colors.transparent, - statusBarIconBrightness: brightness.reversed, - statusBarBrightness: brightness, - ), - ), - textButtonTheme: TextButtonThemeData( - style: TextButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), - ), - ), - ), - outlinedButtonTheme: OutlinedButtonThemeData( - style: OutlinedButton.styleFrom( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), - ), - ), - ), - dialogTheme: DialogTheme( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), - ), - ), - elevatedButtonTheme: ElevatedButtonThemeData( - style: ElevatedButton.styleFrom( - padding: const EdgeInsets.all(16), - textStyle: const TextStyle(fontSize: 16), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - ), - ), - ), - ); + ), + ); + } } extension on Brightness { diff --git a/lib/pages/chat_list/chat_list_view.dart b/lib/pages/chat_list/chat_list_view.dart index bf506e66..741ab657 100644 --- a/lib/pages/chat_list/chat_list_view.dart +++ b/lib/pages/chat_list/chat_list_view.dart @@ -176,7 +176,12 @@ class ChatListView extends StatelessWidget { body: ChatListViewBody(controller), bottomNavigationBar: controller.displayNavigationBar ? NavigationBar( + elevation: 4, height: 64, + shadowColor: + Theme.of(context).colorScheme.onBackground, + surfaceTintColor: + Theme.of(context).colorScheme.background, selectedIndex: controller.selectedIndex, onDestinationSelected: controller.onDestinationSelected,