如何在Flutter中实现与示例App相同的弹窗打开效果

根据你提到的弹窗效果，这种从底部滑入、带圆角和背景模糊的弹窗，用Flutter的showModalBottomSheet就能快速实现，以下是完整的实现方案：

核心实现代码 #

import 'dart:ui';
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: () => _showCustomBottomSheet(context),
            child: const Text('打开弹窗'),
          ),
        ),
      ),
    );
  }

  void _showCustomBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      // 允许弹窗自适应内容高度，支持滚动
      isScrollControlled: true,
      // 外层背景设为透明，方便添加模糊效果
      backgroundColor: Colors.transparent,
      // 顶部圆角设置
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (context) {
        return BackdropFilter(
          // 背景模糊效果，sigma值越大越模糊
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            decoration: const BoxDecoration(
              color: Color.fromARGB(240, 255, 255, 255),
              borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
            ),
            // 适配键盘高度，避免内容被遮挡
            padding: EdgeInsets.only(
              top: 16,
              left: 16,
              right: 16,
              bottom: MediaQuery.of(context).viewInsets.bottom + 16,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                // 顶部指示器，提升交互感知
                Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(height: 20),
                // 自定义内容区域
                const Text(
                  '这是自定义的特色弹窗',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 16),
                const Text(
                  '可以在这里添加任意内容，比如表单、按钮、图片等',
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 24),
                // 操作按钮组
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('取消'),
                    ),
                    const SizedBox(width: 8),
                    ElevatedButton(
                      onPressed: () {
                        // 这里写确认逻辑
                        Navigator.pop(context);
                      },
                      child: const Text('确认'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

关键细节说明 #

• 背景模糊：通过BackdropFilter配合ImageFilter.blur实现，调整sigmaX和sigmaY可以控制模糊程度
• 弹窗样式：用shape设置顶部圆角，外层backgroundColor设为透明，内部Container定义弹窗背景色
• 适配优化：MediaQuery.of(context).viewInsets.bottom用来适配键盘弹出时的高度，保证内容不被遮挡
• 交互体验：顶部添加小指示器，让用户明确这是可拖拽关闭的弹窗

如果需要更复杂的进入/退出动画，可以改用showGeneralDialog自定义过渡效果，但上述方案已经完全覆盖你提到的弹窗效果需求。

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