Flutter Listview Tutorial

Flutter Listview Widget Syntax & Example – How To Use Listview Widget

Listview Widget is a basic widget every app has to have. We here in this tutorial will learn how to use flutter’s Listview Widget. When we compare Listview with android there we have recyclerview to do this job. In this tutorial, we will learn only a simple listview that displays information.

Listview widget is a class in the material library of flutter SDK. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the Listview.

We will also learn about ListTile class from the material library which simplifies the Item view creation. This is simple terms is an item layout for RecyclerView Adapter.

Tutorial

Step 1:

Setup up a flutter project and open main.dart class and remove all generate code.In the home parameter pass in a class names HomeView.Now right-click and a dart file named homeview.dart.

Step 2:

Open homeview.dart file and type stfull which auto-completes and generates a stateful widget.If you want you can build a stateless widget class if there is no element that is not updating. Name the class as HomeView.

Step 3:

Goto build method of HomeView and paste in below code.

import 'package:flutter/material.dart';

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {

  final List<String> entries = <String>['Bytelogs', 'Flutter', 'Love'];

  @override
  Widget build(BuildContext context) {
    return Container(
        child: buildListView(),
    );
  }

  Widget buildListView(){
    return ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(entries[index]),
          );
        }
    );
  }
}

ListView.Builder: It is a list-builder method.
padding: Padding you give to each item in the list.
itemCount: Total number of the item created to form a list.
item builder: This builder method invoked each time an item is to be created.

Alternate methods to build ListView

Method 1:

This method is used on when we have static data. Here list data will be predefined rather than dynamic.

Widget buildStaticListView(){
  return ListView(
    padding: const EdgeInsets.all(8),
    children: <Widget>[
      Container(
        height: 50,
        color: Colors.amber[600],
        child: const Center(child: Text('Entry A')),
      ),
      Container(
        height: 50,
        color: Colors.amber[500],
        child: const Center(child: Text('Entry B')),
      ),
      Container(
        height: 50,
        color: Colors.amber[100],
        child: const Center(child: Text('Entry C')),
      ),
    ],
  )
}

Method 2:

This method is used when we want to have a separator for each item in ListView.This is similar to ListView.Builder example earlier.

Widget buildSeparatedListView(){
  return ListView.separated(
    padding: const EdgeInsets.all(8),
    itemCount: entries.length,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        height: 50,
        color: Colors.amber[600],
        child: Center(child: Text('Entry ${entries[index]}')),
      );
    },
    separatorBuilder: (BuildContext context, int index) => const Divider(),
  );
}

Github Repo: https://github.com/imjeevandeshmukh/BytelogsTutorials/tree/main/Flutter/listview_app