desktop settings

This commit is contained in:
ryleedavis 2022-10-11 09:34:56 -06:00
commit 80503192cf
9 changed files with 383 additions and 22 deletions

View file

@ -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,

View 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],
),
],
),
);
}
}

View 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,
),
],
),
),
],
),
],
),
),
),
);
}
}

View 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),
),
],
),
),
);
}
}

View file

@ -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();
}
}

View file

@ -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:

View file

@ -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:

View file

@ -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,
),
);
}