Skip to content

Commit

Permalink
chore: tweaked Google Map UI positions
Browse files Browse the repository at this point in the history 
Added correct positiong of the `GoogleMapSaveLocationButton` and `GoogleMapPlaceDetailsButton`.

Refactored AppTheme and AppTextStyles.
  • Loading branch information
@Gambley1
Gambley1 committed Aug 6, 2024
1 parent 6c2f9f4 commit 5a5ccbd
Show file tree
Hide file tree
Showing 9 changed files with 82 additions and 307 deletions.
25 changes: 8 additions & 17 deletions lib/src/app/view/app_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion lib/src/map/view/google_map_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class GoogleMapView extends StatelessWidget {
const MapView(),
const GoogleMapAddressView(),
GoogleMapPlaceDetailsButton(placeDetails: placeDetails),
const GoogleMapSaveLocationButton(),
GoogleMapSaveLocationButton(),
],
),
),
Expand Down
8 changes: 5 additions & 3 deletions lib/src/map/widgets/google_map_place_details_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<MapBloc, MapState>(
builder: (context, state) {
final isCameraMoving = state.isCameraMoving;
Expand Down Expand Up @@ -67,6 +68,7 @@ class GoogleMapPlaceDetailsButton extends StatelessWidget {
);
},
),
);
),
);
}
}
60 changes: 33 additions & 27 deletions lib/src/map/widgets/google_map_save_location_button.dart
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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<MapBloc, MapState>(
builder: (context, state) {
final isCamerMoving = state.isCameraMoving;
final isAddressFetchingFailure =
state.status.isAddressFetchingFailure;
left: fabRegularPadding,
bottom: fabRegularPadding,
right: (fabRegularPadding * 2) + fabRegularSize,
child: SafeArea(
child: BlocBuilder<MapBloc, MapState>(
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<MapBloc>()
.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<MapBloc>()
.add(const MapPositionSaveRequested());
context.goNamed(AppRoutes.restaurants.name);
},
shadows: const [BoxShadowEffect.defaultValue],
),
);
},
),
),
);
}
Expand Down
12 changes: 6 additions & 6 deletions lib/src/menu/widgets/menu_tab_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand Down
9 changes: 1 addition & 8 deletions lib/src/navigation/view/bottom_nav_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
9 changes: 5 additions & 4 deletions lib/src/profile/view/profile_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<AppBloc>().add(
AppUpdateAccountRequested(username: username),
);
if (user.name != username) {
context.read<AppBloc>().add(
AppUpdateAccountRequested(username: username),
);
}
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(
Expand Down
127 changes: 22 additions & 105 deletions packages/app_ui/lib/src/theme/app_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
),
);

Expand All @@ -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,
Expand All @@ -132,52 +78,23 @@ 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,
);
}

@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),
),
);
}
Expand Down
Loading

0 comments on commit 5a5ccbd

Please sign in to comment.