groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2025-12-06 02:59:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

animated-dark-mode-switch

Browse source
This commit is contained in:
Dr-Blank 2024-05-11 06:05:26 -04:00
parent 0d54f1cb15
commit 0c99dd48a6
No known key found for this signature in database
GPG key ID: 7452CC63F210A266
2 changed files with 125 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

19
lib/main.dart
View file

@ -1,3 +1,4 @@
import 'package:animated_theme_switcher/animated_theme_switcher.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:whispering_pages/api/server_provider.dart';
@ -36,14 +37,16 @@ class MyApp extends ConsumerWidget {
routerConfig.goNamed(Routes.onboarding.name);
}
return MaterialApp.router(
debugShowCheckedModeBanner: false,
theme: lightTheme,
darkTheme: darkTheme,
themeMode: ref.watch(appSettingsProvider).isDarkMode
? ThemeMode.dark
: ThemeMode.light,
routerConfig: routerConfig,
return ThemeProvider(
initTheme:
ref.read(appSettingsProvider).isDarkMode ? darkTheme : lightTheme,
builder: (context, myTheme) {
return MaterialApp.router(
debugShowCheckedModeBanner: false,
routerConfig: routerConfig,
theme: myTheme,
);
},
);
}
}

151
lib/pages/app_settings.dart
View file

@ -1,3 +1,4 @@
import 'package:animated_theme_switcher/animated_theme_switcher.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_settings_ui/flutter_settings_ui.dart';
@ -5,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:whispering_pages/api/authenticated_user_provider.dart';
import 'package:whispering_pages/api/server_provider.dart';
import 'package:whispering_pages/settings/app_settings_provider.dart';
import 'package:whispering_pages/theme/theme.dart';
class AppSettingsPage extends HookConsumerWidget {
const AppSettingsPage({
@ -20,45 +22,120 @@ class AppSettingsPage extends HookConsumerWidget {
final serverURIController = useTextEditingController();
final formKey = GlobalKey<FormState>();
return Scaffold(
appBar: AppBar(
title: const Text('App Settings'),
),
body: SettingsList(
sections: [
SettingsSection(
title: const Text('Appearance'),
tiles: [
SettingsTile.switchTile(
initialValue: appSettings.isDarkMode,
title: const Text('Dark Mode'),
description: const Text('we all know dark mode is better'),
leading: appSettings.isDarkMode
? const Icon(Icons.dark_mode)
: const Icon(Icons.light_mode),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).toggleDarkMode();
},
),
SettingsTile.switchTile(
initialValue: appSettings.useMaterialThemeOnItemPage,
title: const Text('Use Material Theming on Item Page'),
description: const Text(
'get fancy with the colors on the item page at the cost of some performance',
return ThemeSwitchingArea(
child: Builder(
builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('App Settings'),
),
body: SettingsList(
sections: [
SettingsSection(
title: const Text('Appearance'),
tiles: [
ThemeSwitcherTile(
initialValue: appSettings.isDarkMode,
title: const Text('Dark Mode'),
description:
const Text('we all know dark mode is better'),
leading: (appSettings.isDarkMode
? const Icon(Icons.dark_mode)
: const Icon(Icons.light_mode)),
onToggle: (value, context) {
ThemeSwitcher.of(context)
.changeTheme(theme: value ? darkTheme : lightTheme);
ref.read(appSettingsProvider.notifier).toggleDarkMode();
},
),
SettingsTile.switchTile(
initialValue: appSettings.useMaterialThemeOnItemPage,
title: const Text('Use Material Theming on Item Page'),
description: const Text(
'get fancy with the colors on the item page at the cost of some performance',
),
leading: const Icon(Icons.dynamic_form_outlined),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).updateState(
appSettings.copyWith(
useMaterialThemeOnItemPage: value,
),
);
},
),
],
),
leading: const Icon(Icons.dynamic_form_outlined),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).updateState(
appSettings.copyWith(
useMaterialThemeOnItemPage: value,
),
);
},
),
],
),
],
],
),
);
},
),
);
}
}
// a custom settings tile that extends AbstractSettingsTile but also returns ThemeSwitcher
// so we can switch themes by using the switch tile ans ThemeSwitcher.of(context).changeTheme()
// it is nothing but a wrapper around the switch tile so the type is settings tile but also contains a theme switcher
class ThemeSwitcherTile extends AbstractSettingsTile {
ThemeSwitcherTile({
required this.initialValue,
required this.onToggle,
this.descriptionInlineIos = false,
this.activeSwitchColor,
this.leading,
this.trailing,
required this.title,
this.description,
this.onPressed,
this.enabled = true,
this.backgroundColor,
super.key,
}) {
value = null;
tileType = SettingsTileType.switchTile;
}
final Widget? leading;
final Widget? trailing;
final Widget title;
final Widget? description;
final bool descriptionInlineIos;
final Color? backgroundColor;
final Function(BuildContext context)? onPressed;
late final Color? activeSwitchColor;
late final Widget? value;
late final Function(bool value, BuildContext context)? onToggle;
late final SettingsTileType tileType;
late final bool? initialValue;
late final bool enabled;
@override
Widget build(BuildContext context) {
return ThemeSwitcher(
builder: (context) {
return SettingsTile.switchTile(
initialValue: initialValue,
title: title,
description: description,
descriptionInlineIos: descriptionInlineIos,
leading: leading,
trailing: trailing,
onToggle: (value) {
onToggle?.call(value, context);
},
onPressed: onPressed,
enabled: enabled,
backgroundColor: backgroundColor,
);
},
);
}
}