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

hc2pp10m 于 2022-01-10 发布在 Flutter

关注(0)|答案(1)|浏览(272)

我尝试更改应用程序中所有页面的背景色。用户可以从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,
                    ),
                  ),
                ),
              ),
            ),
          ),

我有背景色列表。

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'))),

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

flutter

来源：https://stackoverflow.com/questions/75284853/how-to-apply-background-color-all-pages-in-flutter

1条答案

按热度按时间

bvn4nwqk1#

这样做不起作用的原因是你之前的页面在背景颜色改变时不会通知你。首先定义一个新的类，命名为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,
  ...
)

此外，不要忘记将主MaterialApp与ChangeNotifierProvider打包，以便在应用的每个页面中访问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);
  });
},

赞(0）回复(0）举报 2023-01-31

我来回答

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

1条答案

相关问题

热门标签

最新问答