Flutter中使用showModalBottomSheet如何移除自动生成的背景

要去掉showModalBottomSheet自带的背景容器，只显示自定义的琥珀色组件，直接按以下方式修改即可：

1. 将showModalBottomSheet的backgroundColor设为Colors.transparent，让默认背景容器完全透明，不再显示蓝色。
2. 可选设置：如果不需要底部弹窗的拖拽功能，添加enableDrag: false避免拖拽时出现异常；如果连外部半透明遮罩都不需要，可将barrierColor设为Colors.transparent。

修改后的showModalBottomSheet调用代码 #

showModalBottomSheet(
  backgroundColor: Colors.transparent,
  enableDrag: false, // 按需选择是否添加
  barrierColor: Colors.black54, // 保留默认遮罩，不需要则改为Colors.transparent
  context: context,
  builder: (context) => const BottomSheetWidget(),
)

完整修改代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: TextButton(
              onPressed: () => showModalBottomSheet(
                  backgroundColor: Colors.transparent,
                  enableDrag: false,
                  context: context,
                  builder: (context) => const BottomSheetWidget()),
              child: const Text('showBottomSheet'))),
    );
  }
}

class BottomSheetWidget extends StatelessWidget {
  const BottomSheetWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        width: 100,
        height: 300,
        color: Colors.amber,
      ),
    );
  }
}

修改完成后，就只会显示你定义的琥珀色容器，原自动生成的蓝色背景会被完全移除。

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