mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-01-22 18:44:31 +00:00
desktop settings
This commit is contained in:
commit
80503192cf
9 changed files with 383 additions and 22 deletions
|
@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
|
|||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_menu.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
|
||||
import 'package:stackwallet/route_generator.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
||||
|
@ -30,8 +31,9 @@ class _DesktopHomeViewState extends ConsumerState<DesktopHomeView> {
|
|||
Container(
|
||||
color: Colors.orange,
|
||||
),
|
||||
Container(
|
||||
color: Colors.yellow,
|
||||
const Navigator(
|
||||
onGenerateRoute: RouteGenerator.generateRoute,
|
||||
initialRoute: SettingsMenu.routeName,
|
||||
),
|
||||
Container(
|
||||
color: Colors.blue,
|
||||
|
|
68
lib/pages_desktop_specific/home/desktop_settings_view.dart
Normal file
68
lib/pages_desktop_specific/home/desktop_settings_view.dart
Normal file
|
@ -0,0 +1,68 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
||||
class DesktopSettingsView extends ConsumerStatefulWidget {
|
||||
const DesktopSettingsView({Key? key}) : super(key: key);
|
||||
|
||||
static const String routeName = "/desktopSettings";
|
||||
|
||||
@override
|
||||
ConsumerState<DesktopSettingsView> createState() =>
|
||||
_DesktopSettingsViewState();
|
||||
}
|
||||
|
||||
class _DesktopSettingsViewState extends ConsumerState<DesktopSettingsView> {
|
||||
int currentViewIndex = 0;
|
||||
final List<Widget> contentViews = [
|
||||
Container(
|
||||
color: Colors.lime,
|
||||
), //b+r
|
||||
Container(
|
||||
color: Colors.green,
|
||||
), //security
|
||||
Container(
|
||||
color: Colors.red,
|
||||
), //currency
|
||||
Container(
|
||||
color: Colors.orange,
|
||||
), //language
|
||||
Container(
|
||||
color: Colors.yellow,
|
||||
), //nodes
|
||||
Container(
|
||||
color: Colors.blue,
|
||||
), //syncing prefs
|
||||
Container(
|
||||
color: Colors.pink,
|
||||
), //appearance
|
||||
Container(
|
||||
color: Colors.purple,
|
||||
), //advanced
|
||||
];
|
||||
|
||||
void onMenuSelectionChanged(int newIndex) {
|
||||
setState(() {
|
||||
currentViewIndex = newIndex;
|
||||
});
|
||||
}
|
||||
|
||||
// will have a row with two items: SettingsMenu and settings contentxd
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: Theme.of(context).extension<StackColors>()!.background,
|
||||
child: Row(
|
||||
children: [
|
||||
SettingsMenu(
|
||||
onSelectionChanged: onMenuSelectionChanged,
|
||||
),
|
||||
Expanded(
|
||||
child: contentViews[currentViewIndex],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
189
lib/pages_desktop_specific/home/settings_menu/settings_menu.dart
Normal file
189
lib/pages_desktop_specific/home/settings_menu/settings_menu.dart
Normal file
|
@ -0,0 +1,189 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/settings_menu_item.dart';
|
||||
import 'package:stackwallet/utilities/assets.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
||||
class SettingsMenu extends ConsumerStatefulWidget {
|
||||
const SettingsMenu({
|
||||
Key? key,
|
||||
required this.onSelectionChanged,
|
||||
}) : super(key: key);
|
||||
|
||||
final void Function(int)?
|
||||
onSelectionChanged; //is a function that takes in an int and returns void/.;
|
||||
|
||||
static const String routeName = "/settingsMenu";
|
||||
|
||||
@override
|
||||
ConsumerState<ConsumerStatefulWidget> createState() => _SettingsMenuState();
|
||||
}
|
||||
|
||||
class _SettingsMenuState extends ConsumerState<SettingsMenu> {
|
||||
int selectedMenuItem = 0;
|
||||
|
||||
void updateSelectedMenuItem(int index) {
|
||||
setState(() {
|
||||
selectedMenuItem = index;
|
||||
});
|
||||
widget.onSelectionChanged?.call(index);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
debugPrint("BUILD: $runtimeType");
|
||||
|
||||
return Material(
|
||||
color: Theme.of(context).extension<StackColors>()!.background,
|
||||
child: SizedBox(
|
||||
width: 300,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(24.0, 10.0, 0, 0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 20,
|
||||
// width: 300,
|
||||
),
|
||||
Text(
|
||||
"Settings",
|
||||
style: STextStyles.desktopH3(context).copyWith(
|
||||
fontSize: 24,
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
3.0,
|
||||
30.0,
|
||||
55.0,
|
||||
0,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Backup and restore",
|
||||
value: 0,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Security",
|
||||
value: 1,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Currency",
|
||||
value: 2,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Language",
|
||||
value: 3,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Nodes",
|
||||
value: 4,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Syncing preferences",
|
||||
value: 5,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Appearance",
|
||||
value: 6,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 2,
|
||||
),
|
||||
SettingsMenuItem(
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.polygon,
|
||||
width: 11,
|
||||
height: 11,
|
||||
),
|
||||
label: "Advanced",
|
||||
value: 7,
|
||||
group: selectedMenuItem,
|
||||
onChanged: updateSelectedMenuItem,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
58
lib/pages_desktop_specific/home/settings_menu_item.dart
Normal file
58
lib/pages_desktop_specific/home/settings_menu_item.dart
Normal file
|
@ -0,0 +1,58 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
|
||||
class SettingsMenuItem<T> extends StatelessWidget {
|
||||
const SettingsMenuItem({
|
||||
Key? key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.group,
|
||||
required this.onChanged,
|
||||
}) : super(key: key);
|
||||
|
||||
final Widget icon;
|
||||
final String label;
|
||||
final T value;
|
||||
final T group;
|
||||
final void Function(T) onChanged;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return TextButton(
|
||||
//if val == group, then button is selected, otherwise unselected
|
||||
style: value == group
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.getDesktopSettingsButtonColor(context)
|
||||
: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.getDesktopSettingsButtonColor(context),
|
||||
onPressed: () {
|
||||
onChanged(value);
|
||||
},
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: 16,
|
||||
horizontal: 16,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
icon,
|
||||
const SizedBox(
|
||||
width: 12,
|
||||
),
|
||||
Text(
|
||||
label,
|
||||
style: value == group //checks if option is selected
|
||||
? STextStyles.settingsMenuItemSelected(context)
|
||||
: STextStyles.settingsMenuItem(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,20 +0,0 @@
|
|||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
class SettingsView extends ConsumerStatefulWidget {
|
||||
const SettingsView({Key? key}) : super(key: key);
|
||||
|
||||
static const String routeName = "/settingsView";
|
||||
|
||||
@override
|
||||
ConsumerState<SettingsView> createState() => _SettingsView();
|
||||
}
|
||||
|
||||
class _SettingsView extends ConsumerState<SettingsView> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
debugPrint("BUILD: $runtimeType");
|
||||
// TODO: implement build
|
||||
throw UnimplementedError();
|
||||
}
|
||||
}
|
|
@ -84,7 +84,9 @@ import 'package:stackwallet/pages/wallet_view/wallet_view.dart';
|
|||
import 'package:stackwallet/pages/wallets_view/wallets_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
|
||||
import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
|
||||
import 'package:stackwallet/services/coins/manager.dart';
|
||||
import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart';
|
||||
import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
|
||||
|
@ -948,12 +950,26 @@ class RouteGenerator {
|
|||
builder: (_) => const DesktopHomeView(),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
case DesktopSettingsView.routeName:
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => const DesktopSettingsView(),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
case MyStackView.routeName:
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => const MyStackView(),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
case SettingsMenu.routeName:
|
||||
return getRoute(
|
||||
shouldUseMaterialRoute: useMaterialPageRoute,
|
||||
builder: (_) => SettingsMenu(
|
||||
onSelectionChanged: (int) {},
|
||||
),
|
||||
settings: RouteSettings(name: settings.name));
|
||||
|
||||
// == End of desktop specific routes =====================================
|
||||
|
||||
default:
|
||||
|
|
|
@ -793,6 +793,44 @@ class STextStyles {
|
|||
}
|
||||
}
|
||||
|
||||
static TextStyle settingsMenuItem(BuildContext context) {
|
||||
switch (_theme(context).themeType) {
|
||||
case ThemeType.light:
|
||||
return GoogleFonts.inter(
|
||||
color: _theme(context).textDark.withOpacity(0.5),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
case ThemeType.dark:
|
||||
return GoogleFonts.inter(
|
||||
color: _theme(context).textDark.withOpacity(0.5),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
static TextStyle settingsMenuItemSelected(BuildContext context) {
|
||||
switch (_theme(context).themeType) {
|
||||
case ThemeType.light:
|
||||
return GoogleFonts.inter(
|
||||
color: _theme(context).textDark,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
case ThemeType.dark:
|
||||
return GoogleFonts.inter(
|
||||
color: _theme(context).textDark,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
height: 20.8 / 16,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
static TextStyle stepIndicator(BuildContext context) {
|
||||
switch (_theme(context).themeType) {
|
||||
case ThemeType.light:
|
||||
|
|
|
@ -1501,4 +1501,14 @@ class StackColors extends ThemeExtension<StackColors> {
|
|||
textFieldDefaultBG,
|
||||
),
|
||||
);
|
||||
|
||||
ButtonStyle? getDesktopSettingsButtonColor(BuildContext context) =>
|
||||
Theme.of(context).textButtonTheme.style?.copyWith(
|
||||
backgroundColor: MaterialStateProperty.all<Color>(
|
||||
background,
|
||||
),
|
||||
overlayColor: MaterialStateProperty.all<Color>(
|
||||
Colors.transparent,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue