更改已在 Flutter dart 中通过应用程序设置的颜色答案

【问题标题】：Change colors already set through out the app in flutter dart更改已在 Flutter dart 中通过应用程序设置的颜色
【发布时间】：2021-07-12 20:37:38
【问题描述】：

我的应用项目中有一个 colors.dart 文件，我在其中将颜色分配给一个变量并在整个应用程序中使用，但问题是我似乎无法更改它，如果我想要

import 'package:flutter/material.dart';

var errorRed = Color(0xFFE84118).withOpacity(0.9);
var successC = Color(0xff62d770);
var primary = Color(0xFFCC002F);
var nBlack = Colors.black87;
var green = Colors.green;
var white = Colors.white;
var grey = Colors.grey;
var red = Colors.red;

在我的应用程序中，我只是设置了一种颜色，如 color: primary, 但现在我希望我的用户能够根据需要更改颜色。我曾尝试使用共享首选项来存储十六进制颜色值，然后转换为颜色，但它不起作用

Color hexToColor(String value) {
   String coloV = gShared(value);
   return Color(int.parse(coloV.substring(1, 7), radix: 16) + 0xFF000000);
 }

sShared(String key, String value) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return await prefs.setString(key, value);
}

Future<String> gShared(String key) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString(key);
}


///So i saved the color like
await sShared("U_PRI", "0xFF00CC2F");

///and then tried setting it to the variable
var primary = hexToColor(gShared("U_PRI)) ?? Color(0xFFCC002F); // didn't work at all

请问有没有更好的方法来管理我的颜色，以便可以在整个应用程序中使用它，因为如果我尝试使用 themeData 更改颜色，某些部分不会改变，因为我已经为它分配了颜色。

【问题讨论】：

标签： android flutter dart colors sharedpreferences

【解决方案1】：

当您更改小部件所依赖的颜色对象时，您需要确保其他小部件也被重建。我不知道这个解决方案是否规模很大，但是改变应用程序主题的一个好的解决方案是在你的应用程序上方创建一个“主题管理器”。这个主题管理器基本上只是使用您想要设置的任何主题重新构建应用程序。像这样的

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ThemeManager();
  }
}

class ThemeManager extends StatefulWidget {
  ThemeManager({Key? key}) : super(key: key);

  @override
  _ThemeManagerState createState() => _ThemeManagerState();

  static _ThemeManagerState? of(BuildContext context) {
    return context.findAncestorStateOfType<_ThemeManagerState>();
  }
}

class _ThemeManagerState extends State<ThemeManager> {
  ThemeData _theme = ThemeData();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _theme,
      debugShowCheckedModeBanner: false,
      home: Menu(),
    );
  }

  void changeTheme(ThemeData newTheme) {
    _theme = newTheme;
    setState(() {});
  }
}

当你想改变你调用的主题时

ThemeManager.of(context).changeTheme(newTheme);

旁注：如果您不想更改整个主题，或者出于某种原因不想使用该主题。您可以将颜色存储在状态中并创建一个更改颜色函数，而不是调用 setState

【讨论】：