mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-02-07 05:36:31 +00:00
fix dashboard sidebar and responsive utils
This commit is contained in:
Godwin Asuquo
parent
94184d69d6
commit
deadc93a76
5 changed files with 175 additions and 152 deletions
|
|
@ -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/widgets/alert_with_one_action.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:flutter/material.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> {
|
||||
PageController page = PageController();
|
||||
SideMenuController sideMenu = SideMenuController();
|
||||
final page = PageController();
|
||||
final sideMenu = SideMenuController();
|
||||
@override
|
||||
void initState() {
|
||||
sideMenu.addListener((p0) {
|
||||
|
|
@ -54,91 +55,85 @@ class _DashboardPageState extends State<DashboardPage> {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (ResponsiveLayoutUtil.instance.isMobile(context)) {
|
||||
return Scaffold(
|
||||
body: _DashboardPage(
|
||||
balancePage: widget.balancePage,
|
||||
walletViewModel: widget.walletViewModel,
|
||||
addressListViewModel: widget.addressListViewModel,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
body: LayoutBuilder(builder: (context, constraints) {
|
||||
if (constraints.maxWidth > 900) {
|
||||
return Container(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
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);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
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(
|
||||
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 _DashboardPage(
|
||||
balancePage: widget.balancePage,
|
||||
walletViewModel: widget.walletViewModel,
|
||||
addressListViewModel: widget.addressListViewModel);
|
||||
}),
|
||||
Expanded(
|
||||
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))!
|
||||
];
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -211,22 +206,21 @@ class _DashboardPage extends BasePage {
|
|||
@override
|
||||
Widget body(BuildContext context) {
|
||||
_setEffects(context);
|
||||
if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
|
||||
return DesktopDashboardView(balancePage);
|
||||
}
|
||||
|
||||
return SafeArea(
|
||||
minimum: EdgeInsets.only(bottom: 24),
|
||||
child: LayoutBuilder(builder: (context, constraints) {
|
||||
if (constraints.maxWidth > 900) {
|
||||
return DesktopDashboardView(balancePage);
|
||||
}
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: PageView.builder(
|
||||
controller: controller,
|
||||
itemCount: pages.length,
|
||||
itemBuilder: (context, index) => pages[index])),
|
||||
Padding(
|
||||
Padding(
|
||||
padding: EdgeInsets.only(bottom: 24, top: 10),
|
||||
child: SmoothPageIndicator(
|
||||
controller: controller,
|
||||
|
|
@ -237,65 +231,61 @@ class _DashboardPage extends BasePage {
|
|||
dotWidth: 6.0,
|
||||
dotHeight: 6.0,
|
||||
dotColor: Theme.of(context).indicatorColor,
|
||||
activeDotColor: Theme.of(context)
|
||||
.accentTextTheme!
|
||||
.headline4!
|
||||
.backgroundColor!),
|
||||
activeDotColor:
|
||||
Theme.of(context).accentTextTheme!.headline4!.backgroundColor!),
|
||||
)),
|
||||
Observer(builder: (_) {
|
||||
return ClipRect(
|
||||
Observer(builder: (_) {
|
||||
return ClipRect(
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(left: 16, right: 16),
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(left: 16, right: 16),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(50.0),
|
||||
border: Border.all(
|
||||
color: currentTheme.type == ThemeType.bright
|
||||
? Color.fromRGBO(255, 255, 255, 0.2)
|
||||
: Colors.transparent,
|
||||
width: 1,
|
||||
),
|
||||
color: Theme.of(context).textTheme.headline6!.backgroundColor!,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(50.0),
|
||||
border: Border.all(
|
||||
color: currentTheme.type == ThemeType.bright
|
||||
? Color.fromRGBO(255, 255, 255, 0.2)
|
||||
: Colors.transparent,
|
||||
width: 1,
|
||||
),
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(left: 32, right: 32),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: MainActions.all
|
||||
.where((element) => element.canShow?.call(walletViewModel) ?? true)
|
||||
.map((action) => ActionButton(
|
||||
image: Image.asset(action.image,
|
||||
height: 24,
|
||||
width: 24,
|
||||
color: action.isEnabled?.call(walletViewModel) ?? true
|
||||
? Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline2!
|
||||
.backgroundColor!
|
||||
: Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline3!
|
||||
.backgroundColor!),
|
||||
title: action.name(context),
|
||||
onClick: () async =>
|
||||
await action.onTap(context, walletViewModel),
|
||||
textColor: action.isEnabled?.call(walletViewModel) ?? true
|
||||
? null
|
||||
: Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline3!
|
||||
.backgroundColor!,
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
color: Theme.of(context).textTheme.headline6!.backgroundColor!,
|
||||
),
|
||||
child: Container(
|
||||
padding: EdgeInsets.only(left: 32, right: 32),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: MainActions.all
|
||||
.where((element) => element.canShow?.call(walletViewModel) ?? true)
|
||||
.map((action) => ActionButton(
|
||||
image: Image.asset(action.image,
|
||||
height: 24,
|
||||
width: 24,
|
||||
color: action.isEnabled?.call(walletViewModel) ?? true
|
||||
? Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline2!
|
||||
.backgroundColor!
|
||||
: Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline3!
|
||||
.backgroundColor!),
|
||||
title: action.name(context),
|
||||
onClick: () async => await action.onTap(context, walletViewModel),
|
||||
textColor: action.isEnabled?.call(walletViewModel) ?? true
|
||||
? null
|
||||
: Theme.of(context)
|
||||
.accentTextTheme
|
||||
.headline3!
|
||||
.backgroundColor!,
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
);
|
||||
}));
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
));
|
||||
}
|
||||
|
||||
void _setEffects(BuildContext context) async {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ class SideMenu extends StatelessWidget {
|
|||
SideMenuGlobal.controller = controller;
|
||||
return Container(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
width: double.infinity,
|
||||
width: 76,
|
||||
height: MediaQuery.of(context).size.height,
|
||||
child: Column(
|
||||
children: [
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ class DesktopSettingsPage extends StatefulWidget {
|
|||
class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
|
||||
int itemCount = 0;
|
||||
SideMenuController sideMenu = SideMenuController();
|
||||
int currentPage = 0;
|
||||
int? currentPage;
|
||||
bool isTapped = false;
|
||||
|
||||
initState() {
|
||||
|
|
@ -66,10 +66,12 @@ class _DesktopSettingsPageState extends State<DesktopSettingsPage> {
|
|||
isSelected: currentPage == index,
|
||||
isArrowVisible: true,
|
||||
onTap: () {
|
||||
final settingContext =
|
||||
_settingsNavigatorKey.currentState?.context ?? context;
|
||||
sideMenu.changePage(index);
|
||||
WalletMenu.action(index, settingContext);
|
||||
if (currentPage != index) {
|
||||
final settingContext =
|
||||
_settingsNavigatorKey.currentState?.context ?? context;
|
||||
sideMenu.changePage(index);
|
||||
WalletMenu.action(index, settingContext);
|
||||
}
|
||||
},
|
||||
image: image,
|
||||
title: title,
|
||||
|
|
|
|||
|
|
@ -35,8 +35,9 @@ class SettingActionButton extends StatelessWidget {
|
|||
: selectionActive
|
||||
? Palette.darkBlue
|
||||
: Theme.of(context).textTheme.headline3!.color;
|
||||
return GestureDetector(
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
hoverColor: Colors.transparent,
|
||||
child: Container(
|
||||
height: isLastTile ? headerHeight : tileHeight,
|
||||
padding: isLastTile
|
||||
|
|
|
|||
30
lib/utils/responsive_layout_util.dart
Normal file
30
lib/utils/responsive_layout_util.dart
Normal 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();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue