如何隐藏Flutter中SliverAppBar的类颜色效果？

你遇到的这种类颜色效果是Flutter Material 3中SliverAppBar默认的surfaceTintColor（表面色调颜色）导致的——哪怕你注释掉了相关代码，它依然会带有默认的半透明色调值。

要隐藏这个效果，只需要显式将surfaceTintColor设置为透明色即可：

SliverAppBar(
  expandedHeight: 150,
  centerTitle: true,
  forceMaterialTransparency: false,
  surfaceTintColor: Colors.transparent, // 关键：设置为透明以移除色调叠加
  pinned: true,
  forceElevated: false,
  backgroundColor: const Color(0xff2E3358),
  flexibleSpace: FlexibleSpaceBar(
    titlePadding: const EdgeInsets.all(0),
    centerTitle: true,
    title: Padding(
      padding: const EdgeInsets.only(bottom: 8),
      child: Text(
        'Bengaluru',
        style: GoogleFonts.poppins(
          textStyle: const TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    ),
    background: const Image(
      image: AssetImage('assets/images/bg.png'),
      fit: BoxFit.cover,
      alignment: Alignment.topCenter,
    ),
  ),
);

简单说明：surfaceTintColor是Material 3规范里用于给滚动状态下的AppBar添加色调叠加、增强层次感的属性。设置为Colors.transparent后，就能完全移除这层叠加效果，让你的AppBar背景图和底色正常显示。

内容的提问来源于stack exchange，提问作者Muhamed Abd-El Fattah