mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-12-23 11:59:30 +00:00
desktop theme toggle
This commit is contained in:
julian
parent
c962f597fd
commit
b3a343d28a
1 changed files with 218 additions and 173 deletions
|
|
@ -1,16 +1,19 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/src/widgets/framework.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
import 'package:stackwallet/hive/db.dart';
|
||||
import 'package:stackwallet/providers/global/prefs_provider.dart';
|
||||
import 'package:stackwallet/providers/ui/color_theme_provider.dart';
|
||||
import 'package:stackwallet/utilities/assets.dart';
|
||||
import 'package:stackwallet/utilities/constants.dart';
|
||||
import 'package:stackwallet/utilities/text_styles.dart';
|
||||
import 'package:stackwallet/utilities/theme/color_theme.dart';
|
||||
import 'package:stackwallet/utilities/theme/dark_colors.dart';
|
||||
import 'package:stackwallet/utilities/theme/light_colors.dart';
|
||||
import 'package:stackwallet/utilities/theme/stack_colors.dart';
|
||||
import 'package:stackwallet/widgets/custom_buttons/draggable_switch_button.dart';
|
||||
import 'package:stackwallet/widgets/rounded_white_container.dart';
|
||||
|
||||
import '../../../providers/global/prefs_provider.dart';
|
||||
import '../../../utilities/constants.dart';
|
||||
import '../../../widgets/custom_buttons/draggable_switch_button.dart';
|
||||
|
||||
class AppearanceOptionSettings extends ConsumerStatefulWidget {
|
||||
const AppearanceOptionSettings({Key? key}) : super(key: key);
|
||||
|
||||
|
|
@ -140,7 +143,10 @@ class _AppearanceOptionSettings
|
|||
],
|
||||
),
|
||||
),
|
||||
ThemeToggle(),
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(10),
|
||||
child: ThemeToggle(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
@ -150,7 +156,7 @@ class _AppearanceOptionSettings
|
|||
}
|
||||
}
|
||||
|
||||
class ThemeToggle extends StatefulWidget {
|
||||
class ThemeToggle extends ConsumerStatefulWidget {
|
||||
const ThemeToggle({
|
||||
Key? key,
|
||||
}) : super(key: key);
|
||||
|
|
@ -159,187 +165,226 @@ class ThemeToggle extends StatefulWidget {
|
|||
// final void Function(bool)? onChanged;
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => _ThemeToggle();
|
||||
ConsumerState<ThemeToggle> createState() => _ThemeToggle();
|
||||
}
|
||||
|
||||
class _ThemeToggle extends State<ThemeToggle> {
|
||||
class _ThemeToggle extends ConsumerState<ThemeToggle> {
|
||||
// late bool externalCallsEnabled;
|
||||
|
||||
late String _selectedTheme;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_selectedTheme =
|
||||
DB.instance.get<dynamic>(boxName: DB.boxNameTheme, key: "colorScheme")
|
||||
as String? ??
|
||||
"light";
|
||||
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: RawMaterialButton(
|
||||
elevation: 0,
|
||||
hoverColor: Colors.transparent,
|
||||
shape: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color:
|
||||
Theme.of(context).extension<StackColors>()!.infoItemIcons,
|
||||
width: 2,
|
||||
),
|
||||
// side: !externalCallsEnabled
|
||||
// ? BorderSide.none
|
||||
// : BorderSide(
|
||||
// color: Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .infoItemIcons,
|
||||
// width: 2,
|
||||
// ),
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius * 2,
|
||||
),
|
||||
),
|
||||
onPressed: () {}, //onPressed
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 24,
|
||||
),
|
||||
child: SvgPicture.asset(
|
||||
Assets.svg.themeLight,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 50,
|
||||
top: 12,
|
||||
),
|
||||
child: Text(
|
||||
"Light",
|
||||
style: STextStyles.desktopTextExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark,
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
// if (externalCallsEnabled)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 6,
|
||||
child: SvgPicture.asset(
|
||||
Assets.svg.checkCircle,
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.infoItemIcons,
|
||||
),
|
||||
),
|
||||
// if (!externalCallsEnabled)
|
||||
// Positioned(
|
||||
// bottom: 0,
|
||||
// left: 6,
|
||||
// child: Container(
|
||||
// width: 20,
|
||||
// height: 20,
|
||||
// decoration: BoxDecoration(
|
||||
// borderRadius: BorderRadius.circular(1000),
|
||||
// color: Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .textFieldDefaultBG,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
),
|
||||
MaterialButton(
|
||||
splashColor: Colors.transparent,
|
||||
hoverColor: Colors.transparent,
|
||||
padding: const EdgeInsets.all(0),
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 1,
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: RawMaterialButton(
|
||||
elevation: 0,
|
||||
hoverColor: Colors.transparent,
|
||||
shape: RoundedRectangleBorder(
|
||||
// side: !externalCallsEnabled
|
||||
// ? BorderSide.none
|
||||
// : BorderSide(
|
||||
// color: Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .infoItemIcons,
|
||||
// width: 2,
|
||||
// ),
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius * 2,
|
||||
),
|
||||
),
|
||||
onPressed: () {}, //onPressed
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SvgPicture.asset(
|
||||
Assets.svg.themeDark,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 45,
|
||||
top: 12,
|
||||
),
|
||||
child: Text(
|
||||
"Dark",
|
||||
style: STextStyles.desktopTextExtraSmall(context)
|
||||
.copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// if (externalCallsEnabled)
|
||||
// Positioned(
|
||||
// bottom: 0,
|
||||
// left: 0,
|
||||
// child: SvgPicture.asset(
|
||||
// Assets.svg.checkCircle,
|
||||
// width: 20,
|
||||
// height: 20,
|
||||
// color: Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .infoItemIcons,
|
||||
// ),
|
||||
// ),
|
||||
// if (!externalCallsEnabled)
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
child: Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(1000),
|
||||
color: Theme.of(context)
|
||||
onPressed: () {
|
||||
DB.instance.put<dynamic>(
|
||||
boxName: DB.boxNameTheme,
|
||||
key: "colorScheme",
|
||||
value: ThemeType.light.name,
|
||||
);
|
||||
ref.read(colorThemeProvider.state).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
LightColors(),
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_selectedTheme = "light";
|
||||
});
|
||||
},
|
||||
child: SizedBox(
|
||||
width: 200,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
width: 2.5,
|
||||
color: _selectedTheme == "light"
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textFieldDefaultBG,
|
||||
),
|
||||
.infoItemIcons
|
||||
: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
child: SvgPicture.asset(
|
||||
Assets.svg.themeLight,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: Radio(
|
||||
activeColor: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.radioButtonIconEnabled,
|
||||
value: "light",
|
||||
groupValue: _selectedTheme,
|
||||
onChanged: (newValue) {
|
||||
if (newValue is String && newValue == "light") {
|
||||
DB.instance.put<dynamic>(
|
||||
boxName: DB.boxNameTheme,
|
||||
key: "colorScheme",
|
||||
value: ThemeType.light.name,
|
||||
);
|
||||
ref.read(colorThemeProvider.state).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
LightColors(),
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_selectedTheme = "light";
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 14,
|
||||
),
|
||||
Text(
|
||||
"Light",
|
||||
style:
|
||||
STextStyles.desktopTextExtraSmall(context).copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 20,
|
||||
),
|
||||
MaterialButton(
|
||||
splashColor: Colors.transparent,
|
||||
hoverColor: Colors.transparent,
|
||||
padding: const EdgeInsets.all(0),
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
DB.instance.put<dynamic>(
|
||||
boxName: DB.boxNameTheme,
|
||||
key: "colorScheme",
|
||||
value: ThemeType.dark.name,
|
||||
);
|
||||
ref.read(colorThemeProvider.state).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
DarkColors(),
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_selectedTheme = "dark";
|
||||
});
|
||||
},
|
||||
child: SizedBox(
|
||||
width: 200,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
width: 2.5,
|
||||
color: _selectedTheme == "dark"
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.infoItemIcons
|
||||
: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
),
|
||||
child: SvgPicture.asset(
|
||||
Assets.svg.themeDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 12,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: Radio(
|
||||
activeColor: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.radioButtonIconEnabled,
|
||||
value: "dark",
|
||||
groupValue: _selectedTheme,
|
||||
onChanged: (newValue) {
|
||||
if (newValue is String && newValue == "dark") {
|
||||
DB.instance.put<dynamic>(
|
||||
boxName: DB.boxNameTheme,
|
||||
key: "colorScheme",
|
||||
value: ThemeType.dark.name,
|
||||
);
|
||||
ref.read(colorThemeProvider.state).state =
|
||||
StackColors.fromStackColorTheme(
|
||||
DarkColors(),
|
||||
);
|
||||
|
||||
setState(() {
|
||||
_selectedTheme = "dark";
|
||||
});
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 14,
|
||||
),
|
||||
Text(
|
||||
"Dark",
|
||||
style:
|
||||
STextStyles.desktopTextExtraSmall(context).copyWith(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textDark,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in a new issue