Finally, I could solve it by using the `IntrinsicHeight` widget.
I just wrap my `Container` with it and then the `Expanded` widget works as expected.
**the final UI:**
[![the final output][1]][1]
**Here is the code:**
@override
Widget build(BuildContext context) {
return Scaffold(
body: IntrinsicHeight(
child: Container(
decoration:
BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 300,
height: 300,
color: Colors.blue,
alignment: Alignment.center,
child: Text('300x300')),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
alignment: Alignment.center,
child: Text('100x100')),
Expanded(
child: Container(width: 100, color: Colors.amber),
),
],
)
],
),
),
),
);
}
[1]: https://i.stack.imgur.com/IYtZb.png
In this code example, we are doing how to add section header row in the listview.
class HeaderRowListView extends StatelessWidget {
final List<int> _listData = List<int>.generate(100, (i) => i);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView Header Row'),
),
body: ListView(
padding: EdgeInsets.all(8.0),
children: _listData.map((i) {
return i % 10 == 0
? Container(
color: Colors.grey.withOpacity(.5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text("Header",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
)),
Text("Feb 26th, 2019",
style: TextStyle(
fontSize: 14.0,
color: Colors.black45,
)),
],
),
padding: EdgeInsets.all(10.0),
)
: ListTile(
title: Text("Item $i"),
);
}).toList(),
),
);
}
}
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/4mjey.png
