Flutter Simple ListView Tutorial

Hello again! It’s been a while since I write a tutorial for mobile apps. Now I’m gonna write about a simple ListView tutorial for Flutter. I think all of you already know about Flutter. If you still don’t know about it, you can check it here on flutter.dev. It’s an amazing framework to write and build native apps on Android and iOS from a single codebase, written in Dart programming language.

 

What the app will look like?

The app will look like this after you finish this tutorial:

What will you learn?

• Creating a simple ListView using Flutter framework
• Get to know how to populate data model for ListView

Note: In this tutorial, I used Flutter v1.2.1 Stable and Visual Studio Code as the code editor. If you haven’t installed it, you get the Flutter SDK from here and download Visual Studio Code from here.

 

Getting Started

Open your Visual Studio Code and head to View -> Command Palette…

After that, type ‘flutter’ without the quote sign and it will display some options to do. Choose the Flutter: New Project. Use simple_listview as the project name.

 

The editor will load and prepare the project file for you and when it finishes, open the main.dart file and you will have to replace or modify its codes like this:

import 'package:flutter/material.dart';

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

final _textListStyle = const TextStyle(fontSize: 18.0);

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  final String _appTitle = 'Simple Listview';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _appTitle,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_appTitle),
        ),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, position) {
            return _buildRow(position);
          },
        ),
      ),
    );
  }

  Widget _buildRow(int position) {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text('Sample Text', style: _textListStyle),
          leading: CircleAvatar(
            backgroundColor: Colors.grey,
          ),
        ),
        Divider()
      ],
    );
  }

}

 

So you will use the Material components to build this simple Flutter ListView. The class MyApp there is an extension of StatefulWidget which means this is a dynamic widget. To get to know more you can read about it here.

After you write the code, you may run your Flutter app on any simulator you have. Mine here is iOS simulator, you can use Android simulator as well!

 

Adding Some Data

Add a new folder inside libs folder named models. Inside the models folder, add a new dart file named superhero.dart. Just like other programming languages, it also has a kind of model class to hold the data.

class Superhero {
  String name;
  String imageUrl;

  Superhero(this.name, this.imageUrl);
}

 

Open the main.dart file again, add the import code here:

import 'package:simple_listview/models/superhero.dart';

 

Then, add these codes inside the _MyAppState class:

final _itemList = <Superhero>[];

@override
void initState() {
  super.initState();
  _loadData();
}

void _loadData() {
  _itemList.add(Superhero('Aquaman', 'https://i.ibb.co/hZ1Q3fz/aquaman.jpg'));
  _itemList.add(Superhero('Batman', 'https://i.ibb.co/N3KYFrb/batman.jpg'));
  _itemList.add(Superhero('Firestorm', 'https://i.ibb.co/WpBCJF3/firestorm.jpg'));
  _itemList.add(Superhero('Green Arrow', 'https://i.ibb.co/0rNsT6h/green-arrow.jpg'));
  _itemList.add(Superhero('Green Lantern', 'https://i.ibb.co/5671yGz/green-lantern.jpg'));
  _itemList.add(Superhero('Shazam', 'https://i.ibb.co/JrngKnM/shazam.jpg'));
  _itemList.add(Superhero('Superman', 'https://i.ibb.co/74BBkzd/superman.jpg'));
  _itemList.add(Superhero('The Flash', 'https://i.ibb.co/3B5xvSd/the-flash.jpg'));
  _itemList.add(Superhero('Wonder Woman', 'https://i.ibb.co/zJ72ymG/wonder-woman.jpg'));
}

 

We initialize the _itemList which is an array list of Superhero data that we already write before. The _loadData() method contains codes to fill the data to an _itemList array and the initState() method will call the _loadData().

Next, modify the body attribute inside build(BuildContext context) method like this:

body: ListView.builder(
  itemCount: _itemList.length,
  itemBuilder: (context, position) {
    return _buildRow(position);
  },
),

 

Find the _buildRow(int position) method and modify the code to set the list item based on each data from the list.

Widget _buildRow(int position) {
  return Column(
    children: <Widget>[
      ListTile(
        title: Text(_itemList[position].name, style: _textListStyle),
        leading: CircleAvatar(
          backgroundColor: Colors.grey,
          backgroundImage: NetworkImage(_itemList[position].imageUrl),
        ),
      ),
      Divider()
    ],
  );
}

 

That’s all. You may now run the app again to see the ListView display all our data!

Where to go next?

You can download this full code from my GitHub repo here. Be sure to check my other post here about creating another simple list application for Android using RecyclerView written in Kotlin programming language. Also, don’t forget to check my other tutorials about creating Android applications here. Hope you like my post, comment and share it with love!