How to create different themes for your Flutter app

Flutter is a powerful framework that allows developers to build beautiful and engaging cross-platform mobile applications. One of the most convenient functionalities in modern apps is switching between different themes, such as light and dark modes. This gives an app the ability to adapt according to user's preferences and demands.

Creating themes in Flutter

In Flutter, themes are defined using the ThemeData class, which is a part of the materials package in Flutter. The ThemeData class contains properties like primary and accent colors, font styles, and other visuals in your app.

Moreover, the ThemeData class can be used to create multiple themes for your application, which can then be switched between each other to create distinct visual styles for adaptability.

Here's how you can initialize different themes for your app using the ThemeData class

import 'package:flutter/material.dart';
// Light theme data
final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  accentColor: Colors.blueAccent,
  brightness: Brightness.light,
  // Add other properties like textTheme, buttonTheme, etc. as needed.
);
// Dark theme data
final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.grey,
  accentColor: Colors.grey,
  brightness: Brightness.dark,
  // Add other properties like textTheme, buttonTheme, etc. as needed.
);

Defining two themes for our Flutter app

Here, we can see that we have defined two different themes for our application using the ThemeData class. Both these themes have different attributes in terms of accent colors, brightness, etc.

The primarySwatch refers to the primary color of the app.
The accentColor attributes help specify the accent color used in various UI components.
The brightness attribute helps to specify the brightness mode in our app.

Adding themes to your Flutter app

Now that we have successfully created two themes, we can easily import and use these themes in our Flutter app. And in order to switch between these two themes, while the app is running, we will use a Switch widget.

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

class ThemeSwitcher extends StatefulWidget {
  @override
  _ThemeSwitcherState createState() => _ThemeSwitcherState();
}

class _ThemeSwitcherState extends State<ThemeSwitcher> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _isDarkMode ? darkTheme : lightTheme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Theme Switcher'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Toggle the switch to change the theme:',
              ),
              Switch(
                value: _isDarkMode,
                onChanged: (value) {
                  setState(() {
                    _isDarkMode = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Using Themes in our app

Code explanation

In the main.dart, we call our themeSwitcher page that includes the functionality to change its theme according to the user's preference.

Lines 1–3: We import the necessary libraries that would be used in this class, such as the material.dart package and the themes.dart file that we created earlier.
Lines 14–17: Inside the build method of our ThemeSwitcher widget we return a Material app and specify its theme according to the _isDarkMode bool variable. If this variable is true we set the theme to dark and if it's false we set the light theme for our app.
Lines 24–32: We set up a Toggle switch widget that is used to switch the theme of our MaterialApp. This allows the user to interchange the theme of our app accordingly.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources