flutter light and dark mode code example
Example 1: how can i add dark mode quickly in flutter
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final _notifier = ValueNotifier<ThemeModel>(ThemeModel(ThemeMode.light));
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeModel>(
valueListenable: _notifier,
builder: (_, model, __) {
final mode = model.mode;
return MaterialApp(
theme: ThemeData.light(), // Provide light theme.
darkTheme: ThemeData.dark(), // Provide dark theme.
themeMode: mode, // Decides which theme to show.
home: Scaffold(
appBar: AppBar(title: Text('Light/Dark Theme')),
body: RaisedButton(
onPressed: () => _notifier.value = ThemeModel(mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light),
child: Text('Toggle Theme'),
),
),
);
},
);
}
}
class ThemeModel with ChangeNotifier {
final ThemeMode _mode;
ThemeMode get mode => _mode;
ThemeModel(this._mode);
}
Example 2: dark mode in flutter packages
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new DynamicTheme(
defaultBrightness: Brightness.light,
data: (brightness) => new ThemeData(
primarySwatch: Colors.indigo,
brightness: brightness,
),
themedWidgetBuilder: (context, theme) {
return new MaterialApp(
title: 'Flutter Demo',
theme: theme,
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
);
}
}