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

聊天室

我是一个初学者,直到最近才开始学习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());
    }
  }
}
费德里克·乔纳森(Federick Jonathan)

如果构造普通的ThemeData类,则可以放入很多属性。例如,ThemeData(primaryColor: Colors.red)但是,如果您使用类似的命名构造函数ThemeData.light(),Flutter会为标准light主题放置所有默认值,ThemeData.dark()因此,您可以使用copyWith()方法对某种默认值进行覆盖ThemeData.light().copyWith(primaryColor: Colors.white, accentColor: Colors.green,)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Flutter中向ListTile添加自定义波纹效果颜色

来自分类Dev

Flutter-在ThemeData中使用自定义颜色和主题

来自分类Dev

在 MacOS Sierra 中添加自定义 vim 颜色方案

来自分类Dev

R Plotly中的自定义颜色

来自分类Dev

自定义Gnuplot中的颜色范围

来自分类Dev

在ant中自定义AnsiColorLogger的颜色?

来自分类Dev

自定义ggplot中图表的颜色

来自分类Dev

Wordpress中的自定义颜色选项

来自分类Dev

在PhpStorm中设置自定义颜色

来自分类Dev

在flextable中自定义标题的颜色?

来自分类Dev

如何在Xcode故事板颜色选择器中添加自定义颜色?

来自分类Dev

在Python中自定义颜色条(截断并添加更多颜色)

来自分类Dev

如何在Word中向“主题颜色”添加和保存自定义颜色?

来自分类Dev

在vuetify 2中添加标题槽以自定义数据表中的标题颜色

来自分类Dev

选择自定义订单中的位置

来自分类Dev

Flutter中的自定义按钮

来自分类Dev

Flutter中的自定义BottomNavigationBar

来自分类Dev

在Flutter中自定义DateRangePicker

来自分类Dev

在颜色栏中自定义颜色MATLAB

来自分类Dev

在颜色栏中自定义颜色MATLAB

来自分类Dev

如何在Flutter中自定义Slider小部件的拇指颜色?

来自分类Dev

如何在 Flutter 中为自定义画家的颜色设置动画?

来自分类Dev

QScintilla-为自定义词法分析器中的单词添加颜色

来自分类Dev

如何在Java中将自定义颜色添加到数组中?

来自分类Dev

在自定义配置中添加Intellisense

来自分类Dev

在fosuserbundle中添加自定义字段

来自分类Dev

在qmake中添加自定义目标

来自分类Dev

在Xamarin中添加自定义字体

来自分类Dev

在actionSheetController中添加自定义内容

Related 相关文章

热门标签

归档