Skip to content

Instantly share code, notes, and snippets.

@vincevargadev
Forked from bitsydarel/switching theme without any library.
Last active July 14, 2020 00:04
Show Gist options
  • Save vincevargadev/912f9ae7cac6b74293aac8f41f177ff7 to your computer and use it in GitHub Desktop.
Save vincevargadev/912f9ae7cac6b74293aac8f41f177ff7 to your computer and use it in GitHub Desktop.
switching theme without any library.
void main() {
runApp(_SwitchingThemeApp());
}
/// Properties that help me keep track of the example being run.
bool _useMaterial = false;
class _SwitchingThemeApp extends StatefulWidget {
@override
_SwitchingThemeAppState createState() => _SwitchingThemeAppState();
static Future<bool> updateTheme(
final BuildContext context,
final ThemeMode themeMode,
) async {
final state = context.ancestorStateOfType(
const TypeMatcher<_SwitchingThemeAppState>(),
) as _SwitchingThemeAppState;
if (state?.mounted == true) {
state.updateTheme(themeMode);
return true;
}
return false;
}
}
class _SwitchingThemeAppState extends State<_SwitchingThemeApp> {
ThemeMode _themeMode = ThemeMode.system;
final ThemeData _light = ThemeData.from(colorScheme: ColorScheme.light());
final ThemeData _dark = ThemeData.from(colorScheme: ColorScheme.dark());
void updateTheme(ThemeMode mode) {
setState(() {
_themeMode = mode;
});
}
@override
Widget build(BuildContext context) {
if (_useMaterial) {
return MaterialApp(
home: _DummyPage(),
themeMode: _themeMode,
theme: _light,
darkTheme: _dark,
);
} else {
final platformBrightness = MediaQuery.platformBrightnessOf(context);
ThemeData currentTheme;
if (_themeMode == ThemeMode.system) {
currentTheme = platformBrightness == Brightness.light ? _light : _dark;
} else {
currentTheme = _themeMode == ThemeMode.light ? _light : _dark;
}
return CupertinoApp(
home: _DummyPage(),
theme: MaterialBasedCupertinoThemeData(materialTheme: currentTheme),
);
}
}
}
class _DummyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
/// Required only because we don't if the example
/// is being run using material widget or cupertino widget.
final messageStyle = _useMaterial
? Theme.of(context).textTheme.headline
: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle;
final background = _useMaterial
? Theme.of(context).scaffoldBackgroundColor
: CupertinoTheme.of(context).scaffoldBackgroundColor;
final brightness = _useMaterial
? Theme.of(context).brightness
: CupertinoTheme.of(context).brightness;
return SafeArea(
child: Container(
color: background,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"My color will change depending on the theme",
style: messageStyle,
textAlign: TextAlign.center,
),
Switch.adaptive(
value: brightness == Brightness.dark,
onChanged: (enable) {
_SwitchingThemeApp.updateTheme(
context,
enable ? ThemeMode.dark : ThemeMode.light,
);
},
)
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment