如何创建响应式对话框

Question

我正在尝试设计 Dialog() 小部件的样式；但它并没有真正让我像往常一样处理高度和宽度。

简而言之：我将所有内容都放在一个容器中，我希望该容器的高度只达到它需要的高度。但是 Dialog() 小部件似乎只能让我通过操作 insetPadding 来设置它的大小。先上代码，下面截图。

代码：

    class _CustomDialogueState extends State<CustomDialogue> {
  @override
  Widget build(BuildContext context) {
    return Dialog(
        backgroundColor: Colors.transparent,
        insetPadding: EdgeInsets.fromLTRB(25.w, 108.h, 25.w, 185.h),
        alignment: Alignment.topCenter,
        //
        child: Stack(
          //clipBehavior: Clip.antiAlias,
          alignment: Alignment.center,
          children: [
            Container(//THIS IS THE CONTAINER HOLDING ALL THE CONTENT
              width: double.infinity,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.r),
                  color: Provider.of<CustomColors>(context, listen: false)
                      .customColorScheme['White']),
              margin: EdgeInsets.fromLTRB(10.w, 50.h, 10.w, 10.h),
              child: Column(
                children: [
                  //
                  SizedBox(height: 45.h),
                  //
                  Text(
                    'Welcome to THREE THINGS',
                    style: Provider.of<CustomTextStyle>(context, listen: false)
                        .customTextStyle('Main 1'),
                  ),
                  //
                  SizedBox(
                    height: 12.h,
                  ),// MORE CONTENT FROM HERE; BUT NOT RELEVANT FOR THE ISSUE; SEE SEESREENSHOT

三个模拟设备的截图：

Answer 1

我们有两种类型的回复，您可以在 this article 中阅读，如果你想要响应式小部件，你需要传递高度和宽度的动态值，而不是固定值！

第一个解决方案是MediaQuery，像这样：

width: MediaQuery.of(context).size.width * 0.4, 
height: MediaQuery.of(context).size.height * 0.8, // pass this line to your container to change heigth due to device heigth
// you need to change values as you needed bigger or smaller

Im not sure about values but You can get device width or heigth by these two lines and fix pixel overflow and play around to get best

我们还有另一种控制框约束的方法，您可以使用 LayoutBuilder 来做到这一点，但我认为 MediaQuery 在这种情况下更好。

也许把 padding: EdgeInsetsDirectional.all(15) 给 Container 只是为了测试是个好主意！我不确定结果

Answer 2

我以前遇到过这个问题。只需在 Dialog 的子项中添加一个 SingleChildScrollView。

如何创建响应式对话框

How to create a responsive dialog

flutter

flutter-layout

flutter-dialog