From d5e9982e9122e9b003dc3d3a3cf7782e374f03ab Mon Sep 17 00:00:00 2001 From: Godwin Asuquo Date: Thu, 23 Feb 2023 16:03:20 +0200 Subject: [PATCH] override navbar with desktopnavbar --- lib/src/screens/base_page.dart | 10 +- .../desktop_sidebar_wrapper.dart | 95 ++++++++----------- lib/src/widgets/desktop_nav_bar.dart | 44 +++++++++ lib/src/widgets/nav_bar.dart | 22 ----- 4 files changed, 87 insertions(+), 84 deletions(-) create mode 100644 lib/src/widgets/desktop_nav_bar.dart diff --git a/lib/src/screens/base_page.dart b/lib/src/screens/base_page.dart index 7da4279e0..a82314b48 100644 --- a/lib/src/screens/base_page.dart +++ b/lib/src/screens/base_page.dart @@ -35,7 +35,7 @@ abstract class BasePage extends StatelessWidget { Widget? get endDrawer => null; - bool get canUseDesktopAppBar => false; + PreferredSizeWidget? desktopAppBar(BuildContext context) => null; AppBarStyle get appBarStyle => AppBarStyle.regular; @@ -99,8 +99,7 @@ abstract class BasePage extends StatelessWidget { ObstructingPreferredSizeWidget appBar(BuildContext context) { final appBarColor = currentTheme.type == ThemeType.dark ? backgroundDarkColor : backgroundLightColor; - final useDesktopAppbar = !ResponsiveLayoutUtil.instance.isMobile(context) && canUseDesktopAppBar; - + switch (appBarStyle) { case AppBarStyle.regular: // FIX-ME: NavBar no context @@ -109,7 +108,6 @@ abstract class BasePage extends StatelessWidget { leading: leading(context), middle: middle(context), trailing: trailing(context), - useDesktopAppbar: useDesktopAppbar, backgroundColor: appBarColor); case AppBarStyle.withShadow: @@ -119,7 +117,6 @@ abstract class BasePage extends StatelessWidget { leading: leading(context), middle: middle(context), trailing: trailing(context), - useDesktopAppbar: useDesktopAppbar, backgroundColor: appBarColor); case AppBarStyle.transparent: @@ -137,7 +134,6 @@ abstract class BasePage extends StatelessWidget { // context: context, leading: leading(context), middle: middle(context), - useDesktopAppbar: useDesktopAppbar, trailing: trailing(context), backgroundColor: appBarColor); } @@ -156,7 +152,7 @@ abstract class BasePage extends StatelessWidget { resizeToAvoidBottomInset: resizeToAvoidBottomInset, extendBodyBehindAppBar: extendBodyBehindAppBar, endDrawer: endDrawer, - appBar: appBar(context), + appBar: desktopAppBar(context) ?? appBar(context), body: body(context), floatingActionButton: floatingActionButton(context)); 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 5d60ab47a..08192fa04 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart @@ -6,7 +6,7 @@ import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sideba 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'; import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator.dart'; -import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/src/widgets/desktop_nav_bar.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart'; import 'package:flutter/material.dart'; @@ -26,14 +26,47 @@ class DesktopSidebarWrapper extends BasePage { }); @override - bool get canUseDesktopAppBar => true; + PreferredSizeWidget desktopAppBar(BuildContext context) => DesktopNavbar( + leading: Padding( + padding: EdgeInsets.only(left: sideMenuWidth), + child: getIt(), + ), + middle: SyncIndicator( + dashboardViewModel: dashboardViewModel, + onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync), + ), + trailing: InkWell( + onTap: () { + String? currentPath; - @override - Color get backgroundLightColor => - currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; + DesktopDashboardPage.desktopKey.currentState?.popUntil((route) { + currentPath = route.settings.name; + return true; + }); - @override - Color get backgroundDarkColor => Colors.black.withOpacity(0.1); + switch (currentPath) { + case Routes.transactionsPage: + desktopSidebarViewModel.resetSidebar(); + break; + default: + desktopSidebarViewModel.resetSidebar(); + Future.delayed(Duration(milliseconds: 10), () { + desktopSidebarViewModel.onPageChange(SidebarItem.transactions); + DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage); + }); + } + }, + child: Observer( + builder: (_) { + return Image.asset( + desktopSidebarViewModel.currentPage == SidebarItem.transactions + ? selectedIconPath + : unselectedIconPath, + ); + }, + ), + ), + ); @override bool get resizeToAvoidBottomInset => false; @@ -62,54 +95,6 @@ class DesktopSidebarWrapper extends BasePage { child: scaffold, ); - @override - Widget? leading(BuildContext context) => Padding( - padding: EdgeInsets.only(left: sideMenuWidth), - child: getIt(), - ); - - @override - Widget middle(BuildContext context) { - return SyncIndicator( - dashboardViewModel: dashboardViewModel, - onTap: () => Navigator.of(context, rootNavigator: true).pushNamed(Routes.connectionSync)); - } - - @override - Widget trailing(BuildContext context) { - return InkWell( - onTap: () { - String? currentPath; - - DesktopDashboardPage.desktopKey.currentState?.popUntil((route) { - currentPath = route.settings.name; - return true; - }); - - switch (currentPath) { - case Routes.transactionsPage: - desktopSidebarViewModel.resetSidebar(); - break; - default: - desktopSidebarViewModel.resetSidebar(); - Future.delayed(Duration(milliseconds: 10), () { - desktopSidebarViewModel.onPageChange(SidebarItem.transactions); - DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage); - }); - } - }, - child: Observer( - builder: (_) { - return Image.asset( - desktopSidebarViewModel.currentPage == SidebarItem.transactions - ? selectedIconPath - : unselectedIconPath, - ); - }, - ), - ); - } - @override Widget body(BuildContext context) { reaction((_) => desktopSidebarViewModel.currentPage, (page) { diff --git a/lib/src/widgets/desktop_nav_bar.dart b/lib/src/widgets/desktop_nav_bar.dart new file mode 100644 index 000000000..ae12726e4 --- /dev/null +++ b/lib/src/widgets/desktop_nav_bar.dart @@ -0,0 +1,44 @@ +import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/store/settings_store.dart'; +import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:flutter/material.dart'; + +class DesktopNavbar extends StatelessWidget implements PreferredSizeWidget { + final Widget leading; + final Widget middle; + final Widget trailing; + + DesktopNavbar({ + super.key, + required this.leading, + required this.middle, + required this.trailing, + }); + + ThemeBase get currentTheme => getIt.get().currentTheme; + + @override + Widget build(BuildContext context) { + final appBarColor = + currentTheme.type == ThemeType.dark ? Colors.black.withOpacity(0.1) : Colors.white; + + return Container( + padding: const EdgeInsetsDirectional.only(end: 24), + color: appBarColor, + child: Center( + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Flexible(child: leading), + middle, + trailing, + ], + ), + ), + ); + } + + @override + Size get preferredSize => Size.fromHeight(60); +} diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 05c3531d0..f16bf8801 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -7,7 +7,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { middle: middle, trailing: trailing, height: _height, - useDesktopAppbar: useDesktopAppbar, backgroundColor: backgroundColor); } @@ -18,7 +17,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { middle: middle, trailing: trailing, height: 80, - useDesktopAppbar: useDesktopAppbar, backgroundColor: backgroundColor, decoration: BoxDecoration( color: backgroundColor, @@ -39,7 +37,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { this.trailing, this.backgroundColor, this.decoration, - this.useDesktopAppbar = false, this.height = _height}); static const _originalHeight = 44.0; // iOS nav bar height @@ -51,7 +48,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { final Color? backgroundColor; final BoxDecoration? decoration; final double height; - final bool useDesktopAppbar; @override Widget build(BuildContext context) { @@ -63,24 +59,6 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { final paddingTop = pad / 2; final _paddingBottom = (pad / 2); - if (useDesktopAppbar) { - 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(), - ], - ), - ), - ); - } - return Container( decoration: decoration ?? BoxDecoration(color: backgroundColor), padding: EdgeInsetsDirectional.only(bottom: _paddingBottom, top: paddingTop),