[Solved] Vertical viewport was given unbounded height Error

While adding Listview inside Scroll view or building grid layout, you may encounter “Vertical viewport was given unbounded height” Error on Flutter. This caused, when there is the unbounded height on the parent widget. See the example below:

Error Message:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical
viewport was given an unlimited amount of vertical space in which to expand. This situation
typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because
there will always be enough vertical space for the children. In this case, consider using a Column
instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
the height of the viewport to the sum of the heights of its children.

Solution One: Use Shrinkwrap: true on ListVew() Widget:

ListView(
  shrinkWrap: true,
  children: [
        
  ],
)

Solution Two: Set Bounded Height on Parent Widget using Container or SizedBox():

Container(
  height: 500,
  child:ListView(
      children: [
          
      ],
  ),
)

OR

SizedBox(
  height: MediaQuery.of(context).size.height,
  child:ListView(
      children: [
          
      ],
  ),
)

Solution Three: Wrap your widget with Expanded Wiget:

Expanded(
  child:ListView(
      children: [
          
      ],
  ),
)

In this way, you can solve the “Vertical viewport was given unbounded height” error on Flutter. For related flex-parent layout errors, review resolving RenderFlex unbounded height constraints and fixing vertical divider rendering errors.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: ModernUnboundedHeightFixDemo()));
}

class ModernUnboundedHeightFixDemo extends StatelessWidget {
  const ModernUnboundedHeightFixDemo({super.key});

  @override
  Widget build(BuildContext context) {
    final items = List.generate(10, (index) => 'Document Section #$index');

    return Scaffold(
      appBar: AppBar(title: const Text('Unbounded Height Resolution')),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(16.0),
            color: Theme.of(context).colorScheme.primaryContainer,
            child: const Row(
              children: [
                Icon(Icons.info),
                SizedBox(width: 8),
                Text('Header Section with Bounded Flex Height'),
              ],
            ),
          ),
          // Pattern 1: Wrap ListView in Expanded inside Column
          Expanded(
            child: ListView.separated(
              itemCount: items.length,
              separatorBuilder: (context, index) => const Divider(height: 1),
              itemBuilder: (context, index) {
                return ListTile(
                  leading: CircleAvatar(child: Text('${index + 1}')),
                  title: Text(items[index]),
                  trailing: const Icon(Icons.chevron_right),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}