Tech Assist

How To Switch Between Dark and Light Theme Mode In Flutter

Flutter, One amazing thing that most applications do these days is to give their users the ability to switch from dark Mode to light mode on their application. Flutter also gives this feature, as it makes it even easier to code up than other platforms. Lots of apps like Facebook, Twitter, Google, Snapchat, Instagram, and many other prolific and popular apps out there have this feature, as it allows their users to change their bright light mode to a dim dark mode, which makes your app more dynamic and flexible.

Giving smartphone users the alternative to switch among light mode to dark mode has become another need to create an amazing application. Sooner or later, you may see it needful to implement it in any of your Flutter application either for your own app, or a client app. Giving all the kudos to Flutter, we have a very easy solution to the problem of Dark and Light theming

How do we do this? We can solve the Dark & Light Mode switching in Flutter using the DynamicTheme package. Just follow the step-by-step guide that would be listed below, and see how you can make an amazing Switch from Light to Dark mode, and vice-versa.

Flutter Packages Needed

Visit pub.dev to get these packages.

  • Dynamic Theme (dynamic_theme)

Install the DynamicTheme Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the dynamic_theme package below your dependency, the same way it is shown below.

dependencies:
  flutter:
    sdk: flutter
  dynamic_theme: ^recent version

Import the DynamicTheme package & Apply the code

Firstly, import your DynamicTheme and Material package to your page, See an example below of how you can use the Theme Switching in your App.

import 'package:dynamic_theme/dynamic_theme.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => ThemeData(
              brightness: brightness,
              //rest of the themeData
              //you can also use conditioning here based on the current
              //brightness mode (dark or light). For ex:
              // primarySwatch: brightness == Brighness.dark ? Colors.white : Colors.black
            ),
        themedWidgetBuilder: (context, theme) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Theme Switch Example',
            theme: theme,
            home: HomeScreen(),
          );
        });
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key key}) : super(key: key);

  void themeSwitch(context) {
    DynamicTheme.of(context).setBrightness(
        Theme.of(context).brightness == Brightness.dark
            ? Brightness.light
            : Brightness.dark);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch My Theme'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            themeSwitch(context);
          },
          child: Text(Theme.of(context).brightness == Brightness.dark
              ? 'Show Light Mode'
              : 'Show Dark Mode'),
          //we can at any point check the current brightness mode (dark or light)
          // using Theme.of(context).brightness
        ),
      ),
    );
  }
}

Output

The image below would be the output of your code after running and displaying it on a device or emulator. The RaisedButton at the center does the switching. You may decide not to use a button (your choice), Some may use a Radio Button, while some would use a toggle button. All comes back to one purpose, and that’s switching your theme from a Dark Mode to a Light Mode or from Light Mode to a Dark mode.

Attributes

KEYDESCRIPTION
textThe main text you display
textColorThe default color of the text without links
themeSwitchThe method for your context
RaisedButtonThe Botton at the center
textAlignTextAlign value. (default: TextAlign.start)

And that’s how you can code up your application to be able to switch from Light Mode to dark, and from Dark to light mode. For more documentation, Go through the README menu of dynamic_theme in Pub.dev.

CL!CK HERE TO READ THE DOWNLOAD GUIDE AFTER DOWNLOADING THE FILE

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.