How to fill vertical space in nested Column in ListView - flutter

Question

I want the green box to fill the vertical space so MainAxisAlignment.spaceBetween will work.
import 'package:flutter/material.dart';
void main() => runApp(_app);
const title = "Layout test";
var _app = new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: const Text(title),
),
body: new _LayoutTest(),
),
);
class _LayoutTest extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return new ListView(
children: [
new Container(
color: Colors.orangeAccent,
margin: const EdgeInsets.only(bottom: 20.0),
child: new Row(
children: [
new Image.network(
// this can be any image
"http://via.placeholder.com/185x278",
width: size.width / 5,
),
new Expanded(
child: new Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
color: Colors.lightGreenAccent,
// this should fill vertical space
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
const Text("Top"),
const Text("Bottom"),
],
),
),
),
],
),
),
],
);
}
}

Answer 1

You can give the inner Container same height as outer container:
class _LayoutTest extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final newRandom = new Random().nextInt(50);
return new ListView(
children: [
new Container(
color: Colors.orangeAccent,
margin: const EdgeInsets.only(bottom: 20.0),
child: new Row(
children: [
new Container(
color: Colors.pinkAccent,
width: size.width / 5,
height: 200.0 + newRandom,
),
new Expanded(
child: new Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
color: Colors.lightGreenAccent,
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
const Text("Top"),
const Text("Bottom"),
],
),
height: 200.0 + newRandom,
),
),
],
),
),
],
);
}
}