How to create simple flutter listview ?

ListView is the best way to show the list of items in our mobile apps. In this tutorial, We are going to create simple static flutter listview.

At the end of this tutorial, we will be able to create a flutter application as shown in the figure below:

flutter listview
simple listview example

Let’s create our flutter project in android studio by going to File => New => Project => Select Flutter from the menu. Then give appropriate name to your project (all lowercase with underscore) and click on finish.

After creating new flutter project, we will see main.dart file open with default code in Android Studio. Just to keep things simple, we will delete all the code inside main.dart and write everything from scratch.

Our first line will be importing package called flutter/material.dart

import 'package:flutter/material.dart';

Now we will write the main() method, which is the entry point of flutter application

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

Here, VisitNepal2020() is a StatelessWidget class which will return the MaterialApp widget. 

class VisitNepal2020 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Visit Nepal 2020",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Visit Nepal 2020")),
        body: MyListView(),
      ),
    );
  }
}

Flutter ListView Example

Since each listview consists of list items. A single list item is created by using ListTile Class. ListTile class is a single fixed-height row that typically contains some text as well as a leading or trailing icon. Let’s create single list item with ListTile as- 

ListTile(
              leading: Icon(Icons.place),
              title: Text("Kathmandu"),
              subtitle: Text("capital city of Nepal"),
              onTap: () {
                Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("capital city of Nepal"),
                ));
              }
          ),

Now, We can create as many number of ListTiles as required. If you see above code, there are a number of parameters.

leading: Leading parameter will show the leading Icon of the List Item

title: It is the main heading of the list item

subtitle: It is the secondary heading (descriptive text) of the list item

onTap(): This method executes when we tap on any of the list item. In order to show the action, here, we are using SnackBar to show the message when any item is tapped.

 Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("capital city of Nepal"),
                ));

These ListTiles are the childern of ListView class. ListView is a scrolling widget provided by the flutter.

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var listView = ListView(
        children: <Widget>[
          ListTile(
              leading: Icon(Icons.place),
              title: Text("Kathmandu"),
              subtitle: Text("capital city of Nepal"),
              onTap: () {
                Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("capital city of Nepal"),
                ));
              }
          ),

          ListTile(
            leading: Icon(Icons.place),
            title: Text("Lumbini"),
            subtitle: Text("birth place of lord Buddha"),
            onTap: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("birth place of lord Buddha"),
              ));
            },
          ),

          ListTile(
            leading: Icon(Icons.place),
            title: Text("Annapurna Base Camp"),
            subtitle: Text("best place to trekking"),
            onTap: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("best place to trekking"),
              ));
            },
          ),

        ]

    );
    return listView;
  }

Now after adding all the code. Our main.dart file will look like-

main.dart

import 'package:flutter/material.dart';

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

class VisitNepal2020 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Visit Nepal 2020",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Visit Nepal 2020")),
        body: MyListView(),
      ),

    );
  }
}

  class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var listView = ListView(

        children: <Widget>[

          ListTile(
              leading: Icon(Icons.place),
              title: Text("Kathmandu"),
              subtitle: Text("capital city of Nepal"),
              onTap: () {
                Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("capital city of Nepal"),
                ));
              }
          ),

          ListTile(
            leading: Icon(Icons.place),
            title: Text("Lumbini"),
            subtitle: Text("birth place of lord Buddha"),
            onTap: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("birth place of lord Buddha"),
              ));
            },
          ),

          ListTile(
            leading: Icon(Icons.place),
            title: Text("Annapurna Base Camp"),
            subtitle: Text("best place to trekking"),
            onTap: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("best place to trekking"),
              ));
            },
          ),
        ]
    );
    return listView;
  }

}

Happy Coding 🙂