时间戳

首页 > 解决方案 > 按下按钮时如何更改颤动主题颜色

flutter - 按下按钮时如何更改颤动主题颜色

问题描述

我正在尝试制作一个具有动态主题颜色的应用程序，我的想法是当用户点击一个按钮时，应用程序的某些部分（按钮、appbar、themeData ...）会发生变化。但我不知道该怎么做，我尝试了一些 if 条件，静态变量....但没有任何效果，知道怎么做吗？

我想为应用程序放置 3 个不同的主题，这是我放置应用程序主题的主文件：

void main() {
  runApp(CharlotApp());
}

class CharlotApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Fluttter colors',
        theme: ThemeData(
          primaryColor: MyTheme.kPrimaryColor,
          accentColor: MyTheme.kAccentColor,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: SplashScreen());
  }
}

标签： flutterdart

解决方案

您可以使用此链接上共享的相同方法：

final _themeGlobalKey = new GlobalKey(debugLabel: 'app_theme');

class AppTheme extends StatefulWidget {

  final child;

  AppTheme({
    this.child,
  }) : super(key: _themeGlobalKey);

  @override
  AppThemeState createState() => new AppThemeState();
}

class AppThemeState extends State<AppTheme> {

  ThemeData _theme = DEV_THEME;

  set theme(newTheme) {
    if (newTheme != _theme) {
      setState(() => _theme = newTheme);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new ThemeChanger(
      appThemeKey: _themeGlobalKey,
      child: new Theme(
        data: _theme,
        child: widget.child,
      ),
    );
  }
}

class ThemeChanger extends InheritedWidget {

  static ThemeChanger of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ThemeChanger);
  }

  final ThemeData theme;
  final GlobalKey _appThemeKey;

  ThemeChanger({
    appThemeKey,
    this.theme,
    child
  }) : _appThemeKey = appThemeKey, super(child: child);

  set appTheme(AppThemeOption theme) {
    switch (theme) {
      case AppThemeOption.experimental:
        (_appThemeKey.currentState as AppThemeState)?.theme = EXPERIMENT_THEME;
        break;
      case AppThemeOption.dev:
        (_appThemeKey.currentState as AppThemeState)?.theme = DEV_THEME;
        break;
    }
  }

  @override
  bool updateShouldNotify(ThemeChanger oldWidget) {
    return oldWidget.theme == theme;
  }

}

在您想更改主题的其他班级

setState(() {
    ThemeChanger.of(context).appTheme = appThemeLight;
  });

推荐阅读