在Flutter中在ThemeData中添加自定义颜色的位置

时间:2020-03-16 20:20:37

标签: flutter dart

我是一个初学者,直到最近才开始学习Flutter。

在网上搜索了很长时间之后,我终于找到了一个说明如何添加动态主题转换器的教程。

现在这可以完美工作-但是我仍然不知道应该在何处以及如何添加自定义颜色(例如

primaryColor: Colors.white, accentColor: Colors.green,

在ThemeData中。

我将在下面发布我的代码,请帮助我。

main.dart
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return ChangeNotifierProvider<ThemeChanger>(
      create: (_) => ThemeChanger(ThemeData.light()),
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: theme.getTheme(),
      home: MdLayout(),
    );
  }
}

theme.dart
class ThemeChanger with ChangeNotifier{
  ThemeData _themeData;

  ThemeChanger(this._themeData);

  getTheme() => _themeData;

  setTheme(ThemeData theme) {
    _themeData = theme;

    notifyListeners();
  }
}

theme_switch_state.dart
class ThemeSwitchState extends State {
  bool switchControl = false;

  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      Transform.scale(
          scale: 1.5,
          child: Switch(
            onChanged: toggleSwitch,
            value: switchControl,
            activeColor: Colors.blue,
            activeTrackColor: Colors.grey,
            inactiveThumbColor: Colors.green,
            inactiveTrackColor: Colors.white,
          )),
    ]);
  }

  void toggleSwitch(bool value) {
    ThemeChanger _themeChanger = Provider.of<ThemeChanger>(context, listen: false);

    if (switchControl == false) {
      setState(() {
        switchControl = true;
      });
      print('Theme is Dark');

      // Put your code here which you want to execute on Switch ON event.
      _themeChanger.setTheme(ThemeData.dark());

    } else {
      setState(() {
        switchControl = false;
      });
      print('Theme is Light');

      // Put your code here which you want to execute on Switch OFF event.
      _themeChanger.setTheme(ThemeData.light());
    }
  }
}

1 个答案:

答案 0 :(得分:0)

如果构造普通的ThemeData类,则可以放入太多属性。例如,ThemeData(primaryColor: Colors.red),但是如果您使用诸如ThemeData.light()之类的命名构造函数,则Flutter会为标准浅色主题设置所有默认值,ThemeData.dark()也是如此。因此,您可以做的是使用copyWith()方法某种程度上覆盖默认值ThemeData.light().copyWith(primaryColor: Colors.white, accentColor: Colors.green,)