Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-21 18:24:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

fix dashboard sidebar and responsive utils

Browse source
This commit is contained in:
Godwin Asuquo 2023-01-30 23:23:42 +02:00
parent 94184d69d6
commit deadc93a76
5 changed files with 175 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

282
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -10,6 +10,7 @@ import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/yat_emoji_id.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/src/widgets/alert_with_one_action.dart';
import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
@ -42,8 +43,8 @@ class DashboardPage extends StatefulWidget {
} }
class _DashboardPageState extends State<DashboardPage> { class _DashboardPageState extends State<DashboardPage> {
PageController page = PageController(); final page = PageController();
SideMenuController sideMenu = SideMenuController(); final sideMenu = SideMenuController();
@override @override
void initState() { void initState() {
sideMenu.addListener((p0) { sideMenu.addListener((p0) {
@ -54,91 +55,85 @@ class _DashboardPageState extends State<DashboardPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( if (ResponsiveLayoutUtil.instance.isMobile(context)) {
body: LayoutBuilder(builder: (context, constraints) { return Scaffold(
if (constraints.maxWidth > 900) { body: _DashboardPage(
return Container( balancePage: widget.balancePage,
child: Row( walletViewModel: widget.walletViewModel,
mainAxisAlignment: MainAxisAlignment.start, addressListViewModel: widget.addressListViewModel,
children: [ ),
Expanded( );
flex: 1, }
child: SideMenu(
controller: sideMenu,
topItems: [
SideMenuItem(
iconPath: 'assets/images/wallet_outline.png',
priority: 0,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
],
bottomItems: [
SideMenuItem(
iconPath: 'assets/images/support_icon.png',
priority: 1,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
SideMenuItem(
iconPath: 'assets/images/settings_outline.png',
priority: 2,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
],
),
),
Expanded(
flex: 9,
child: PageView(
controller: page,
physics: NeverScrollableScrollPhysics(),
children: [
_DashboardPage(
balancePage: widget.balancePage,
walletViewModel: widget.walletViewModel,
addressListViewModel: widget.addressListViewModel,
),
Container(
child: Navigator(
initialRoute: Routes.support,
onGenerateRoute: (settings) => Router.createRoute(settings),
onGenerateInitialRoutes:
(NavigatorState navigator, String initialRouteName) {
return [
navigator
.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
];
},
),
),
Navigator(
initialRoute: Routes.desktop_settings_page,
onGenerateRoute: (settings) => Router.createRoute(settings),
onGenerateInitialRoutes:
(NavigatorState navigator, String initialRouteName) {
return [
navigator
.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
];
},
),
]), return Scaffold(
) body: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SideMenu(
controller: sideMenu,
topItems: [
SideMenuItem(
iconPath: 'assets/images/wallet_outline.png',
priority: 0,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
],
bottomItems: [
SideMenuItem(
iconPath: 'assets/images/support_icon.png',
priority: 1,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
SideMenuItem(
iconPath: 'assets/images/settings_outline.png',
priority: 2,
onTap: (page, _) {
sideMenu.changePage(page);
},
),
], ],
), ),
); Expanded(
} child: PageView(
return _DashboardPage( controller: page,
balancePage: widget.balancePage, physics: NeverScrollableScrollPhysics(),
walletViewModel: widget.walletViewModel, children: [
addressListViewModel: widget.addressListViewModel); _DashboardPage(
}), balancePage: widget.balancePage,
walletViewModel: widget.walletViewModel,
addressListViewModel: widget.addressListViewModel,
),
Container(
child: Navigator(
initialRoute: Routes.support,
onGenerateRoute: (settings) => Router.createRoute(settings),
onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
return [
navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
];
},
),
),
Navigator(
initialRoute: Routes.desktop_settings_page,
onGenerateRoute: (settings) => Router.createRoute(settings),
onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) {
return [
navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!
];
},
),
],
),
)
],
),
),
); );
} }
} }
@ -211,22 +206,21 @@ class _DashboardPage extends BasePage {
@override @override
Widget body(BuildContext context) { Widget body(BuildContext context) {
_setEffects(context); _setEffects(context);
if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
return DesktopDashboardView(balancePage);
}
return SafeArea( return SafeArea(
minimum: EdgeInsets.only(bottom: 24), minimum: EdgeInsets.only(bottom: 24),
child: LayoutBuilder(builder: (context, constraints) { child: Column(
if (constraints.maxWidth > 900) { mainAxisSize: MainAxisSize.max,
return DesktopDashboardView(balancePage); children: <Widget>[
} Expanded(
return Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: PageView.builder( child: PageView.builder(
controller: controller, controller: controller,
itemCount: pages.length, itemCount: pages.length,
itemBuilder: (context, index) => pages[index])), itemBuilder: (context, index) => pages[index])),
Padding( Padding(
padding: EdgeInsets.only(bottom: 24, top: 10), padding: EdgeInsets.only(bottom: 24, top: 10),
child: SmoothPageIndicator( child: SmoothPageIndicator(
controller: controller, controller: controller,
@ -237,65 +231,61 @@ class _DashboardPage extends BasePage {
dotWidth: 6.0, dotWidth: 6.0,
dotHeight: 6.0, dotHeight: 6.0,
dotColor: Theme.of(context).indicatorColor, dotColor: Theme.of(context).indicatorColor,
activeDotColor: Theme.of(context) activeDotColor:
.accentTextTheme! Theme.of(context).accentTextTheme!.headline4!.backgroundColor!),
.headline4!
.backgroundColor!),
)), )),
Observer(builder: (_) { Observer(builder: (_) {
return ClipRect( return ClipRect(
child: Container(
margin: const EdgeInsets.only(left: 16, right: 16),
child: Container( child: Container(
margin: const EdgeInsets.only(left: 16, right: 16), decoration: BoxDecoration(
child: Container( borderRadius: BorderRadius.circular(50.0),
decoration: BoxDecoration( border: Border.all(
borderRadius: BorderRadius.circular(50.0), color: currentTheme.type == ThemeType.bright
border: Border.all( ? Color.fromRGBO(255, 255, 255, 0.2)
color: currentTheme.type == ThemeType.bright : Colors.transparent,
? Color.fromRGBO(255, 255, 255, 0.2) width: 1,
: Colors.transparent,
width: 1,
),
color: Theme.of(context).textTheme.headline6!.backgroundColor!,
), ),
child: Container( color: Theme.of(context).textTheme.headline6!.backgroundColor!,
padding: EdgeInsets.only(left: 32, right: 32), ),
child: Row( child: Container(
mainAxisAlignment: MainAxisAlignment.spaceBetween, padding: EdgeInsets.only(left: 32, right: 32),
children: MainActions.all child: Row(
.where((element) => element.canShow?.call(walletViewModel) ?? true) mainAxisAlignment: MainAxisAlignment.spaceBetween,
.map((action) => ActionButton( children: MainActions.all
image: Image.asset(action.image, .where((element) => element.canShow?.call(walletViewModel) ?? true)
height: 24, .map((action) => ActionButton(
width: 24, image: Image.asset(action.image,
color: action.isEnabled?.call(walletViewModel) ?? true height: 24,
? Theme.of(context) width: 24,
.accentTextTheme color: action.isEnabled?.call(walletViewModel) ?? true
.headline2! ? Theme.of(context)
.backgroundColor! .accentTextTheme
: Theme.of(context) .headline2!
.accentTextTheme .backgroundColor!
.headline3! : Theme.of(context)
.backgroundColor!), .accentTextTheme
title: action.name(context), .headline3!
onClick: () async => .backgroundColor!),
await action.onTap(context, walletViewModel), title: action.name(context),
textColor: action.isEnabled?.call(walletViewModel) ?? true onClick: () async => await action.onTap(context, walletViewModel),
? null textColor: action.isEnabled?.call(walletViewModel) ?? true
: Theme.of(context) ? null
.accentTextTheme : Theme.of(context)
.headline3! .accentTextTheme
.backgroundColor!, .headline3!
)) .backgroundColor!,
.toList(), ))
), .toList(),
), ),
), ),
), ),
); ),
}), );
], }),
); ],
})); ));
} }
void _setEffects(BuildContext context) async { void _setEffects(BuildContext context) async {

2
lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart
View file

@ -19,7 +19,7 @@ class SideMenu extends StatelessWidget {
SideMenuGlobal.controller = controller; SideMenuGlobal.controller = controller;
return Container( return Container(
color: Colors.black.withOpacity(0.1), color: Colors.black.withOpacity(0.1),
width: double.infinity, width: 76,
height: MediaQuery.of(context).size.height, height: MediaQuery.of(context).size.height,
child: Column( child: Column(
children: [ children: [

12
lib/src/screens/settings/desktop_settings/dashboard_settings_page.dart
View file

@ -19,7 +19,7 @@ class DesktopSettingsPage extends StatefulWidget {
class _DesktopSettingsPageState extends State<DesktopSettingsPage> { class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
int itemCount = 0; int itemCount = 0;
SideMenuController sideMenu = SideMenuController(); SideMenuController sideMenu = SideMenuController();
int currentPage = 0; int? currentPage;
bool isTapped = false; bool isTapped = false;
initState() { initState() {
@ -66,10 +66,12 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
isSelected: currentPage == index, isSelected: currentPage == index,
isArrowVisible: true, isArrowVisible: true,
onTap: () { onTap: () {
final settingContext = if (currentPage != index) {
_settingsNavigatorKey.currentState?.context ?? context; final settingContext =
sideMenu.changePage(index); _settingsNavigatorKey.currentState?.context ?? context;
WalletMenu.action(index, settingContext); sideMenu.changePage(index);
WalletMenu.action(index, settingContext);
}
}, },
image: image, image: image,
title: title, title: title,

3
lib/src/widgets/setting_action_button.dart
View file

@ -35,8 +35,9 @@ class SettingActionButton extends StatelessWidget {
: selectionActive : selectionActive
? Palette.darkBlue ? Palette.darkBlue
: Theme.of(context).textTheme.headline3!.color; : Theme.of(context).textTheme.headline3!.color;
return GestureDetector( return InkWell(
onTap: onTap, onTap: onTap,
hoverColor: Colors.transparent,
child: Container( child: Container(
height: isLastTile ? headerHeight : tileHeight, height: isLastTile ? headerHeight : tileHeight,
padding: isLastTile padding: isLastTile

30
lib/utils/responsive_layout_util.dart Normal file
View file

@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
class ResponsiveLayoutUtil {
static const double _kMobileThreshold = 900;
const ResponsiveLayoutUtil._();
static final instance = ResponsiveLayoutUtil._();
bool isMobile(BuildContext context) {
final MediaQueryData mediaQueryData = MediaQuery.of(context);
return mediaQueryData.size.width < _kMobileThreshold;
}
/// Returns dynamic size.
///
/// If screen size is mobile, it returns 66% ([scale]) of the [originalValue].
double getDynamicSize(
BuildContext context,
double originalValue, {
double? mobileSize,
double? scale,
}) {
scale ??= 2 / 3;
mobileSize ??= originalValue * scale;
final value = isMobile(context) ? mobileSize : originalValue;
return value.roundToDouble();
}
}