记录解决因elevation引起的颜色偏红UI问题

136 阅读1分钟

APP页面经历了多个版本迭代,不知是Flutter哪个插件更新版本导致了部分UI颜色偏红!如下图:

滚动前的导航栏(AppBar):

滚动前的导航栏.png

向上滚动后的导航栏(AppBar):

滚动后的导航栏.png

PopupMenuButton UI底色偏红

PopupMenuButton.png

AlertDialog

AlertDialog.png

解决方案: 在main.dart文件中给MaterialAppGetMaterialApp设置themedarkTheme,此处以GetMaterialApp为例 1)导航栏处理:

runApp(
      GetMaterialApp(
      	  theme: ThemeData(
          appBarTheme: AppBarTheme(
              backgroundColor: Colors.white,
              elevation: 0,
              scrolledUnderElevation: 0,
              systemOverlayStyle: SystemUiOverlayStyle.light),
          scaffoldBackgroundColor: FTColors.greyF8,
          brightness: Brightness.light
        ),
        darkTheme: ThemeData(
          appBarTheme: AppBarTheme(
              backgroundColor: Colors.black,
              elevation: 0,
              scrolledUnderElevation: 0,
              systemOverlayStyle: SystemUiOverlayStyle.dark),
          scaffoldBackgroundColor: FTColors.greyF8,
          brightness: Brightness.dark
        ),
      	)
      );

2)针对每个PopupMenuButton单独处理

PopupMenuButton(
      elevation: 0, //解决菜单背景色偏红问题
      color: Colors.white,
      itemBuilder: (BuildContext context) {
			return [				PopupMenuItem<String>(      				  value: "itemId",				      child: Text(				        "item"				      ),    			)			];
	   }
)

3)针对每个AlertDialog单独处理

	AlertDialog(
          elevation: 0,
          backgroundColor: Colors.white,
          title: const Text("提示"),
          content: const Text("您已退出登录"),
    )

由于没有找到可以统一处理后两种widget的方法,所以采取了最笨的方式——单独处理。 优先解决问题,后续再优化实现方式