Created
October 10, 2023 01:07
-
-
Save codesxt/12b4df7e82fcb9b71fc47c42757c029f to your computer and use it in GitHub Desktop.
Theme Manager example using InheritedWidget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:example/state.dart'; | |
class MyHomePage extends StatefulWidget { | |
const MyHomePage({super.key, required this.title}); | |
final String title; | |
@override | |
State<MyHomePage> createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
elevation: 10, | |
title: Text(widget.title), | |
), | |
body: Center( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
ElevatedButton( | |
onPressed: () { | |
final manager = AppSettingsManager.of(context); | |
manager?.setTheme(ThemeMode.dark); | |
}, | |
child: const Text('Tema Oscuro'), | |
), | |
const SizedBox(height: 20), | |
ElevatedButton( | |
onPressed: () { | |
final manager = AppSettingsManager.of(context); | |
manager?.setTheme(ThemeMode.light); | |
}, | |
child: const Text('Tema Claro'), | |
), | |
const SizedBox(height: 20), | |
ElevatedButton( | |
onPressed: () { | |
final manager = AppSettingsManager.of(context); | |
manager?.setTheme(ThemeMode.system); | |
}, | |
child: const Text('Tema del Sistema'), | |
), | |
], | |
), | |
), | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:example/home.dart'; | |
import 'package:example/state.dart'; | |
void main() { | |
runApp( | |
const AppSettingsManager( | |
child: MyApp(), | |
), | |
); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
AppSettings? settingsManager = AppSettingsManager.of(context); | |
return MaterialApp( | |
title: 'Flutter Demo', | |
theme: ThemeData( | |
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), | |
useMaterial3: true, | |
), | |
darkTheme: ThemeData( | |
colorScheme: ColorScheme.fromSeed( | |
seedColor: Colors.deepPurple, | |
brightness: Brightness.dark, | |
), | |
useMaterial3: true, | |
), | |
themeMode: settingsManager?.themeMode, | |
home: const MyHomePage(title: 'State'), | |
// home: const HomeScreen(), | |
debugShowCheckedModeBanner: false, | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class AppSettingsManager extends StatefulWidget { | |
const AppSettingsManager({ | |
super.key, | |
required this.child, | |
}); | |
final Widget child; | |
static AppSettings? of(BuildContext context) { | |
AppSettings? appSettingsState = | |
context.dependOnInheritedWidgetOfExactType<AppSettings>(); | |
return appSettingsState; | |
} | |
@override | |
State<AppSettingsManager> createState() => AppSettingsManagerState(); | |
} | |
class AppSettingsManagerState extends State<AppSettingsManager> { | |
ThemeMode mode = ThemeMode.system; | |
setTheme(ThemeMode newMode) { | |
mode = newMode; | |
setState(() {}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return AppSettings( | |
themeMode: mode, | |
setTheme: setTheme, | |
child: widget.child, | |
); | |
} | |
} | |
// Inherited que notifica estado | |
class AppSettings extends InheritedWidget { | |
const AppSettings({ | |
super.key, | |
required super.child, | |
required this.themeMode, | |
required this.setTheme, | |
}); | |
final ThemeMode themeMode; | |
final Function(ThemeMode) setTheme; | |
@override | |
bool updateShouldNotify(AppSettings oldWidget) { | |
return themeMode != oldWidget.themeMode; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Este ejemplo permite almacenar en un estado a nivel de app la configuración con el modo del tema (ThemeMode.light, ThemeMode.dark o ThemeMode.system) y modificarlo desde otras partes del árbol de la aplicación para que los cambios se propaguen a donde sea necesario.