DEV Community

Cover image for Flutter ListView and Features
Baransel
Baransel

Posted on

Flutter ListView and Features

Hello, in this lesson we will cover Flutter ListView and Features, Listview comparison on Android. When creating ListView in Android, especially when creating lists with images, we needed extra model class, but when creating ListView in Flutter we don't need any model class. For this, it is quite simple to create a listview in flutter.

First, let's examine a simple ListView structure consisting of only texts and make an example.

So what is the structure we call ListView?

We can think of ListView as lists with multiple elements. This list can be composed of only articles, or it can be created with mixed data. ListView takes children because it consists of multiple widgets.

ListView(
  children: const [
    ListTile(
      title: Text("Baransel.dev"),
    ),
    ListTile(
      title: Text("Flutter"),
    ),
    ListTile(
      title: Text("Courses"),
    ),
  ],
)
Enter fullscreen mode Exit fullscreen mode

We created each element inside the ListView widget, which we saw above, by adding the ListTile widget. Here, just using the title property as text, we get the following output.

Listview Example for Flutter

Of course, ListTile, which is one of the most used widgets in ListView, has other features.

ListTile properties for Flutter

Just like we add a title, we can explain it by adding a subtitle with subtitle.

ListTile(
  title: Text("Baransel.dev"),
  subtitle: Text("https://baransel.dev"),
),
Enter fullscreen mode Exit fullscreen mode

ListTile subtitle

If we want, we can customize it further and place icons at the beginning or end of our articles.

ListView(
          children: const [
            ListTile(
              title: Text("Baransel.dev"),
              subtitle: Text("https://baransel.dev"),
              leading:
                  Icon(Icons.arrow_forward_ios_rounded), //icon in the beginning
            ),
            ListTile(
              title: Text("Flutter"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.auto_awesome), //icon in the end
            ),
            ListTile(
              title: Text("Courses"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.audiotrack), //icon in the end
            ),
          ],
        ),
Enter fullscreen mode Exit fullscreen mode

ListTile Icon

Follow my blog for more baransel.dev.

Discussion (0)