flutter小技巧 - 实现app主题灰色

350 阅读1分钟

app在一些特殊时间节点需要灰色主题,比12月13日的如南京大屠杀纪念日,7月7日的卢沟桥纪念日,等等,flutter如何快速实现这个需求呢。

线看效果第一张默认效果,第二是灰色效果

image.png

image.png

代码实现:在main入口配置代码如下

@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,
          ),
        );
}