Flutter中如何为Modal Bottom Sheet边框添加阴影？

以下是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          useMaterial3: true,
          bottomSheetTheme: const BottomSheetThemeData(
              modalElevation: 1000.0,
              elevation: 1000.0,
              clipBehavior: Clip.hardEdge,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20))))),
      home: TabBarDemo(),
    );
  }
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: ElevatedButton(
              child: Text('Press'),
              onPressed: () {
                showModalBottomSheet(
                    barrierColor: Colors.transparent,
                    context: context,
                    builder: (context) {
                      return Container();
                    });
              })),
    );
  }
}

尽管我已经设置了elevation属性，但底部表单的边框并未显示任何阴影，仅显示普通边框：

问题原因 #

1. Material 3 阴影机制变更：Material 3中modalElevation、elevation不再直接控制阴影显示，默认的surfaceTintColor会覆盖阴影效果，单纯调高数值无效。
2. 透明遮障与空容器：设置barrierColor: Colors.transparent会让阴影和背景融合，且返回的空Container无背景色，无法衬托出阴影。

解决方法 #

方法一：直接在showModalBottomSheet中配置（推荐）

显式设置阴影相关参数，同时给容器添加背景色：

showModalBottomSheet(
  context: context,
  // 保留半透明遮障，让阴影更明显
  barrierColor: Colors.black.withOpacity(0.2),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  elevation: 12,
  // 关闭surfaceTint，让阴影正常显示
  surfaceTintColor: Colors.transparent,
  builder: (context) {
    return Container(
      height: 200,
      // 用主题色作为背景，适配Material3
      color: Theme.of(context).colorScheme.surface,
      child: const Center(child: Text('Modal Bottom Sheet')),
    );
  },
);

方法二：全局主题适配Material3

在BottomSheetThemeData中调整参数，全局生效：

bottomSheetTheme: BottomSheetThemeData(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
  ),
  elevation: 12,
  surfaceTintColor: Colors.transparent,
  backgroundColor: Theme.of(context).colorScheme.surface,
),

关键注意事项

• 必须给底部Sheet的容器设置背景色，否则阴影会因透明背景无法显现。
• Material3下需将surfaceTintColor设为Colors.transparent，才能让阴影正常显示。
• 避免将barrierColor设为完全透明，阴影需要和背景形成对比才能被看到。

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