Flutter ListView example with ListView.builder

In this tutorial, we’re gonna build a Flutter App that shows a ListView. We are using ListView.builder constructor that creates items when they are scrolled onto the screen. The ListView also supports removing item from the list.

Overview

Flutter App

We will build a Flutter App that can display a List of Post objects, we can also click on the circle Remove Button to delete a Post from the List. This will update the UI immediately because we use StatefulWidget.

flutter-listview-example

List of items with ListView
Initialize the List

We will implement initState() method and call setState() to initialize the List.

Use ListView.builder

To display items on the List, we need to render each Object as a Widget.
So we use ListView.builder with itemBuilder callback that returns built-in ListTile Widget for visual structure.

We also play with onTap callback to do something when user tap on any item.

Practice

Create a DataModel Class

lib/post.dart

Create & run a Custom StatefulWidget

main/post.dart

Source Code

listview_example

By JavaSampleApproach | July 8, 2018.

Related Posts


Got Something To Say:

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

*