How to Create a Multi-Theme App with Flutter

How to Create a Multi-Theme App with Flutter

Quick Summary: Creating a Multi-Theme App with Flutter opens up creative possibilities for mobile app development. Flutter's flexibility allows developers to implement dynamic theming, empowering users to personalize their app's appearance. In this article, we'll explore the steps and best practices for building a multi-theme app, offering users a customized and engaging experience.


In the world of mobile app development, user experience plays a pivotal role in determining the success of an application. One aspect of user experience that often gets overlooked is the choice of themes. Themes not only define the aesthetics of your app but can also greatly impact user engagement and satisfaction. Flutter, Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, provides an excellent platform for creating apps with dynamic theme-switching capabilities. In this article, we'll explore how to create a multi-theme Flutter app and demonstrate how to toggle between light and dark themes dynamically.


Before we dive into creating our multi-theme Flutter app, make sure you have the following prerequisites in place:

Flutter Installed: Ensure you have Flutter installed on your development machine. You can download and set it up by following the instructions on the official Flutter website.

Flutter Editor: Use your preferred code editor or IDE for Flutter development. Popular choices include Visual Studio Code, Android Studio, and IntelliJ IDEA.

Hire Flutter Developers

Setting Up a New Flutter Project

Let's start by creating a new Flutter project. Open your terminal and run the following commands:

This will create a new Flutter project named multi_theme_app.

Defining Themes

To create a multi-theme Flutter app, you'll want to define multiple themes. For this example, we'll create a light theme and a dark theme. You can customize these themes as per your app's requirements.

In your project directory, open the lib/main.dart file. Replace the default code with the following:

import 'package:flutter/material.dart';

void main() {



class MyApp extends StatefulWidget {


  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> {

  ThemeData _currentTheme = ThemeData.light();

  void _toggleTheme() {

    setState(() {

      _currentTheme =

          _currentTheme == ThemeData.light() ? ThemeData.dark() : ThemeData.light();




  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Multi-Theme App',

      theme: _currentTheme,

      home: Scaffold(

        appBar: AppBar(

          title: Text('Multi-Theme App'),


        body: Center(

          child: Column(


            children: <Widget>[


                'Welcome to Multi-Theme App!',

                style: TextStyle(fontSize: 20),


              SizedBox(height: 20),


                onPressed: _toggleTheme,

                child: Text('Toggle Theme'),









In this code:

We've defined a MyApp class that extends StatefulWidget.

Inside the _MyAppState class, we've defined _currentTheme to hold the current theme and _toggleTheme to switch between light and dark themes dynamically.

In the build method, we use _currentTheme to set the theme for our app.

We've added a button labeled "Toggle Theme" that calls _toggleTheme when pressed.

Running the App

Now that we've set up our multi-theme app, it's time to run it. In your terminal, navigate to the project directory and use the following command:

This will start your app in debug mode on an emulator or physical device. You should see the "Welcome to Multi-Theme App!" text along with a "Toggle Theme" button in the app.

Testing the Theme Switching

To test the theme-switching functionality, simply press the "Toggle Theme" button, and you'll see the app switch between light and dark themes dynamically. This is achieved by updating the _currentTheme variable and calling setState() to trigger a rebuild of the widget tree.

Customizing Themes

To make your multi-theme app truly unique, you can customize the light and dark themes further. Flutter provides extensive theming options, allowing you to define custom colors, fonts, and more for each theme. You can do this by modifying the ThemeData objects in the _MyAppState class.


Creating a multi-theme app with Flutter and implementing dynamic theme switching is a great way to enhance the user experience and provide users with a more personalized and visually pleasing interface. Flutter's flexibility and ease of use make it an excellent choice for building such apps, allowing you to create themes that match your app's branding or user preferences seamlessly. With this knowledge, you can now embark on creating versatile and visually appealing Flutter applications. Happy coding!

Remote Team

Vanshaj Gupta

Vanshaj Gupta

A passionate mobile app developer specializing in Android and hybrid platforms, dedicated to crafting seamless user experiences. With a love for all things mobile, I bring hands-on experience in developing cutting-edge applications that not only meet industry standards but also push the boundaries of what's possible in the mobile world.