Search code examples
flutterflutter-theme

Flutter How to set onPressed to change ThemeData?


I want to change the theme to dark theme & return to light theme with this button:

IconButton(

       icon: Icon(
        Icons.brightness,
        ),
       onPressed: () {
       setState(() {
       // Change to dark theme?
        } else {
       //Change it back to default light theme //How?
  }
}
);

Main.dart

MaterialApp(

  theme: ThemeData(
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),

Solution

  • first is set to condition in your material theme (may be you define this is in main class)

    import 'dart:async';
    import 'package:flutter/material.dart';
    
    StreamController<bool> setTheme = StreamController();
    
    main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return StreamBuilder<bool>(
            initialData: true,
            stream: setTheme.stream,
            builder: (context, snapshot) {
              return MaterialApp(
                  theme: snapshot.data ? ThemeData.light() : ThemeData.dark(),
                  debugShowCheckedModeBanner: false,
                  home: Scaffold(
                      appBar: AppBar(title: Text("Your Theme")),
                      body: YourButtonPage()));/*Change this name with Your class*/
            });
      }
    }
    
    class YourButtonPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  IconButton(
                      icon: Icon(
                        Icons.brightness_low,
                        size: 21,
                      ),
                      alignment: Alignment.center,
                      onPressed: () {
                        setTheme.add(true);
                      }),
                  IconButton(
                      icon: Icon(
                        Icons.brightness_1,
                        size: 21,
                      ),
                      alignment: Alignment.center,
                      onPressed: () {
                        setTheme.add(false);
                      }),
                ])));
      }
    }