Skip to content

Instantly share code, notes, and snippets.

@bitsydarel

bitsydarel/switching theme without any library.

Last active August 15, 2022 20:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bitsydarel/01f79aa4c27b48a91f1a5a98a883d8d1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bitsydarel/01f79aa4c27b48a91f1a5a98a883d8d1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bitsydarel revised this gist Dec 1, 2019. 1 changed file with 22 additions and 10 deletions.
    32 changes: 22 additions & 10 deletions switching theme without any library.
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,11 @@
    void main() {
    runApp(const _SwitchingThemeApp(useMaterial: false));
    runApp(_SwitchingThemeApp());
    }

    class _SwitchingThemeApp extends StatefulWidget {
    const _SwitchingThemeApp({this.useMaterial = false});

    final bool useMaterial;
    /// Properties that help me keep track of the example being run.
    bool _useMaterial = false;

    class _SwitchingThemeApp extends StatefulWidget {
    @override
    _SwitchingThemeAppState createState() => _SwitchingThemeAppState();

    @@ -39,7 +38,7 @@ class _SwitchingThemeAppState extends State<_SwitchingThemeApp> {

    @override
    Widget build(BuildContext context) {
    if (widget.useMaterial) {
    if (_useMaterial) {
    return MaterialApp(
    home: _DummyPage(),
    themeMode: _themeMode,
    @@ -68,20 +67,33 @@ class _SwitchingThemeAppState extends State<_SwitchingThemeApp> {
    class _DummyPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    final theme = CupertinoTheme.of(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: theme.scaffoldBackgroundColor,
    color: background,
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    const Text(
    Text(
    "My color will change depending on the theme",
    style: messageStyle,
    textAlign: TextAlign.center,
    ),
    Switch.adaptive(
    value: theme.brightness == Brightness.dark,
    value: brightness == Brightness.dark,
    onChanged: (enable) {
    _SwitchingThemeApp.updateTheme(
    context,
  2. bitsydarel created this gist Dec 1, 2019.
    97 changes: 97 additions & 0 deletions switching theme without any library.
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    void main() {
    runApp(const _SwitchingThemeApp(useMaterial: false));
    }

    class _SwitchingThemeApp extends StatefulWidget {
    const _SwitchingThemeApp({this.useMaterial = false});

    final bool useMaterial;

    @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 (widget.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) {
    final theme = CupertinoTheme.of(context);

    return SafeArea(
    child: Container(
    color: theme.scaffoldBackgroundColor,
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    const Text(
    "My color will change depending on the theme",
    textAlign: TextAlign.center,
    ),
    Switch.adaptive(
    value: theme.brightness == Brightness.dark,
    onChanged: (enable) {
    _SwitchingThemeApp.updateTheme(
    context,
    enable ? ThemeMode.dark : ThemeMode.light,
    );
    },
    )
    ],
    ),
    ),
    );
    }
    }