Question 203270 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter more then one ThemeData

I’ve this Flutter code with Two Widget. A widget with a MaterialApp and one ThemeData that call a stateless widget with one button.
I want to have more than one ThemeData and change between them with the button.
Is possible?

Thanks

import 'package:flutter/material.dart';

void main() {
  runApp(const MyWidget());
}


class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          fontFamily: 'Roboto',
          appBarTheme: AppBarTheme(
            color: Colors.green
          ),
          primaryColor: Colors.deepOrangeAccent,
          textTheme: const TextTheme(
            displayLarge:
                TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
            titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
            bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
          ),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Custom Theme App'),
      ),
      body: Center(
          child: ElevatedButton(
              onPressed: () {
              },
              child: const Text('Theme Button'),
          ),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Solution 1 :

    Yes, it is possible to have multiple ThemeData instances and change between them using a button in your Flutter application. You will need to use Provider state management for that.

    reference :

    How to Create Multiple Themes in Flutter Application?

    Solution 2 (Optional) :

    If you want to switch between light mode and dark mode, you can follow this example:

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(), // Default theme
      darkTheme: ThemeData.dark(), // Additional theme
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isDarkMode = false;

  void toggleTheme() {
    setState(() {
      isDarkMode = !isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Example'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: toggleTheme,
          child: Text('Toggle Theme'),
        ),
      ),
      theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Here is a small example of how you can create and use multiple themes, using the provider package.

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

void main() => runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => ThemeManager())
    ],
    child: const MyApp(),
  ),
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: context.watch<ThemeManager>().currentTheme,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              //Change Theme
              context.read<ThemeManager>().switchTheme(AppThemes.redTheme);
            },
            child: const Text('Switch Theme'),
          ),
        ),
      ),
    );
  }
}


class ThemeManager extends ChangeNotifier {
  ThemeData _currentTheme = AppThemes.greenTheme; //Default theme
  ThemeData get currentTheme => _currentTheme;

  void switchTheme(ThemeData theme) {
    _currentTheme = theme;
    notifyListeners();
  }

}

class AppThemes {
  AppThemes._();

  static ThemeData redTheme = ThemeData(
    primarySwatch: Colors.red
    //..
    //your theme codes
    //..
  );
  
  static ThemeData amberTheme = ThemeData(
    primarySwatch: Colors.amber
    //..
    //your theme codes
    //..
  );
  
  static ThemeData greenTheme = ThemeData(
    primarySwatch: Colors.green
    //..
    //your theme codes
    //..
  );
}

    You can save the selected theme and perform read operations later using the shared_preferences package. To do this, you need to follow a slightly different approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search