Dialog with Scrollable Container inside a Column with MainAxisSize.min

Question

I have a Dialog with an AppBar and Column with content that I want to be scrollable. For this, I used SingleChildScrollView inside Expanded to wrap my Column. So the code looks like so:

@override
  Widget build(BuildContext context) {
    return StatefulBuilder(
      builder: (context, StateSetter setState) {
        return Dialog(
          elevation: 0,
          backgroundColor: Colors.transparent,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(12)),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                  AppBar(...),
                  Expanded(
                    child: SingleChildScrollView(
                      child: ClipRRect(
                        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12)),
                        child: Container(...),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
      },
    );
  }

However, The Dialog is taking up all the height ignoring the MainAxisSize.min column field. In my understanding, that's happening because of the Expanded widget, but I need it for the SingleChildScrollView to work... Is there a way to achieve scrollable content with a non-scrollable header keeping the MainAxisSize.min field not ignored?

Answer 1

Wrap your dialog with ConstrainedBox widget and set maxHeight for that:

Dialog(
  elevation: 0,
  backgroundColor: Colors.transparent,
  // set max height for dialog here with ConstrainedBox
  child: ConstrainedBox(
    constraints: const BoxConstraints(
      maxHeight: 450,
    ),
    child: ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(12)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
            ...
        ],
      ),
    ),
  ),
),