Flutter实现从底部滑入并部分覆盖主屏幕的弹窗方法

可以用Flutter自带的showModalBottomSheet方法快速实现这个需求，以下是完整示例代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("主屏幕")),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                // 设置顶部圆角，优化视觉过渡效果
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                ),
                // 限制弹出层高度为屏幕的1/3，保留主屏幕顶部可见区域
                constraints: BoxConstraints(
                  maxHeight: MediaQuery.of(context).size.height / 3,
                ),
                // 允许点击外部关闭弹出层
                barrierDismissible: true,
                builder: (context) {
                  return Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          "弹出面板标题",
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        const Divider(height: 24),
                        Expanded(
                          child: ListView.separated(
                            itemCount: 5,
                            separatorBuilder: (_, __) => const Divider(height: 1),
                            itemBuilder: (_, index) {
                              return ListTile(
                                title: Text("选项${index + 1}"),
                                onTap: () {
                                  // 选项点击逻辑
                                  Navigator.pop(context);
                                },
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            child: const Text("触发底部弹出"),
          ),
        ),
      ),
    );
  }
}

核心配置说明 #

• shape：通过RoundedRectangleBorder设置顶部圆角，让弹出层与主屏幕的过渡更自然，避免生硬直角
• constraints：利用maxHeight控制弹出层的高度比例，这里设为屏幕高度的1/3，确保主屏幕顶部区域始终可见
• barrierDismissible：设为true时，用户点击弹出层以外的区域即可关闭面板，符合常规交互习惯
• builder：用于定义弹出层内部的UI结构，可根据实际需求自由调整布局、添加功能组件

如果需要完全自定义弹出动画，也可以结合AnimationController和SlideTransition组件实现，但showModalBottomSheet自带的缓动动画已经能满足绝大多数场景的需求。

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