From f8d70e7ce6c4e6eb06bf3c4a3ef33fda01a525f9 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Wed, 15 Feb 2023 16:07:46 +0200 Subject: [PATCH] Fix UI issues, paddings and alignments --- .../dashboard/desktop_dashboard_page.dart | 54 +++++++------------ .../desktop_sidebar_wrapper.dart | 11 ++-- .../dashboard/widgets/balance_page.dart | 6 +-- lib/src/widgets/nav_bar.dart | 27 ++++++---- 4 files changed, 44 insertions(+), 54 deletions(-) diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index eb307e9ac..5b957ba19 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -1,23 +1,19 @@ import 'dart:async'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/yat_emoji_id.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; -import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; -import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart'; import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart'; import 'package:mobx/mobx.dart'; import 'package:cake_wallet/main.dart'; import 'package:cake_wallet/router.dart' as Router; -class DesktopDashboardPage extends BasePage { +class DesktopDashboardPage extends StatelessWidget { DesktopDashboardPage({ required this.balancePage, required this.walletViewModel, @@ -25,32 +21,18 @@ class DesktopDashboardPage extends BasePage { required this.desktopSidebarViewModel, }); - static final GlobalKey desktopKey = GlobalKey(); - - @override - Color get backgroundLightColor => - currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; - - @override - Color get backgroundDarkColor => Colors.transparent; - - - @override - bool get resizeToAvoidBottomInset => false; - - - - final BalancePage balancePage; final DashboardViewModel walletViewModel; final WalletAddressListViewModel addressListViewModel; final DesktopSidebarViewModel desktopSidebarViewModel; + static final GlobalKey desktopKey = GlobalKey(); + bool _isEffectsInstalled = false; StreamSubscription? _onInactiveSub; @override - Widget body(BuildContext context) { + Widget build(BuildContext context) { _setEffects(context); return Row( @@ -60,19 +42,18 @@ class DesktopDashboardPage extends BasePage { width: 400, child: balancePage, ), - Expanded( - flex: 4, - child: Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 500), - child: Navigator( - key: desktopKey, - initialRoute: Routes.desktop_actions, - onGenerateRoute: (settings) => Router.createRoute(settings), - onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { - return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; - }, - ), + Flexible( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 500), + child: Navigator( + key: desktopKey, + initialRoute: Routes.desktop_actions, + onGenerateRoute: (settings) => Router.createRoute(settings), + onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { + return [ + navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))! + ]; + }, ), ), ), @@ -128,3 +109,4 @@ class DesktopDashboardPage extends BasePage { }); } } + diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart index 02b8ef62b..ec6ff1a32 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart @@ -2,7 +2,6 @@ import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; @@ -31,12 +30,16 @@ class DesktopSidebarWrapper extends BasePage { currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @override - Color get backgroundDarkColor => Colors.transparent; + Color get backgroundDarkColor => Colors.black.withOpacity(0.1); + + @override + bool get resizeToAvoidBottomInset => false; final pageController = PageController(); final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png'; final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png'; + double get sideMenuWidth => 76.0; @override @@ -75,7 +78,7 @@ class DesktopSidebarWrapper extends BasePage { onTap: () { String? currentPath; - desktopKey.currentState?.popUntil((route) { + DesktopDashboardPage.desktopKey.currentState?.popUntil((route) { currentPath = route.settings.name; return true; }); @@ -88,7 +91,7 @@ class DesktopSidebarWrapper extends BasePage { desktopSidebarViewModel.resetSidebar(); Future.delayed(Duration(milliseconds: 10), () { desktopSidebarViewModel.onPageChange(SidebarItem.transactions); - desktopKey.currentState?.pushNamed(Routes.transactionsPage); + DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage); }); } }, diff --git a/lib/src/screens/dashboard/widgets/balance_page.dart b/lib/src/screens/dashboard/widgets/balance_page.dart index fe750538b..bf8b1ae17 100644 --- a/lib/src/screens/dashboard/widgets/balance_page.dart +++ b/lib/src/screens/dashboard/widgets/balance_page.dart @@ -1,10 +1,8 @@ -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/src/widgets/standard_list.dart'; import 'package:cake_wallet/store/settings_store.dart'; import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; -import 'package:flutter/scheduler.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:cake_wallet/src/widgets/introducing_card.dart'; @@ -26,7 +24,7 @@ class BalancePage extends StatelessWidget{ child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(height: 56), + SizedBox(height: ResponsiveLayoutUtil.instance.isMobile(context) ? 56 : 16), Container( margin: const EdgeInsets.only(left: 24, bottom: 16), child: Observer(builder: (_) { diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 517d0540f..230e0caad 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -52,21 +52,28 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { @override Widget build(BuildContext context) { + if (leading == null && middle == null && trailing == null) { + return const SizedBox(); + } + final pad = height - _originalHeight; final paddingTop = pad / 2; final _paddingBottom = (pad / 2); if (!ResponsiveLayoutUtil.instance.isMobile(context)) { - return Padding( - padding: const EdgeInsetsDirectional.only(end: 24, top: 8, bottom: 8), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - if (leading != null) Flexible(child: leading!) else const SizedBox(), - if (middle != null) middle!, - trailing ?? const SizedBox(), - ], + return Container( + padding: const EdgeInsetsDirectional.only(end: 24), + color: backgroundColor, + child: Center( + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + if (leading != null) Flexible(child: leading!) else const SizedBox(), + if (middle != null) middle!, + trailing ?? const SizedBox(), + ], + ), ), ); }