Flutter SliverAppBar滚动时出现蓝色tint问题求助

问题原因 #

在Material3模式下，SliverAppBar默认会应用surfaceTintColor作为滚动时的遮罩色，该颜色默认关联主题的primary色，这就是你看到奇怪蓝色tint的原因。

解决方法 #

方法一：单独为当前SliverAppBar移除Tint #

直接在SliverAppBar组件中添加surfaceTintColor: Colors.transparent，即可消除滚动时的tint效果，同时保留原有背景配置：

SliverAppBar(
  pinned: true,
  floating: false,
  snap: false,
  backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
  elevation: 1,
  surfaceTintColor: Colors.transparent, // 新增该行移除tint
  expandedHeight: 100.0,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.asset(
      'assets/images/content/Update.png',
      fit: BoxFit.cover,
    ),
  ),
)

方法二：全局主题统一配置 #

如果希望所有AppBar都移除该tint效果，可以在AppBarTheme中统一设置：

appBarTheme: const AppBarTheme(
  backgroundColor: Color.fromARGB(255, 255, 255, 255),
  surfaceTintColor: Colors.transparent, // 全局移除tint
),

进阶：让AppBar完全与页面融合 #

若要让AppBar完全透明，只需将backgroundColor设为透明，并把elevation设为0消除阴影：

SliverAppBar(
  pinned: true,
  floating: false,
  snap: false,
  backgroundColor: Colors.transparent,
  elevation: 0,
  surfaceTintColor: Colors.transparent,
  expandedHeight: 100.0,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.asset(
      'assets/images/content/Update.png',
      fit: BoxFit.cover,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Anuj Kaithwas