Flutter 如何设置 onPressed 来改变 ThemeData？答案

【问题标题】：Flutter How to set onPressed to change ThemeData?Flutter 如何设置 onPressed 来改变 ThemeData？
【发布时间】：2020-11-07 07:06:54
【问题描述】：

我想用这个按钮将主题更改为深色主题并返回浅色主题：

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,
  ),

【问题讨论】：

参考这段代码你会找到解决方案，github.com/zubairehman/flutter-boilerplate-project

标签： flutter flutter-theme

【解决方案1】：

首先设置为您的材料主题中的条件（可能你定义这是在主类中）

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);
                  }),
            ])));
  }
}

【讨论】：

【解决方案2】：

您可以使用themeMode 属性来选择要使用的主题。它有三个可能的值：

ThemeMode.light
ThemeMode.dark
ThemeMode.system

现在的问题是如何在按钮单击时更改它？

错误的方法
将themeMode 的值保存在一个变量中并使用该变量而不是直接设置themeMode。单击按钮时会更改状态，例如：

setState((){
    themeModeVariable = ThemeMode.dark;
});

为什么这不好？假设您的按钮位于其他地方，而不是 MaterialApp 所在的位置。走得越深，面临的问题就越多。

好方法
好吧，这个概念仍然是相同的，但是您使用状态管理解决方案来处理该问题。您可以使用Provider 或BLoC 或ReactiveX 或Stacked 或其他任何东西。

我强烈建议您先学习状态管理解决方案。检查official docs in flutter website

【讨论】：