I am trying to show some scrollable content in either a dialog or bottom sheet depending on screen size. In the bottom sheet, the children widgets correctly takes up the minimum amount of space needed, i.e. the bottom sheet has the same height as the content. However, in the Dialog, the children widgets and thus the Dialog itself are always as big as possible regardless of whether the widgets need that much space, taking up the whole screen.

Screenshot of bottom sheet behaviour:

Screenshot of dialog behaviour:

// Doesn't work as expected (used in 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),
    ));
  }
}

// Works as expected (used in 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,
                    ),
                ],
              ));
  }
}