Posted in Dart Flutter

Flutter – How to Switch Dark/Light Theme and Primary Color of App

Flutter – How to Switch Dark/Light Theme and Primary Color of App Posted on May 15, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Are you adding switching of theme brightness and color feature on your app without much coding? Then have a look at the example below. The outputs of this example are:

green color themeblue color themedark color theme

To achieve this feature, you can use dynamic_theme Flutter package. Install it by adding the following line in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  dynamic_theme: ^1.0.1

main.dart file

import 'package:dynamic_theme/dynamic_theme.dart';
import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new DynamicTheme(
      //return Dynamic Theme here
      defaultBrightness: Brightness.light,
      //set default theme to light

      data: (brightness) => new ThemeData(
          primarySwatch: Colors.lightBlue,
          //set primary theme color to orange.

          brightness: brightness,
      ),

      themedWidgetBuilder: (context, theme) {
        return new MaterialApp(
          title: 'Switch Theme',
          theme: theme, 
          //set theme returned by themeWidgetBuilder

          home: Home(),
        );
      }
    );
  }
}

home.dart file where Home() class is defined.

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

class Home extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {

    void changeTheme(){
        if(Theme.of(context).brightness == Brightness.dark){
           DynamicTheme.of(context).setBrightness(
               Brightness.light //if current theme is dark then set to light
            );
        }else{
            DynamicTheme.of(context).setBrightness(
               Brightness.dark //if current theme is not dark then set to dark
            );
        }
    } //set this function inside Widget build, because we use context here.

    void changeColor(){
        Color primarycolor;
        if(Theme.of(context).primaryColor == Colors.lightBlue){
            primarycolor = Colors.lightGreen; //if color is lighblue then set primarycolor to lightgreen
        }else{
            primarycolor = Colors.lightBlue; //if color is not lightblue then set to lightgreen  
        }

        DynamicTheme.of(context).setThemeData(new ThemeData(
            primaryColor: primarycolor  //set primary color
        ));
    } //set this function inside Widget build, because we use context here.

    return Scaffold(
        
        appBar: AppBar(
          title:Text("Switch Theme"),
          brightness: Brightness.dark,
        ),//set appbar

        drawer: Drawer(),//set drawer

        floatingActionButton: FloatingActionButton(
          onPressed: (){},
          child: Icon(Icons.add),
        ), //set floating action button

        body: Container( 
            padding: EdgeInsets.all(40),
            child: Center( 
              child: Column(
                children:<Widget>[

                  RaisedButton( 
                      onPressed:(){
                         changeTheme(); 
                         //call change theme function
                      },
                      color:Colors.deepOrangeAccent, 
                      colorBrightness: Brightness.dark,
                      child: Text("Switch Theme"),
                 ),

                 RaisedButton( 
                      onPressed:(){
                          changeColor();
                      },
                      color:Colors.deepOrangeAccent, 
                      colorBrightness: Brightness.dark,
                      //backgound color of button is darker color
                      //therefore we set brightness to dark
                      child: Text("Switch  Theme Color"),
                 ),
              ])
            ),
        )
    );
  } 
}

See the example above, there are two functions changeTheme() and changeColor() to change theme or color. You can define this function in your code according to your feature.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

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