How to Switch Dark/Light Theme and Primary Color in Flutter

Are you adding features to switch theme brightness and color on your app without much coding? Then have a look at the example below. In this example, we are going to show you the easiest way to switch the theme and primary color of your app. The outputs of this example are:

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"),
                 ),
              ])
            ),
        )
    );
  } 
}

Furthermore, you can save the changed theme on shared preference and apply it on app startup if there is any saved theme.

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.