add dark mode

cupertino-gallery
Eric Windmill 4 weeks ago
parent d43bd76e6c
commit 8cd1635dec

@ -3,7 +3,14 @@ import 'settings_page.dart';
import 'widgets_page.dart'; import 'widgets_page.dart';
class GalleryHome extends StatelessWidget { class GalleryHome extends StatelessWidget {
const GalleryHome({super.key}); const GalleryHome({
super.key,
required this.onThemeChange,
required this.isDarkMode,
});
final ValueChanged<bool> onThemeChange;
final bool isDarkMode;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -25,7 +32,10 @@ class GalleryHome extends StatelessWidget {
builder: (BuildContext context) { builder: (BuildContext context) {
return switch (index) { return switch (index) {
0 => const WidgetsPage(), 0 => const WidgetsPage(),
1 => const SettingsPage(), 1 => SettingsPage(
onThemeChange: onThemeChange,
isDarkMode: isDarkMode,
),
_ => const Center(child: Text('Widgets')), _ => const Center(child: Text('Widgets')),
}; };
}, },

@ -3,6 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'gallery_home.dart'; import 'gallery_home.dart';
@ -10,11 +11,33 @@ void main() {
runApp(const CupertinoGalleryApp()); runApp(const CupertinoGalleryApp());
} }
class CupertinoGalleryApp extends StatelessWidget { class CupertinoGalleryApp extends StatefulWidget {
const CupertinoGalleryApp({super.key}); const CupertinoGalleryApp({super.key});
@override
State<CupertinoGalleryApp> createState() => _CupertinoGalleryAppState();
}
class _CupertinoGalleryAppState extends State<CupertinoGalleryApp> {
ThemeMode _themeMode = ThemeMode.system;
void _handleThemeChange(bool isDarkMode) {
setState(() {
_themeMode = isDarkMode ? ThemeMode.dark : ThemeMode.light;
});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return const CupertinoApp(title: 'Cupertino Gallery', home: GalleryHome()); return CupertinoApp(
title: 'Cupertino Gallery',
theme: CupertinoThemeData(
brightness: _themeMode == ThemeMode.dark ? Brightness.dark : Brightness.light,
),
home: GalleryHome(
onThemeChange: _handleThemeChange,
isDarkMode: _themeMode == ThemeMode.dark,
),
);
} }
} }

@ -1,22 +1,39 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
class SettingsPage extends StatefulWidget { class SettingsPage extends StatefulWidget {
const SettingsPage({super.key}); const SettingsPage({
super.key,
required this.onThemeChange,
required this.isDarkMode,
});
final ValueChanged<bool> onThemeChange;
final bool isDarkMode;
@override @override
State<SettingsPage> createState() => _SettingsPageState(); State<SettingsPage> createState() => _SettingsPageState();
} }
class _SettingsPageState extends State<SettingsPage> { class _SettingsPageState extends State<SettingsPage> {
bool _darkMode = false;
double _textSize = 1.0; double _textSize = 1.0;
late bool isDarkMode;
@override
void initState() {
isDarkMode = widget.isDarkMode;
super.initState();
}
@override
void didChangeDependencies() {
isDarkMode = widget.isDarkMode;
super.didChangeDependencies();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return CupertinoPageScaffold( return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar( navigationBar: const CupertinoNavigationBar(middle: Text('Settings')),
middle: Text('Settings'),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -26,10 +43,11 @@ class _SettingsPageState extends State<SettingsPage> {
CupertinoListTile( CupertinoListTile(
title: const Text('Dark Mode'), title: const Text('Dark Mode'),
trailing: CupertinoSwitch( trailing: CupertinoSwitch(
value: _darkMode, value: isDarkMode,
onChanged: (bool value) { onChanged: (bool isActive) {
setState(() { setState(() {
_darkMode = value; isDarkMode = isActive;
widget.onThemeChange(isActive);
}); });
}, },
), ),
@ -75,7 +93,8 @@ class _SettingsPageState extends State<SettingsPage> {
builder: (BuildContext context) => CupertinoAlertDialog( builder: (BuildContext context) => CupertinoAlertDialog(
title: const Text('Reset Settings'), title: const Text('Reset Settings'),
content: const Text( content: const Text(
'Are you sure you want to reset all settings?'), 'Are you sure you want to reset all settings?',
),
actions: <CupertinoDialogAction>[ actions: <CupertinoDialogAction>[
CupertinoDialogAction( CupertinoDialogAction(
child: const Text('Cancel'), child: const Text('Cancel'),
@ -88,7 +107,7 @@ class _SettingsPageState extends State<SettingsPage> {
child: const Text('Reset'), child: const Text('Reset'),
onPressed: () { onPressed: () {
setState(() { setState(() {
_darkMode = false; widget.onThemeChange(false);
_textSize = 1.0; _textSize = 1.0;
}); });
Navigator.pop(context); Navigator.pop(context);

Loading…
Cancel
Save