stack_wallet/lib/pages_desktop_specific/home/desktop_menu.dart

323 lines
12 KiB
Dart
Raw Normal View History

import 'dart:io';
import 'package:flutter/material.dart';
2022-09-16 17:26:12 +00:00
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu_item.dart';
2022-11-14 16:40:31 +00:00
import 'package:stackwallet/providers/desktop/current_desktop_menu_item.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
enum DesktopMenuItemId {
myStack,
exchange,
notifications,
addressBook,
settings,
support,
about,
}
2022-09-16 17:26:12 +00:00
class DesktopMenu extends ConsumerStatefulWidget {
const DesktopMenu({
Key? key,
2022-11-14 16:40:31 +00:00
this.onSelectionChanged,
this.onSelectionWillChange,
2022-09-16 17:26:12 +00:00
}) : super(key: key);
final void Function(DesktopMenuItemId)? onSelectionChanged;
2022-11-14 16:40:31 +00:00
final void Function(DesktopMenuItemId)? onSelectionWillChange;
@override
2022-09-16 17:26:12 +00:00
ConsumerState<DesktopMenu> createState() => _DesktopMenuState();
}
2022-09-16 17:26:12 +00:00
class _DesktopMenuState extends ConsumerState<DesktopMenu> {
static const expandedWidth = 225.0;
static const minimizedWidth = 72.0;
double _width = expandedWidth;
void updateSelectedMenuItem(DesktopMenuItemId idKey) {
2022-11-14 16:40:31 +00:00
widget.onSelectionWillChange?.call(idKey);
ref.read(currentDesktopMenuItemProvider.state).state = idKey;
widget.onSelectionChanged?.call(idKey);
2022-09-16 17:26:12 +00:00
}
void toggleMinimize() {
setState(() {
_width = _width == expandedWidth ? minimizedWidth : expandedWidth;
});
}
@override
Widget build(BuildContext context) {
return Material(
color: Theme.of(context).extension<StackColors>()!.popupBG,
child: SizedBox(
width: _width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
2022-09-16 17:26:12 +00:00
SizedBox(
height: _width == expandedWidth ? 22 : 25,
),
SizedBox(
2022-09-16 17:26:12 +00:00
width: _width == expandedWidth ? 70 : 32,
height: _width == expandedWidth ? 70 : 32,
child: SvgPicture.asset(
2022-09-23 14:33:44 +00:00
Assets.svg.stackIcon(context),
),
),
const SizedBox(
height: 10,
),
Text(
2022-09-16 17:26:12 +00:00
_width == expandedWidth ? "Stack Wallet" : "",
2022-09-22 22:17:21 +00:00
style: STextStyles.desktopH2(context).copyWith(
fontSize: 18,
height: 23.4 / 18,
),
),
const SizedBox(
height: 60,
),
Expanded(
child: SizedBox(
width: _width == expandedWidth
? _width - 32 // 16 padding on either side
: _width - 16, // 8 padding on either side
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.walletDesktop,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.myStack ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "My Stack",
value: DesktopMenuItemId.myStack,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const SizedBox(
height: 2,
),
// DesktopMenuItem(
// icon: SvgPicture.asset(
// Assets.svg.exchangeDesktop,
// width: 20,
// height: 20,
2022-11-14 16:40:31 +00:00
// color: DesktopMenuItemId.exchange == ref.watch(currentDesktopMenuItemProvider.state).state
// ? Theme.of(context)
// .extension<StackColors>()!
// .textDark
// : Theme.of(context)
// .extension<StackColors>()!
// .textDark
// .withOpacity(0.8),
// ),
// label: "Exchange",
// value: DesktopMenuItemId.exchange,
2022-11-14 16:40:31 +00:00
// group: ref.watch(currentDesktopMenuItemProvider.state).state,
// onChanged: updateSelectedMenuItem,
// iconOnly: _width == minimizedWidth,
// ),
// const SizedBox(
// height: 2,
// ),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.bell,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.notifications ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "Notifications",
value: DesktopMenuItemId.notifications,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const SizedBox(
height: 2,
),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.addressBookDesktop,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.addressBook ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "Address Book",
value: DesktopMenuItemId.addressBook,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const SizedBox(
height: 2,
),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.gear,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.settings ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "Settings",
value: DesktopMenuItemId.settings,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const SizedBox(
height: 2,
),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.messageQuestion,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.support ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "Support",
value: DesktopMenuItemId.support,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const SizedBox(
height: 2,
),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.aboutDesktop,
width: 20,
height: 20,
2022-11-14 16:40:31 +00:00
color: DesktopMenuItemId.about ==
ref
.watch(currentDesktopMenuItemProvider.state)
.state
? Theme.of(context)
.extension<StackColors>()!
.textDark
: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "About",
value: DesktopMenuItemId.about,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: updateSelectedMenuItem,
iconOnly: _width == minimizedWidth,
),
const Spacer(),
DesktopMenuItem(
icon: SvgPicture.asset(
Assets.svg.exitDesktop,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.textDark
.withOpacity(0.8),
),
label: "Exit",
value: 7,
2022-11-14 16:40:31 +00:00
group:
ref.watch(currentDesktopMenuItemProvider.state).state,
onChanged: (_) {
// todo: save stuff/ notify before exit?
exit(0);
},
iconOnly: _width == minimizedWidth,
),
],
),
),
),
2022-09-16 17:26:12 +00:00
Row(
children: [
const Spacer(),
IconButton(
splashRadius: 18,
onPressed: toggleMinimize,
icon: SvgPicture.asset(
Assets.svg.minimize,
height: 12,
width: 12,
),
),
],
),
],
),
),
);
}
}