如何在 flutter 中的所有页面应用背景颜色

Question

我尝试更改背景 colors 应用程序中的所有页面。 select 用户可以从 SettingsPage 中的调色板中选择颜色。

Wrap(
            children: List<Widget>.generate(
              mainColor.length,
              (index) => GestureDetector(
                onTap: () {
                  setState(() {
                    _selectedColor = index;
                    box.write('_selectedColor', index);
                    box.write(
                        'color0',
                        mainColor[index]
                            .toString()
                            .split('(')[1]
                            .split(')')[0]);
                  });
                },
                child: Padding(
                  padding: const EdgeInsets.all(4),
                  child: Container(
                    width: 30,
                    height: 30,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 2),
                      shape: BoxShape.circle,
                    ),
                    child: CircleAvatar(
                      // ignore: sort_child_properties_last
                      child: _selectedColor == index
                          ? const Icon(Icons.done,
                              size: 16, color: Colors.white)
                          : null,
                      backgroundColor: mainColor[index],

                      radius: 14,
                    ),
                  ),
                ),
              ),
            ),
          ),

我有背景清单 colors。

List<Color> mainColor = [
  const Color(0xffEF5350),
  const Color(0xffF44336),
  const Color(0xffBDBDBD),
  const Color(0xff9E9E9E),
  const Color(0xffEC407A),
  const Color(0xffE91E63),
];

我在其他页面中读取颜色，如下所示

backgroundColor: Color(int.parse(box.read('color0'))),

我的问题是当我导航回上一页时，颜色更改不适用。 如果我再次启动应用程序，则会应用颜色更改。

Answer 1

这不起作用的原因是您以前的页面不会在背景颜色发生变化时发出通知。 首先像这样定义新的 class 并将其命名为CustomBackground ：

class CustomBackground with ChangeNotifier {
  Color _backgroundColor = Colors.white;

  Color get backgroundColor => _backgroundColor;

  Future<void> changeBackgroundColor(Color color, GetStorage box) async {
    _backgroundColor = color;
    box.write('color0', color.toString()
                        .split('(')[1]
                        .split(')')[0]);

    notifyListeners();
  }
}

然后在您的应用中像这样使用它：

Scaffold(
      backgroundColor: Provider.of<CustomBackground>(context, listen: false).backgroundColor,
  ...
)

也不要忘记用ChangeNotifierProvider包装您的主要MaterialApp ，以便在您的应用程序的每个页面中访问您的CustomBackground ：

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<CustomBackground>(
      create: (_) => CustomBackground(),
      child: Consumer<CustomBackground>(
        builder: (context, backgroundColor, _) {
          return MaterialApp(
             ...
            },
          );
        },
      ),
    );
  }

最后将您的onTap更改为：

onTap: () {
  setState(() {
    _selectedColor = index;
    box.write('_selectedColor', index);
    Provider.of<CustomBackground>(context, listen: false).changeBackgroundColor(mainColor[index], box);
  });
},