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'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

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,
     )
      ]
          
        )
    )
...
)

CodePudding user response：

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

Expanded(
  child: ListView(
     ...
)