Flutter - How to make Container grow with a dynamic ListView? - flutter

Question

I have a Container that contains a ListView, I want the Container to grow as big as the ListView. When I remove the height on the Container, I get an error saying (Vertical viewport was given unbounded height). How can I achieve this with flutter?
The ListView can contain multiple card items.
order_stack.dart file:
import 'package:flutter/material.dart';
class OrderStack extends StatelessWidget {
const OrderStack({Key? key, required this.id, required this.tableNumber}) : super(key: key);
final int id;
final int tableNumber;
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Color.fromRGBO(33, 49, 55, 1),
),
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Container(
height: 80,
width: 400,
color: const Color.fromRGBO(93, 194, 188, 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 30),
child: Text(
'Table $tableNumber',
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.w900,
),
),
),
Container(
padding: const EdgeInsets.only(right: 30),
child: Text(
'#$id',
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Container(
height: 70,
width: 400,
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Card(
elevation: 0,
margin: EdgeInsets.zero,
child: ListTile(
tileColor: Colors.yellow[200],
leading: const Text(
'3X',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w800
),
),
title: const Text(
'Good Burger',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w800
),
),
subtitle: const Text('Here is a second line'),
trailing: IconButton(
iconSize: 30,
icon: const Icon(Icons.expand_more_outlined),
color: Colors.black,
onPressed: () {},
),
onTap: () => print('Good Burger'),
),
),
],
),
),
],
),
);
}
}

Answer 1

The easiest way would be to wrap your ListView() widget with a Column() and this column given a height of the user's screen with media query remember you should also use shrink wrap to true in the list and wrap your body with SingleChildScrollView()like so:
...
body: SingleChildScrollView(
...
Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: [
///Your listview
ListView(
shrinkWrap: true,
)
]
)
)
...
)

Answer 2

Replace the Container with the Expanded widget. It will expand the ListView to fit the available space in the Column.
Expanded(
child: ListView(
...
)