How to shrink first child in a Column? - flutter

Question

I had a strange bug with a layout of a Column, after which I decided to check out documentation - was surprised to to see how Flex lays out zero-flex elements. Anyway, here is the question.
How do you shrink the top element, i.e. layout it with the minimal possible size? I.e. that can be a top menu with content pane following it below,
Column(
children: [
/// menu is given unlimited constraints, so it may try to expand or may fail to layout
menu,
Expanded(child: content)
]
)
Codepen Demo showcases the problem
Another way to formulate the question: how do you keep dominance of the Expanded widget? Here, the LimitedBox can eat as much space as it wants. This is one of the problems of the Column widget.

Answer 1

Try this,let me know if it works for you
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: MediaQuery.of(context).size.height*0.1,
width: double.infinity,
color: Colors.amber,
child: Center(child: Text('menu'))),
Column(children: [Text('wow')]),
Text(
'wow',
),
]),
));

Answer 2

Use ConstrainedBox and give maxHeight a value of maximum available space.
LayoutBuilder(
builder: (_, constraints) {
return Column(
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: constraints.maxHeight,
),
child: Text('Your menu'),
),
Expanded(
child: Container(color: Colors.blue),
),
],
);
},
)

Answer 3

When you don't set size for widget in column It use minimum size as it required. I tested your code and removed LimitedBox,SizedBox and Spacer. I just wrap your Text with Container to show result easily.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(children: [
Container(color: Colors.red, child: Center(child: Text('menu'))),
Column(children: [Text('wow')]),
Expanded(
child: Center(
child: Text(
'wow',
),
))
]),
),
);
}