Flutter中如何避免AppBar裁剪其子元素的ink splash水波纹效果

AppBar默认开启了边界裁剪，按钮点击产生的水波纹扩散到AppBar底部边界外时会被裁剪，就会出现你看到的违和效果。

方案1：将扩展区域集成到AppBar内部（推荐） #

直接使用AppBar的bottom参数承载你要放在AppBar下方的内容，这是Flutter官方推荐的扩展AppBar的方式，不需要额外处理阴影、水波纹裁剪问题，适配性最好。
修改后代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey[100]!,
          elevation: 3, // 直接用AppBar自带的elevation模拟阴影，不用自己写Container阴影
          shadowColor: Colors.grey[600]!,
          actions: [
            IconButton(
              icon: const Icon(Icons.settings_rounded, color: Colors.black),
              onPressed: () {},
            ),
          ],
          // 把扩展内容放在bottom属性里
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(32),
            child: Container(
              height: 32,
              color: Colors.grey[100]!,
            ),
          ),
        ),
        backgroundColor: Colors.grey[100]!,
        body: const SizedBox.expand(),
      ),
    );
  }
}

方案2：关闭AppBar的裁剪（改动最小） #

如果不想调整现有布局结构，只需要给AppBar添加clipBehavior: Clip.none参数，关闭AppBar的边界裁剪即可，水波纹就可以完整显示。
修改后代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey[100]!,
          elevation: 0,
          clipBehavior: Clip.none, // 关闭裁剪，解决水波纹被截断问题
          actions: [
            IconButton(
              icon: const Icon(Icons.settings_rounded, color: Colors.black),
              onPressed: () {},
            ),
          ],
        ),
        backgroundColor: Colors.grey[100]!,
        body: Column(
          children: [
            Container(
              height: 32,
              margin: const EdgeInsets.only(bottom: 3),
              decoration: BoxDecoration(
                color: Colors.grey[100]!,
                boxShadow: [BoxShadow(color: Colors.grey[600]!, blurRadius: 3)],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• 方案1更符合Flutter设计规范，后续如果要调整AppBar样式、加其他组件兼容性更好，不会出现额外的溢出问题。
• 方案2代码改动最小，适合临时快速修复，注意要保证AppBar和下方Container的背景色完全一致，避免水波纹显示时出现颜色断层。

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