flutter一行代码实现app主题灰色_让app灰色代码-CSDN博客

本文链接：https://blog.csdn.net/qq_36237165/article/details/130932836

文章展示了如何在Flutter应用中通过ColorFiltered组件应用矩阵滤镜实现灰色主题模式。在主入口的build方法中，使用一个布尔值控制是否包裹ColorFiltered，以切换正常和灰色主题。同时，详细配置了BottomNavigationBar的样式和交互逻辑。

摘要由CSDN通过智能技术生成

利用组件ColorFiltered的滤镜效果实现。

在main入口的build使用ColorFiltered包裹设置颜色值，如果不用灰色主题就不包裹，用个布尔值控制是否包裹。

@override
Widget build(BuildContext context) {
  return showGreyMode

      ///灰色主题模式
      ? ColorFiltered(
          colorFilter: const ColorFilter.matrix(<double>[
            0.2126,
            0.7152,
            0.0722,
            0,
            0,
            0.2126,
            0.7152,
            0.0722,
            0,
            0,
            0.2126,
            0.7152,
            0.0722,
            0,
            0,
            0,
            0,
            0,
            1,
            0,
          ]),
          child: Scaffold(
            body: IndexedStack(
              children: mainLogic.body,
              index: mainLogic.selectedIndex,
            ),
            bottomNavigationBar: BottomNavigationBar(
              //设置底部按钮排序样式
              type: BottomNavigationBarType.fixed,
              //设置点击状态颜色
              fixedColor: Colors.red,
              //设置没有被点击到状态颜色
              unselectedItemColor: Colors.black,
              //底部按钮集合
              items: mainLogic.getItems,
              onTap: (int index) {
                setState(() {
                  mainLogic.selectedIndex = index;
                });
              },
              currentIndex: mainLogic.selectedIndex,
            ),
          ),
        )

      ///正常主题模式
      : Scaffold(
          body: IndexedStack(
            children: mainLogic.body,
            index: mainLogic.selectedIndex,
          ),
          bottomNavigationBar: BottomNavigationBar(
            //设置底部按钮排序样式
            type: BottomNavigationBarType.fixed,
            //设置点击状态颜色
            fixedColor: Colors.red,
            //设置没有被点击到状态颜色
            unselectedItemColor: Colors.black,
            //底部按钮集合
            items: mainLogic.getItems,
            onTap: (int index) {
              setState(() {
                mainLogic.selectedIndex = index;
              });
            },
            currentIndex: mainLogic.selectedIndex,
          ),
        );
}