How to Create a ListView in Flutter

In Flutter, when it comes to scrolling- finite or infinite, you should use ListView widget. ListView is a scrolling widget that facilitates scrolling through its filled children. In this blog post, let’s discuss how to use ListView properly in Flutter.

If the children are very limited or very few then you can use ListView as given below.

ListView(
  children: <Widget>[
    Container(
      height: 200,
      color: Colors.red,
    ),
    Container(
      height: 300,
      color: Colors.green,
    ),
    Container(
      height: 400,
      color: Colors.orange,
    ),
    Container(
      height: 500,
      color: Colors.blue,
    ),
  ],
)

As you see, the ListView widget has three children which are containers of various heights. Following is the complete example of Flutter ListView.

import 'package:flutter/material.dart';


class BasicListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Basic ListView Example'),
      ),
      body: Center(
        child: ListView(
  children: <Widget>[
    Container(
      height: 200,
      color: Colors.red,
    ),
    Container(
      height: 300,
      color: Colors.green,
    ),
    Container(
      height: 400,
      color: Colors.orange,
    ),
    Container(
      height: 500,
      color: Colors.blue,
    ),
  ],
)
      ),
    );
  }
}

Here’s the output of the Flutter example.

Flutter listview example

When the lists are infinite or too many, you should use ListView.builder constructor for better performance and smooth scrolling. Using IndexedWidgetBuilder, you can build children on demand. It’s pretty similar to react native’s FlatList or Android’s RecyclerView.

You can use ListView.builder as given below.

ListView.builder(
  itemCount: data.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 150,
      color: Colors.white,
      child: Center(child: Text('${data[index]}')),
    );

As you observed, the children widget is passed to itemBulder. Go through the Flutter ListView example below for better understanding.

import 'package:flutter/material.dart';


class ListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  final data= ["one","two","three","four","five","six","seven","eight","nine","ten"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ListView Example'),
      ),
      body: Center(
        child: ListView.builder(
  itemCount: data.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 150,
      color: Colors.white,
      child: Center(child: Text('${data[index]}')),
    );
  }
)
      ),
    );
  }
}

Here’s the output of the example.

flutter flatlist example

I hope you liked this Flutter tutorial on ListView. Thank you for reading!

4 thoughts on “How to Create a ListView in Flutter”

  1. Pingback: How to Create ListView with Separator in Flutter – Flutter For You

  2. Pingback: How to Disable Click Events of a Screen in Flutter – Flutter For You

  3. Pingback: How to Add Swipe to Delete Option in Flutter – Flutter For You

  4. Pingback: How to Change Order of Items in a ListView in Flutter – Flutter For You

Leave a Comment

Your email address will not be published. Required fields are marked *