How to Switch Between Themes in Flutter Using RadioButtons?

Flutter is an open-source UI toolkit developed and maintained by Google. It is used by big companies like Airbnb, Alibaba, and Google itself to serve billions of users around the globe. In this article, we will see how we can switch between multiple themes in our Flutter application using RadioButtons. A sample video is given below to get an idea about what we are going to do in this article.

Approach

We will create a list of ThemeData Objects which will contain all of our themes. Then using the RadioButton we can switch between the themes by changing the index of the currently active theme.

Syntax

// A variable to store the current theme index
int _themeIndex = 0;

// The function to change the value of the _themeIndex Variable
void _handleThemeChange(int? value) {
    setState(() {
          _themeIndex = value!;
    });
}

Implementation

The below example shows the implementation of the approach discussed above. There are four themes in our demo application and we can switch between the themes by selecting the corresponding RadioButton.

Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
    int _themeIndex = 0;
    final List<ThemeData> _themes = [
        ThemeData(
            primarySwatch: Colors.blue,
            scaffoldBackgroundColor: Colors.blue.shade100
        ),
        ThemeData(
            primarySwatch: Colors.red,
            scaffoldBackgroundColor: Colors.red.shade100
        ),
        ThemeData(
            primarySwatch: Colors.green,
            scaffoldBackgroundColor: Colors.green.shade100
        ),
        ThemeData(
            primarySwatch: Colors.purple,
            scaffoldBackgroundColor: Colors.purple.shade100
        ),
      ];

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
              title: 'GFG - Flutter Themes',
              theme: _themes[_themeIndex],
              home: Scaffold(
                appBar: AppBar(
                      title: const Text('GFG - Flutter Themes'),
                ),
                body: Center(
                      child: Column(
                           mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                              RadioListTile(
                                title: const Text('Blue Theme'),
                                value: 0,
                                groupValue: _themeIndex,
                                onChanged: _handleThemeChange,
                              ),
                              RadioListTile(
                                title: const Text('Red Theme'),
                                value: 1,
                                groupValue: _themeIndex,
                                onChanged: _handleThemeChange,
                              ),
                              RadioListTile(
                                title: const Text('Green Theme'),
                                value: 2,
                                groupValue: _themeIndex,
                                onChanged: _handleThemeChange,
                              ),
                              RadioListTile(
                                title: const Text('Purple Theme'),
                                value: 3,
                                groupValue: _themeIndex,
                                onChanged: _handleThemeChange,
                              ),
                        ],
                      ),
                ),
              ),
        );
      }

      void _handleThemeChange(int? value) {
        setState(() {
              _themeIndex = value!;
        });
      }
}

Output: