DEV Community

loizenai
loizenai

Posted on

Flutter ListView example with ListView.builder

https://grokonez.com/flutter/flutter-listview-example-listview-builder

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.

More Practice:

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.


class ListViewApp extends StatefulWidget {
  @override
  _ListViewState createState() => new _ListViewState();
}

class _ListViewState extends State {
  final List items = new List();

  @override
  void initState() {
    super.initState();
    setState(() {
      items.add(new Post(...));
      items.add(new Post(...));
      // ...
    });
  }
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.

More at:

https://grokonez.com/flutter/flutter-listview-example-listview-builder

Flutter ListView example with ListView.builder

Top comments (0)