From 5a5ccbde4407965cb26dc38bf8c0d0cc43edfc9d Mon Sep 17 00:00:00 2001 From: Emil Date: Tue, 6 Aug 2024 22:17:13 +0500 Subject: [PATCH] chore: tweaked Google Map UI positions Added correct positiong of the `GoogleMapSaveLocationButton` and `GoogleMapPlaceDetailsButton`. Refactored AppTheme and AppTextStyles. --- lib/src/app/view/app_view.dart | 25 +--- lib/src/map/view/google_map_page.dart | 2 +- .../google_map_place_details_button.dart | 8 +- .../google_map_save_location_button.dart | 60 ++++---- lib/src/menu/widgets/menu_tab_bar.dart | 12 +- lib/src/navigation/view/bottom_nav_bar.dart | 9 +- lib/src/profile/view/profile_view.dart | 9 +- packages/app_ui/lib/src/theme/app_theme.dart | 127 +++------------- .../lib/src/typography/app_text_styles.dart | 137 +----------------- 9 files changed, 82 insertions(+), 307 deletions(-) diff --git a/lib/src/app/view/app_view.dart b/lib/src/app/view/app_view.dart index c289d20..611cf3f 100644 --- a/lib/src/app/view/app_view.dart +++ b/lib/src/app/view/app_view.dart @@ -15,23 +15,8 @@ class AppView extends StatelessWidget { title: 'Yandex Eats', debugShowCheckedModeBanner: false, themeMode: ThemeMode.light, - theme: ShadThemeData( - brightness: Brightness.light, - colorScheme: - const ShadBlueColorScheme.light(primary: AppColors.deepBlue), - textTheme: const AppTheme().shadTextTheme, - inputTheme: ShadInputTheme( - placeholderStyle: context.bodyMedium?.copyWith(color: AppColors.grey), - ), - ), - darkTheme: ShadThemeData( - brightness: Brightness.dark, - colorScheme: const ShadBlueColorScheme.dark(), - textTheme: const AppDarkTheme().shadTextTheme, - inputTheme: ShadInputTheme( - placeholderStyle: context.bodyMedium?.copyWith(color: AppColors.grey), - ), - ), + theme: const AppTheme().theme, + darkTheme: const AppDarkTheme().theme, materialThemeBuilder: (context, theme) { return theme.copyWith( appBarTheme: const AppBarTheme( @@ -40,6 +25,12 @@ class AppView extends StatelessWidget { textTheme: theme.brightness == Brightness.light ? const AppTheme().textTheme : const AppDarkTheme().textTheme, + snackBarTheme: const SnackBarThemeData( + behavior: SnackBarBehavior.floating, + ), + bottomNavigationBarTheme: const BottomNavigationBarThemeData( + type: BottomNavigationBarType.fixed, + ), ); }, routerConfig: router, diff --git a/lib/src/map/view/google_map_page.dart b/lib/src/map/view/google_map_page.dart index ff62554..edacb2f 100644 --- a/lib/src/map/view/google_map_page.dart +++ b/lib/src/map/view/google_map_page.dart @@ -51,7 +51,7 @@ class GoogleMapView extends StatelessWidget { const MapView(), const GoogleMapAddressView(), GoogleMapPlaceDetailsButton(placeDetails: placeDetails), - const GoogleMapSaveLocationButton(), + GoogleMapSaveLocationButton(), ], ), ), diff --git a/lib/src/map/widgets/google_map_place_details_button.dart b/lib/src/map/widgets/google_map_place_details_button.dart index 3f60729..4372053 100644 --- a/lib/src/map/widgets/google_map_place_details_button.dart +++ b/lib/src/map/widgets/google_map_place_details_button.dart @@ -14,8 +14,9 @@ class GoogleMapPlaceDetailsButton extends StatelessWidget { @override Widget build(BuildContext context) { return Positioned( - left: AppSpacing.md, - top: AppSpacing.xxlg + AppSpacing.lg, + left: 20, + top: 20, + child: SafeArea( child: BlocBuilder( builder: (context, state) { final isCameraMoving = state.isCameraMoving; @@ -67,6 +68,7 @@ class GoogleMapPlaceDetailsButton extends StatelessWidget { ); }, ), - ); + ), + ); } } diff --git a/lib/src/map/widgets/google_map_save_location_button.dart b/lib/src/map/widgets/google_map_save_location_button.dart index 890ae4d..38001ef 100644 --- a/lib/src/map/widgets/google_map_save_location_button.dart +++ b/lib/src/map/widgets/google_map_save_location_button.dart @@ -1,4 +1,3 @@ -import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:go_router/go_router.dart'; @@ -26,34 +25,41 @@ class GoogleMapSaveLocationButton extends StatelessWidget { @override Widget build(BuildContext context) { + const fabRegularSize = 56.0; + // multiply by 2 because of the left and right padding + const fabRegularPadding = 20.0; + return Positioned( - left: 40, - right: 80, - bottom: AppSpacing.xxlg + AppSpacing.md, - child: BlocBuilder( - builder: (context, state) { - final isCamerMoving = state.isCameraMoving; - final isAddressFetchingFailure = - state.status.isAddressFetchingFailure; + left: fabRegularPadding, + bottom: fabRegularPadding, + right: (fabRegularPadding * 2) + fabRegularSize, + child: SafeArea( + child: BlocBuilder( + builder: (context, state) { + final isCamerMoving = state.isCameraMoving; + final isAddressFetchingFailure = + state.status.isAddressFetchingFailure; - return AnimatedOpacity( - opacity: isCamerMoving ? 0 : 1, - duration: const Duration(milliseconds: 150), - child: ShadButton( - text: Text(isAddressFetchingFailure ? 'Clarify address' : 'Save'), - width: double.infinity, - onPressed: isAddressFetchingFailure - ? () async => _goToSearchLocationPage(context) - : () { - context - .read() - .add(const MapPositionSaveRequested()); - context.goNamed(AppRoutes.restaurants.name); - }, - shadows: const [BoxShadowEffect.defaultValue], - ), - ); - }, + return AnimatedOpacity( + opacity: isCamerMoving ? 0 : 1, + duration: const Duration(milliseconds: 150), + child: ShadButton( + text: + Text(isAddressFetchingFailure ? 'Clarify address' : 'Save'), + width: double.infinity, + onPressed: isAddressFetchingFailure + ? () async => _goToSearchLocationPage(context) + : () { + context + .read() + .add(const MapPositionSaveRequested()); + context.goNamed(AppRoutes.restaurants.name); + }, + shadows: const [BoxShadowEffect.defaultValue], + ), + ); + }, + ), ), ); } diff --git a/lib/src/menu/widgets/menu_tab_bar.dart b/lib/src/menu/widgets/menu_tab_bar.dart index b0a3aa8..7a4b184 100644 --- a/lib/src/menu/widgets/menu_tab_bar.dart +++ b/lib/src/menu/widgets/menu_tab_bar.dart @@ -67,14 +67,14 @@ class _MenuTabBarDelegate extends SliverPersistentHeaderDelegate { builder: (context, isScrolled, _) { return DecoratedBox( decoration: BoxDecoration( - color: context.customReversedAdaptiveColor( - dark: context.theme.canvasColor, - light: AppColors.brightGrey, - ), + color: context.theme.canvasColor, boxShadow: [ if (isScrolled) - const BoxShadow( - color: AppColors.emphasizeDarkGrey, + BoxShadow( + color: context.customReversedAdaptiveColor( + light: AppColors.brightGrey, + dark: AppColors.emphasizeDarkGrey, + ), spreadRadius: 2, blurRadius: 2, ), diff --git a/lib/src/navigation/view/bottom_nav_bar.dart b/lib/src/navigation/view/bottom_nav_bar.dart index 0cce1d9..ba1b43b 100644 --- a/lib/src/navigation/view/bottom_nav_bar.dart +++ b/lib/src/navigation/view/bottom_nav_bar.dart @@ -19,14 +19,7 @@ class BottomNavBar extends StatelessWidget { iconSize: AppSize.xlg, currentIndex: navigationShell.currentIndex, type: BottomNavigationBarType.fixed, - unselectedItemColor: context.customReversedAdaptiveColor( - light: context.theme.unselectedWidgetColor, - dark: AppColors.grey, - ), - selectedItemColor: context.customReversedAdaptiveColor( - light: context.theme.colorScheme.primary, - dark: AppColors.white, - ), + selectedItemColor: context.theme.colorScheme.primary, onTap: (index) { if (index != 1) { navigationShell.goBranch( diff --git a/lib/src/profile/view/profile_view.dart b/lib/src/profile/view/profile_view.dart index 7ed2dec..88f5ab4 100644 --- a/lib/src/profile/view/profile_view.dart +++ b/lib/src/profile/view/profile_view.dart @@ -29,10 +29,11 @@ class ProfileView extends StatelessWidget { if (!(formKey.currentState?.validate() ?? false)) return; final username = formKey.currentState?.value['username'] as String?; - if (user.name == username) return; - context.read().add( - AppUpdateAccountRequested(username: username), - ); + if (user.name != username) { + context.read().add( + AppUpdateAccountRequested(username: username), + ); + } ScaffoldMessenger.of(context) ..hideCurrentSnackBar() ..showSnackBar( diff --git a/packages/app_ui/lib/src/theme/app_theme.dart b/packages/app_ui/lib/src/theme/app_theme.dart index 20a55cd..4d9c85a 100644 --- a/packages/app_ui/lib/src/theme/app_theme.dart +++ b/packages/app_ui/lib/src/theme/app_theme.dart @@ -13,41 +13,17 @@ class AppTheme { /// Defines the brightness of theme. Brightness get brightness => Brightness.light; - /// Defines the background color of theme. - Color get backgroundColor => AppColors.white; - /// Defines the primary color of theme. - Color get primary => AppColors.black; + Color get primary => AppColors.deepBlue; /// Defines light [ThemeData]. - ThemeData get theme => FlexThemeData.light( - scheme: FlexScheme.custom, - colors: FlexSchemeColor.from( - brightness: brightness, - primary: primary, - swapOnMaterial3: true, - ), - useMaterial3: true, - useMaterial3ErrorColors: true, - ).copyWith( - textTheme: const AppTheme().textTheme, - iconTheme: const IconThemeData(color: AppColors.black), - inputDecorationTheme: const InputDecorationTheme( - contentPadding: EdgeInsets.symmetric(horizontal: AppSpacing.md), - border: OutlineInputBorder(borderSide: BorderSide.none), - ), - appBarTheme: const AppBarTheme( - elevation: 0, - surfaceTintColor: AppColors.white, - backgroundColor: AppColors.white, - ), - bottomNavigationBarTheme: const BottomNavigationBarThemeData( - type: BottomNavigationBarType.fixed, - ), - bottomSheetTheme: const BottomSheetThemeData( - showDragHandle: true, - surfaceTintColor: AppColors.white, - backgroundColor: AppColors.white, + ShadThemeData get theme => ShadThemeData( + brightness: Brightness.light, + colorScheme: ShadBlueColorScheme.light(primary: primary), + textTheme: shadTextTheme, + inputTheme: ShadInputTheme( + placeholderStyle: + textTheme.bodyMedium?.copyWith(color: AppColors.grey), ), ); @@ -66,48 +42,18 @@ class AppTheme { muted: textTheme.bodyMedium, ); - /// Defines iOS dart SystemUiOverlayStyle. - static const SystemUiOverlayStyle iOSDarkSystemBarTheme = - SystemUiOverlayStyle( - statusBarBrightness: Brightness.light, - statusBarColor: AppColors.transparent, - statusBarIconBrightness: Brightness.light, - systemNavigationBarIconBrightness: Brightness.light, - ); - /// Text theme of the App theme. - TextTheme get textTheme => contentTextTheme; + TextTheme get textTheme => uiTextTheme; - /// The Content text theme based on [ContentTextStyle]. - static final contentTextTheme = TextTheme( - displayLarge: ContentTextStyle.headline1, - displayMedium: ContentTextStyle.headline2, - displaySmall: ContentTextStyle.headline3, - headlineLarge: ContentTextStyle.headline4, - headlineMedium: ContentTextStyle.headline5, - headlineSmall: ContentTextStyle.headline6, - titleLarge: ContentTextStyle.headline7, - titleMedium: ContentTextStyle.subtitle1, - titleSmall: ContentTextStyle.subtitle2, - bodyLarge: ContentTextStyle.bodyText1, - bodyMedium: ContentTextStyle.bodyText2, - labelLarge: ContentTextStyle.button, - bodySmall: ContentTextStyle.caption, - labelSmall: ContentTextStyle.overline, - ).apply( - bodyColor: AppColors.black, - displayColor: AppColors.black, - decorationColor: AppColors.black, - ); - - /// The UI text theme based on [UITextStyle]. + /// The Content text theme based on [UITextStyle]. static final uiTextTheme = TextTheme( displayLarge: UITextStyle.headline1, displayMedium: UITextStyle.headline2, displaySmall: UITextStyle.headline3, - headlineMedium: UITextStyle.headline4, - headlineSmall: UITextStyle.headline5, - titleLarge: UITextStyle.headline6, + headlineLarge: UITextStyle.headline4, + headlineMedium: UITextStyle.headline5, + headlineSmall: UITextStyle.headline6, + titleLarge: UITextStyle.headline7, titleMedium: UITextStyle.subtitle1, titleSmall: UITextStyle.subtitle2, bodyLarge: UITextStyle.bodyText1, @@ -132,15 +78,9 @@ class AppDarkTheme extends AppTheme { @override Brightness get brightness => Brightness.dark; - @override - Color get backgroundColor => AppColors.black; - - @override - Color get primary => AppColors.white; - @override TextTheme get textTheme { - return AppTheme.contentTextTheme.apply( + return AppTheme.uiTextTheme.apply( bodyColor: AppColors.white, displayColor: AppColors.white, decorationColor: AppColors.white, @@ -148,36 +88,13 @@ class AppDarkTheme extends AppTheme { } @override - ThemeData get theme => FlexThemeData.dark( - scheme: FlexScheme.custom, - darkIsTrueBlack: true, - colors: FlexSchemeColor.from( - brightness: brightness, - primary: primary, - appBarColor: AppColors.transparent, - swapOnMaterial3: true, - ), - useMaterial3: true, - useMaterial3ErrorColors: true, - ).copyWith( - textTheme: const AppDarkTheme().textTheme, - iconTheme: const IconThemeData(color: AppColors.white), - inputDecorationTheme: const InputDecorationTheme( - contentPadding: EdgeInsets.symmetric(horizontal: AppSpacing.md), - border: OutlineInputBorder(borderSide: BorderSide.none), - ), - appBarTheme: const AppBarTheme( - elevation: 0, - backgroundColor: AppColors.black, - surfaceTintColor: AppColors.black, - ), - bottomNavigationBarTheme: const BottomNavigationBarThemeData( - type: BottomNavigationBarType.fixed, - ), - bottomSheetTheme: const BottomSheetThemeData( - surfaceTintColor: AppColors.background, - backgroundColor: AppColors.background, - modalBackgroundColor: AppColors.background, + ShadThemeData get theme => ShadThemeData( + brightness: brightness, + colorScheme: ShadBlueColorScheme.dark(primary: primary), + textTheme: shadTextTheme, + inputTheme: ShadInputTheme( + placeholderStyle: + textTheme.bodyMedium?.copyWith(color: AppColors.grey), ), ); } diff --git a/packages/app_ui/lib/src/typography/app_text_styles.dart b/packages/app_ui/lib/src/typography/app_text_styles.dart index 274fcc1..c88678b 100644 --- a/packages/app_ui/lib/src/typography/app_text_styles.dart +++ b/packages/app_ui/lib/src/typography/app_text_styles.dart @@ -1,143 +1,8 @@ import 'package:app_ui/app_ui.dart'; import 'package:flutter/material.dart'; -/// The app consists of two main text style definitions: UI and Content. -/// -/// Content text style is primarily used for all content-based components, -/// e.g. news feed including articles and sections, while the UI text style -/// is used for the rest of UI components. -/// -/// The default app's [TextTheme] is [AppTheme.uiTextTheme]. -/// -/// Use `ContentThemeOverrideBuilder` to override the default [TextTheme] -/// to [AppTheme.contentTextTheme]. - -/// UI Text Style Definitions -abstract class UITextStyle { - static const _baseTextStyle = TextStyle( - package: 'app_ui', - fontWeight: AppFontWeight.medium, - fontFamily: 'Inter', - decoration: TextDecoration.none, - textBaseline: TextBaseline.alphabetic, - ); - - /// Display 2 Text Style - static final TextStyle display2 = _baseTextStyle.copyWith( - fontSize: 57, - fontWeight: AppFontWeight.bold, - height: 1.12, - letterSpacing: -0.25, - ); - - /// Display 3 Text Style - static final TextStyle display3 = _baseTextStyle.copyWith( - fontSize: 45, - fontWeight: AppFontWeight.bold, - height: 1.15, - ); - - /// Headline 1 Text Style - static final TextStyle headline1 = _baseTextStyle.copyWith( - fontSize: 36, - fontWeight: AppFontWeight.bold, - height: 1.22, - ); - - /// Headline 2 Text Style - static final TextStyle headline2 = _baseTextStyle.copyWith( - fontSize: 32, - fontWeight: AppFontWeight.bold, - height: 1.25, - ); - - /// Headline 3 Text Style - static final TextStyle headline3 = _baseTextStyle.copyWith( - fontSize: 28, - fontWeight: AppFontWeight.semiBold, - height: 1.28, - ); - - /// Headline 4 Text Style - static final TextStyle headline4 = _baseTextStyle.copyWith( - fontSize: 24, - fontWeight: AppFontWeight.semiBold, - height: 1.33, - ); - - /// Headline 5 Text Style - static final TextStyle headline5 = _baseTextStyle.copyWith( - fontSize: 22, - fontWeight: AppFontWeight.regular, - height: 1.27, - ); - - /// Headline 6 Text Style - static final TextStyle headline6 = _baseTextStyle.copyWith( - fontSize: 22, - fontWeight: AppFontWeight.semiBold, - height: 1.33, - ); - - /// Subtitle 1 Text Style - static final TextStyle subtitle1 = _baseTextStyle.copyWith( - fontSize: 16, - height: 1.5, - letterSpacing: 0.1, - ); - - /// Subtitle 2 Text Style - static final TextStyle subtitle2 = _baseTextStyle.copyWith( - fontSize: 14, - height: 1.42, - letterSpacing: 0.1, - ); - - /// Body Text 1 Text Style - static final TextStyle bodyText1 = _baseTextStyle.copyWith( - fontSize: 16, - height: 1.5, - letterSpacing: 0.5, - ); - - /// Body Text 2 Text Style (the default) - static final TextStyle bodyText2 = _baseTextStyle.copyWith( - fontSize: 14, - height: 1.42, - letterSpacing: 0.25, - ); - - /// Caption Text Style - static final TextStyle caption = _baseTextStyle.copyWith( - fontSize: 12, - height: 1.33, - letterSpacing: 0.4, - ); - - /// Button Text Style - static final TextStyle button = _baseTextStyle.copyWith( - fontSize: 16, - height: 1.42, - letterSpacing: 0.1, - ); - - /// Overline Text Style - static final TextStyle overline = _baseTextStyle.copyWith( - fontSize: 12, - height: 1.33, - letterSpacing: 0.5, - ); - - /// Label Small Text Style - static final TextStyle labelSmall = _baseTextStyle.copyWith( - fontSize: 11, - height: 1.45, - letterSpacing: 0.5, - ); -} - /// Content Text Style Definitions -abstract class ContentTextStyle { +abstract class UITextStyle { static const _baseTextStyle = TextStyle( package: 'app_ui', fontWeight: AppFontWeight.medium,