Flutter开发中如何去除Android端AppBar上方出现的阴影？

问题原因 #

Flutter 3.10及以上版本适配Material3后，AppBar新增了滚动时的阴影控制属性scrolledUnderElevation，你之前设置的elevation仅控制默认非滚动状态下的阴影，安卓端默认滚动场景下会触发该属性的默认值产生阴影；另外Material3默认的surfaceTintColor表面色调叠加也可能呈现出类似阴影的效果。

解决步骤 #

• 给AppBar补充设置scrolledUnderElevation: 0，禁用滚动状态下的阴影
• 给AppBar补充设置surfaceTintColor: Colors.transparent，取消Material3默认的表面色调叠加
• 如果是安卓系统状态栏本身自带半透明遮罩，可手动设置状态栏颜色为完全透明

修改后代码示例 #

// 顶部导入services包
import 'package:flutter/services.dart';

// 可以放在main函数初始化阶段执行，也可以在当前页面的initState中执行
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  // 可根据页面背景色调整状态栏图标亮度，亮色背景用dark，暗色背景用light
  statusBarIconBrightness: Brightness.dark,
  statusBarBrightness: Brightness.light,
));

// ... 其余业务代码
return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    shadowColor: Colors.transparent,
    elevation: 0.0,
    // 新增两个属性
    scrolledUnderElevation: 0,
    surfaceTintColor: Colors.transparent,
    title: Text('Title'),
  ),
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background_01.jpg'),
        fit: BoxFit.cover,
      ),
    ),
    child: SafeArea(
      child: Column(
        children: [
          Container(),
          Container(),
        ],
      ),
    ),
  ));

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