如何让Flutter Dialog内容像Bottom Sheet一样占用最小空间？

我想根据屏幕尺寸，在Dialog或Bottom Sheet中展示可滚动内容。Bottom Sheet的子Widget能正确占用所需最小空间（高度和内容一致），但Dialog里的子Widget和Dialog本身总是尽可能占满最大空间，甚至铺满整个屏幕。

效果对比 #

• Bottom Sheet表现（符合预期）：
  
• Dialog表现（不符合预期）：
  

相关代码 #

未达预期的Dialog实现（用于showDialog()） #

class GutHealthScoreDialog extends StatelessWidget {
  static List<Widget> widgets(BuildContext context) {
    final report = Report.of(context);
    return [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          for (var (ecologicalParameter, value)
              in report.ecologicalParameterList)
            Expanded(
              child: StatisticsCardMedium(
                title: ecologicalParameter,
                value: value,
                quantifier: "%",
              ),
            )
        ],
      ),
    ];
  }

  const GutHealthScoreDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return DismissibleDialog(
        child: PageContent(
      title: "Gut Health Score".i18n,
      safeAreaTop: false,
      children: widgets(context),
    ));
  }
}

符合预期的Bottom Sheet实现（用于showModalBottomSheet()） #

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

  @override
  Widget build(BuildContext context) {
    return PageContent(
      title: "Gut Health Score".i18n,
      safeAreaTop: false,
      safeAreaBottom: true,
      children: GutHealthScoreDialog.widgets(context),
    );
  }
}

通用组件代码 #

class DismissibleDialog extends StatelessWidget {
  const DismissibleDialog({super.key, required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    var dialogContext = context;
    return Dialog(
      clipBehavior: Clip.hardEdge,
      child: Stack(
        children: [
          child,
          Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: spacious,
              child: CloseButton(
                style: ButtonStyle(
                    backgroundColor: WidgetStatePropertyAll(
                        Theme.of(context).colorScheme.surfaceContainerHigh)),
                onPressed: pop(dialogContext),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class PageContent extends StatelessWidget {
  final String? title;
  final Widget? titleWidget;
  final EdgeInsets? titlePadding;
  final List<Widget> children;
  final EdgeInsets? padding;
  final MainAxisSize columnSize;
  final MainAxisAlignment verticalAlignment;
  final CrossAxisAlignment horizontalAlignment;
  final bool safeAreaTop;
  final bool safeAreaBottom;
  final bool scrollable;

  const PageContent(
      {super.key,
      this.title,
      this.children = const [],
      this.padding,
      this.titlePadding,
      this.verticalAlignment = MainAxisAlignment.start,
      this.horizontalAlignment = CrossAxisAlignment.center,
      this.columnSize = MainAxisSize.max,
      this.safeAreaTop = true,
      this.scrollable = true,
      this.safeAreaBottom = false})
      : titleWidget = null;

  const PageContent.withTitleWidget(
      {super.key,
      this.titleWidget,
      this.titlePadding,
      this.children = const [],
      this.padding,
      this.verticalAlignment = MainAxisAlignment.start,
      this.horizontalAlignment = CrossAxisAlignment.center,
      this.columnSize = MainAxisSize.max,
      this.safeAreaTop = true,
      this.scrollable = true,
      this.safeAreaBottom = false})
      : title = null;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        top: safeAreaTop,
        bottom: safeAreaBottom,
        child: scrollable
            ? SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: verticalAlignment,
                  crossAxisAlignment: horizontalAlignment,
                  mainAxisSize: columnSize,
            children: [
              titleWidget != null
                  ? PageTitle.withTitleWidget(
                      titleWidget,
                      padding: titlePadding,
                    )
                  : title != null
                      ? PageTitle(
                          title,
                          padding: titlePadding,
                        )
                      : const SizedBox.shrink(),
              for (var child in children)
                Padding(
                  padding: padding != null
                      ? padding!
                      : comfortableListChildren,
                  child: child,
                ),
            ],
                ),
              )
            : Column(
                mainAxisAlignment: verticalAlignment,
                crossAxisAlignment: horizontalAlignment,
                mainAxisSize: columnSize,
                children: [
                  titleWidget != null
                      ? PageTitle.withTitleWidget(
                          titleWidget,
                          padding: titlePadding,
                        )
                      : title != null
                          ? PageTitle(
                              title,
                              padding: titlePadding,
                            )
                          : const SizedBox.shrink(),
                  for (var child in children)
                    Padding(
                      padding:
                          padding != null ? padding! : comfortableListChildren,
                      child: child,
                    ),
                ],
              ));
  }
}

解决方案 #

问题根源在于PageContent的columnSize默认值是MainAxisSize.max，加上SingleChildScrollView默认会尽可能占满父容器空间，而Dialog的布局约束会放大这个行为；Bottom Sheet的约束逻辑不同，所以能自适应内容高度。

修改步骤：

1. 在Dialog使用PageContent时，显式设置columnSize: MainAxisSize.min，让Column只占用内容所需的最小高度。
2. 修改PageContent中的SingleChildScrollView，添加shrinkWrap: true，让滚动视图也自适应内容高度。

修改后的代码 #

调整GutHealthScoreDialog

class GutHealthScoreDialog extends StatelessWidget {
  static List<Widget> widgets(BuildContext context) {
    final report = Report.of(context);
    return [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          for (var (ecologicalParameter, value)
              in report.ecologicalParameterList)
            Expanded(
              child: StatisticsCardMedium(
                title: ecologicalParameter,
                value: value,
                quantifier: "%",
              ),
            )
        ],
      ),
    ];
  }

  const GutHealthScoreDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return DismissibleDialog(
        child: PageContent(
      title: "Gut Health Score".i18n,
      safeAreaTop: false,
      columnSize: MainAxisSize.min, // 让Column仅占内容最小高度
      children: widgets(context),
    ));
  }
}

调整PageContent的滚动视图部分

// 在PageContent的build方法中，修改scrollable分支的SingleChildScrollView
SingleChildScrollView(
  shrinkWrap: true, // 让滚动视图自适应内容高度
  child: Column(
    mainAxisAlignment: verticalAlignment,
    crossAxisAlignment: horizontalAlignment,
    mainAxisSize: columnSize,
    children: [
      // 原有子Widget代码保持不变
    ],
  ),
)

修改完成后，Dialog会和Bottom Sheet一样，仅占用内容所需的最小空间，同时保持内容可滚动的特性。

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