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';
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
Widget build(BuildContext context) {
@ -25,7 +32,10 @@ class GalleryHome extends StatelessWidget {
builder: (BuildContext context) {
return switch (index) {
0 => const WidgetsPage(),
1 => const SettingsPage(),
1 => SettingsPage(
onThemeChange: onThemeChange,
isDarkMode: isDarkMode,
),
_ => const Center(child: Text('Widgets')),
};
},

@ -3,6 +3,7 @@
// found in the LICENSE file.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'gallery_home.dart';
@ -10,11 +11,33 @@ void main() {
runApp(const CupertinoGalleryApp());
}
class CupertinoGalleryApp extends StatelessWidget {
class CupertinoGalleryApp extends StatefulWidget {
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
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';
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
State<SettingsPage> createState() => _SettingsPageState();
}
class _SettingsPageState extends State<SettingsPage> {
bool _darkMode = false;
double _textSize = 1.0;
late bool isDarkMode;
@override
void initState() {
isDarkMode = widget.isDarkMode;
super.initState();
}
@override
void didChangeDependencies() {
isDarkMode = widget.isDarkMode;
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('Settings'),
),
navigationBar: const CupertinoNavigationBar(middle: Text('Settings')),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@ -26,10 +43,11 @@ class _SettingsPageState extends State<SettingsPage> {
CupertinoListTile(
title: const Text('Dark Mode'),
trailing: CupertinoSwitch(
value: _darkMode,
onChanged: (bool value) {
value: isDarkMode,
onChanged: (bool isActive) {
setState(() {
_darkMode = value;
isDarkMode = isActive;
widget.onThemeChange(isActive);
});
},
),
@ -75,7 +93,8 @@ class _SettingsPageState extends State<SettingsPage> {
builder: (BuildContext context) => CupertinoAlertDialog(
title: const Text('Reset Settings'),
content: const Text(
'Are you sure you want to reset all settings?'),
'Are you sure you want to reset all settings?',
),
actions: <CupertinoDialogAction>[
CupertinoDialogAction(
child: const Text('Cancel'),
@ -88,7 +107,7 @@ class _SettingsPageState extends State<SettingsPage> {
child: const Text('Reset'),
onPressed: () {
setState(() {
_darkMode = false;
widget.onThemeChange(false);
_textSize = 1.0;
});
Navigator.pop(context);

Loading…
Cancel
Save