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’…

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"),
    ),
  ],
)

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"),
),

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
            ),
          ],
        ),

ListTile Icon

Follow my blog for more baransel.dev.


Print Share Comment Cite Upload Translate
APA
Baransel | Sciencx (2024-03-28T16:07:24+00:00) » Flutter ListView and Features. Retrieved from https://www.scien.cx/2021/11/03/flutter-listview-and-features/.
MLA
" » Flutter ListView and Features." Baransel | Sciencx - Wednesday November 3, 2021, https://www.scien.cx/2021/11/03/flutter-listview-and-features/
HARVARD
Baransel | Sciencx Wednesday November 3, 2021 » Flutter ListView and Features., viewed 2024-03-28T16:07:24+00:00,<https://www.scien.cx/2021/11/03/flutter-listview-and-features/>
VANCOUVER
Baransel | Sciencx - » Flutter ListView and Features. [Internet]. [Accessed 2024-03-28T16:07:24+00:00]. Available from: https://www.scien.cx/2021/11/03/flutter-listview-and-features/
CHICAGO
" » Flutter ListView and Features." Baransel | Sciencx - Accessed 2024-03-28T16:07:24+00:00. https://www.scien.cx/2021/11/03/flutter-listview-and-features/
IEEE
" » Flutter ListView and Features." Baransel | Sciencx [Online]. Available: https://www.scien.cx/2021/11/03/flutter-listview-and-features/. [Accessed: 2024-03-28T16:07:24+00:00]
rf:citation
» Flutter ListView and Features | Baransel | Sciencx | https://www.scien.cx/2021/11/03/flutter-listview-and-features/ | 2024-03-28T16:07:24+00:00
https://github.com/addpipe/simple-recorderjs-demo