Flutter – Implement Light Mode and Dark Mode

  In this article, we are working on the light theme and dark theme in the flutter application. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

Adding material package that gives us the essential functions and calls the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
  runApp(RunMyApp());
}

Step 3: Creating Stateful Widget

Now we have to make a Stateful widget because our application goes to change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
      return MaterialApp();
  }
}

Step 4: Creating Scaffold Widget

Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. 

home: Scaffold(
  appBar: AppBar(
      title: Text('Always Light Theme'),
  ),
  body: Center(child:Text('GeeksforGeeks'));
),

Always Light Theme Mode

Now move back to adding the theme in the MaterialApp, MaterialApp allows to set of the theme, then the theme further takes the Theme Data, Then using primary Swatch gives it color.

theme: ThemeData(primarySwatch: Colors.green),  

Code

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // making the light theme with color green
      theme: ThemeData(primarySwatch: Colors.green),

      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Always Dark  Mode'),
        ),
        body: Center(
          child: Text('Geeks for Geeks'),
        ),
      ),
    );
  }
}

Output:

Always Dark Theme Mode

Now for making the Dark theme just add another parameter in the MaterialApp called darkTheme, which takes the themeData.dark.

darkTheme: ThemeData.dark(), // standard dark theme

Code

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),

      // standard dark theme
      darkTheme: ThemeData.dark(),

      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Always Dark  Mode'),
        ),
        body: Center(
          child: Text('Geeks for Geeks'),
        ),
      ),
    );
  }
}

Output:

Device Controlled Theme Mode

Now again to make the system-controlled theme mode, you need to add another parameter in the MaterialApp called themeMode.

themeMode: ThemeMode.system,

Code

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),

      // standard dark theme
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Controlled theme Mode'),
        ),
        body: Center(
          child: Text('Geeks for Geeks'),
        ),
      ),
    );
  }
}

Output:

User-Controlled Theme Mode

Step by Step Implementation 

First, you need to make two buttons in the body of the application so that we can switch between the themes. And call the method changeTheme with the parameter ThemeMode.

ElevatedButton(
                onPressed: () {
                        changeTheme(ThemeMode.light);
                      },
                      child: Text('Light theme')),
                  ElevatedButton(
                      onPressed: () {
                        changeTheme(ThemeMode.dark);
                      },
                      child: Text('Dark theme')),

Now we have to make the new variable and then define the method.

ThemeMode _themeMode = ThemeMode.system;
  void changeTheme(ThemeMode themeMode) {
    setState(() {
      _themeMode = themeMode;
    });
  }

 Code

Dart

import 'package:flutter/material.dart';

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

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  ThemeMode _themeMode = ThemeMode.system;
  void changeTheme(ThemeMode themeMode) {
    setState(() {
      _themeMode = themeMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),

      // standard dark theme
      darkTheme: ThemeData.dark(),
      themeMode: _themeMode,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Controlled theme Mode'),

        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Choose your theme:',
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [

                  // Change theme & rebuild to
                  // show it using these buttons
                  ElevatedButton(
                      onPressed: () {
                        changeTheme(ThemeMode.light);
                      },
                      child: Text('Light theme')),
                  ElevatedButton(
                      onPressed: () {
                        changeTheme(ThemeMode.dark);
                      },
                      child: Text('Dark theme')),

                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: