Flutter自适应高度全屏对话框实现问题求助

需求清单 #

• 宽度铺满屏幕
• 具备半透明效果
• 背景模糊处理
• 点击遮罩可关闭
• 带有全屏宽度的上下边框
• 高度自适应

问题分析 #

当前代码通过FractionallySizedBox的heightFactor: 0.2固定了对话框高度，导致无法根据内容自适应。只需调整布局结构，移除固定高度限制即可实现需求。

修改后的完整代码 #

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(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: ''),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void popup() {
    showGeneralDialog(
      context: context,
      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return Align(
          alignment: Alignment.center,
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.grey.withAlpha(10),
                  border: const Border(
                    top: BorderSide(color: Colors.white, width: 2.0),
                    bottom: BorderSide(color: Colors.white, width: 2.0),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Text("SIMPLE TEXT"),
                      SizedBox(height: 10),
                      Text("可以添加更多内容，高度会自动适配"),
                      SizedBox(height: 10),
                      Text("比如多行文本或者其他组件"),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
      barrierDismissible: true,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
      transitionBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
      transitionDuration: const Duration(milliseconds: 200),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text("THIS IS A BACKGROUND TEXT"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: popup,
        tooltip: 'POPUP',
        child: const Icon(Icons.add),
      ),
    );
  }
}

关键修改点 #

1. 移除固定高度限制：删除FractionallySizedBox的heightFactor配置，改用Align控制对话框居中显示，不再强制固定高度
2. 确保宽度铺满屏幕：给Container设置width: double.infinity，保证对话框宽度适配屏幕
3. 自适应内容高度：将Column的mainAxisSize设为MainAxisSize.min，让Column高度完全由子组件决定
4. 优化内容间距：添加Padding避免内容紧贴边框，提升整体视觉体验

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