Flutter - Expanded with minHeight

Question

Hello, I would like to achieve that in the web/desktop application (web/windows) the content placed in Flexible/Expanded in the Column occupies the entire height of the screen, but if I try to compress the window from below, the content will not be released e.g. shrink to less than 300 pixels (minHeight?)

I tried to solve it like this, but unfortunately it didn't work. It always allows the middle red container to be compressed to less than 300 pixels.

Try #1:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.green.shade50),
          ),
          Flexible(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: 300),
              child: Container(
                decoration: BoxDecoration(color: Colors.pink.shade50),
              ),
            ),
          ),
          Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.blue.shade50),
          ),
        ],
      ),
    );
  }

Try #2:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.green.shade50),
          ),
          Flexible(
            child: LayoutBuilder(
              builder: (context, constraints2) {
                return SizedBox(
                  height: (constraints2.maxHeight).clamp(200, 300),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.pink.shade50),
                  ),
                );
              },
            ),
          ),
          Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.blue.shade50),
          ),
        ],
      ),
    );
  }

We try a lot of solution from the internet eg: https://stackoverflow.com/a/73891130/4234926 but this is not good for me, because the Container's min size and max size are also specified here. I would like it so that I only want the size of the min, but the size of the max should be such that it exactly fills the height of the window together with the other content (i.e. expands).

If the red Container is less then 300, then "Bottom overflowed by xxx pixels" should appear.

Answer 1

 return Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),
  body:
  CustomScrollView(
      slivers: [
        SliverFillRemaining(
          hasScrollBody: false,
          child: Column(
            children: <Widget>[
              Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.green.shade50),
              ),
              Flexible(
                flex: 1,
                child: ConstrainedBox(
                  constraints: BoxConstraints(minHeight: 200, maxHeight: 300),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.pink.shade50),
                  ),
                ),
              ),
              Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.blue.shade50),
              ),
            ],
          )
        )
      ],
  )
);