How to Limit Height of ListView in Flutter?

Flutter ListView – Set or Limit Height

To limit the height of ListView, wrap the ListView with a Container widget and set the height of the Container to the required height.

Following is the basic code snippet to limit the height of ListView by surrounding a Container.

Container(
	height: 250,
	ListView(
		physics: NeverScrollableScrollPhysics(),
		children: <Widget>[
			//your widget items here
		],
	),
),

Example Flutter Application

You can create a Flutter project and replace the main.dart with the following file.

In this example, we are limiting the height of a ListView using Container widget. We have given each item in the ListView a height of 100. And we are limiting the height of ListView to 250. User can scroll to see the other items.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListView - googleflutter.com'),
        ),
        body: Container(
          height: 250,
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              Container(
                height: 100,
                color: Colors.purple[600],
                child: const Center(child: Text('Item 1', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                height: 100,
                color: Colors.purple[500],
                child: const Center(child: Text('Item 2', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                height: 100,
                color: Colors.purple[400],
                child: const Center(child: Text('Item 3', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
              Container(
                height: 100,
                color: Colors.purple[300],
                child: const Center(child: Text('Item 4', style: TextStyle(fontSize: 18, color: Colors.white),)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

We have run this application in an Android Emulator and got the following screen.

Summary

In this Flutter Tutorial, we learned how to set or limit the height of a ListView in Flutter Application.