How to create ListView in Flutter ? Flutter ListView tutorial using Dart

In this flutter tutorial we will implement flutter listview widget that simply displays list of items in a form of listview.

Also we will explore basic feature of flutter list view like onTap anonymous Event handler, add some of basic properties like leading icon, title to listview, subtitle.

Here is demo of how final listview will look

Flutter ListView Tutorial

Application final UI Demo

How to Create a Flutter listview?

Dart is the programming language used to code Flutter apps. Dart is another product by Google. So

main class function

snippet code

void main() {
  runApp(MaterialApp(
    home: Scaffold( 
      appBar: AppBar(
        title: Text("Flutter List View Tutorial"), // title of appbar
      ),
      body: getListView(), //list widget function is been called
    ),
  ));
}

Here we have used scaffold widget because all the content should be visible inside the device screen size i.e if we don’t use Scaffold you may get error  “ListTile widget require a Material widget ancestor” some think like below screenshot

Inside Scaffold we have AppBar widget that show a app bar at the top of device screen with some Title to it.

and a body of Application which calls a function getListView(); that display listview in the body tag.

Widget Function

snippet code

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.landscape),
        title: Text("LandScape"),
        subtitle: Text("Beautiful View..!"),
        trailing: Icon(Icons.wb_sunny),
      ),
      ListTile(
        leading: Icon(Icons.access_alarm),
        title: Text("Alarm"),
        subtitle: Text("Good morning.!"),
        trailing: Icon(Icons.cloud_circle),
      ),
      ListTile(
        leading: Icon(Icons.beach_access),
        title: Text("Beach"),
        subtitle: Text("Beach View..!"),
        trailing: Icon(Icons.beach_access),
      ),
      ListTile(
        leading: Icon(Icons.satellite),
        title: Text("Satellite"),
        subtitle: Text("Satellite Signal..!"),
        trailing: Icon(Icons.scatter_plot),
      ),
      ListTile(
        leading: Icon(Icons.save),
        title: Text("Save Data"),
        subtitle: Text("Save File..!"),
        trailing: Icon(Icons.gps_fixed),
      ),
      ListTile(
        leading: Icon(Icons.phone),
        title: Text("Call"),
        subtitle: Text("856848***11..!"),
        trailing: Icon(Icons.cached),
      ),
      ListTile(
        leading: Icon(Icons.print),
        title: Text("Printer"),
        subtitle: Text("Print Page..!"),
        trailing: Icon(Icons.pages),
      ),
      ListTile(
        leading: Icon(Icons.gamepad),
        title: Text("Game Pad"),
        subtitle: Text("Game Lover..!"),
        trailing: Icon(Icons.games),
      )
    ],
  );
  return listview;
}

A scrollable list of widgets arranged linearly.

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.

ListTile contains one to three lines of widget, such as checked box, leading icons and trailing icons, Title with is main text of listviews, subtitle which is basically a meta derscription of title.

Full Source Code of Flutter listview UI Design

main.dart

Final Full Source : Copy paste this code into main.dart file of your flutter project, and you are done the app will run successfully

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Flutter List View Tutorial"),
      ),
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.landscape),
        title: Text("LandScape"),
        subtitle: Text("Beautiful View..!"),
        trailing: Icon(Icons.wb_sunny),
      ),
      ListTile(
        leading: Icon(Icons.access_alarm),
        title: Text("Alarm"),
        subtitle: Text("Good morning.!"),
        trailing: Icon(Icons.cloud_circle),
      ),
      ListTile(
        leading: Icon(Icons.beach_access),
        title: Text("Beach"),
        subtitle: Text("Beach View..!"),
        trailing: Icon(Icons.beach_access),
      ),
      ListTile(
        leading: Icon(Icons.satellite),
        title: Text("Satellite"),
        subtitle: Text("Satellite Signal..!"),
        trailing: Icon(Icons.scatter_plot),
      ),
      ListTile(
        leading: Icon(Icons.save),
        title: Text("Save Data"),
        subtitle: Text("Save File..!"),
        trailing: Icon(Icons.gps_fixed),
      ),
      ListTile(
        leading: Icon(Icons.phone),
        title: Text("Call"),
        subtitle: Text("856848***11..!"),
        trailing: Icon(Icons.cached),
      ),
      ListTile(
        leading: Icon(Icons.print),
        title: Text("Printer"),
        subtitle: Text("Print Page..!"),
        trailing: Icon(Icons.pages),
      ),
      ListTile(
        leading: Icon(Icons.gamepad),
        title: Text("Game Pad"),
        subtitle: Text("Game Lover..!"),
        trailing: Icon(Icons.games),
      )
    ],
  );
  return listview;
}

Summary of above tutorial 

-> Basic ListView

• For small number of list Items.
• Loads all item in memory when attached to screen.
• Do not use it for large number of items since it is not memory efficient.
• Wrap ListView as home of Scaffold widget as it is scrollable and might overflow beyond the screen.