Question

在此应用中，有三个不同的主题-红色，黑色和白色。用户可以从主屏幕导航到主题屏幕，在该屏幕上，他们可以选择特定主题。我想使用一种方法，该方法将使用类或函数来返回ThemeData并将其发送到theme:中MaterialApp的{{1}}中。

这是有效的方法吗？如果是，那么我可以得到有关如何在main.dart上正确设置主题的指南。如果没有，请问我如何在这个应用程序中设置三个主题。

这是我试图作为构造函数传递并设置特定背景主题颜色的类：

MaterialApp

这是选择主题的按钮（这只是一个按钮，但假设还有两个按钮可以设置黑白主题）：

class ThemeChooser extends StatelessWidget {
  static int color;
  ThemeData data = ThemeData(scaffoldBackgroundColor: Color(color));
  ThemeChooser({color});
  @override
  Widget build(BuildContext context) {
    return ThemeChooser(color: color,);
  }
}

这是使用FlatButton( onPressed: ()async { final result = await Navigator.push( context, MaterialPageRoute( builder: (context) => ThemeScreen(), )); setState(() { setThemeRed(redcolor); }); }, child: Padding( padding: const EdgeInsets.only(top: 40, left: 8), child: whitefontstyle(text: "Red", size: 50,), ) ),中的构造函数设置主题的方法（我只是将设置删除为红色的主题atm。）：

ThemeChooser

这是主要方法：


int color;

setThemeRed(int color){
  return ThemeChooser(color: redcolor,);
}

Answer 1

每次更改主题时，您都必须重建材质应用程序。因此，您可以使用BLoC来做到这一点。

class ThemeBloc{
   final _themeController = StreamController<ThemeData>.broadcast();
   Sink<ThemeData> get inputter => _themeController.sink;
   Stream<ThemeData> get outputter => _themeController.stream;

  ThemeBloc(){
  // when the app loads put the initial themeData that 
  //you want to show
   inputter.add(initialThemeData); 
   }

   //use this to dispose the controller whenever the app gets closed
   void dispose(){
      _themeController.close();
   }

}

现在使用StreamBuilder包装MaterialApp，

  ThemeBloc _bloc = ThemeBloc();
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<ThemeData>(
      stream: bloc.outputter,
      initialData: defaultThemeData,
      builder: (context, snapshot) => MaterialApp(
            home: ToDoList(),
            theme: snapshot.data,// this is the themeData that we're getting from the 
                                 //stream
          ),
    );
  }

现在如何更改主题？

  //let's say we have a button that would change the theme,
  RaisedButton(){
    onPressed: (){
    inputter.add(redTheme); // redTheme is a ThemeData that you must give,
    },
    child: Text("Enable Red Theme")
  }

我还没有测试代码，但是应该可以！

如何使用3种不同的主题更改整个应用的主题（Flutter）

1 个答案: