Step By Step Tutorial in Learning Flutter: Lesson 7 — ListView and ListTile

In this step by step tutorial #MisterFlutter will teach you on how to add listview and listtile widget.

To give you an idea on how the application will look like

If you been following along with #MisterFlutter tutorials, you would need the Flutter code from previous tutorial Step By Step Tutorial In Learning Flutter: Lesson 6 — Creating New Screens Part 2 the code can be downloaded from here

To create a ListView and ListTile the syntax will be

ListView (
  children: <Widget>[
    ListTile (
      title: Text('This is the text of the item or list')
    ), //ListTile
  ], //Widget
) //ListView

How to add more items to the list on the ListTile? It is easy as below

ListView (
  children: <Widget>[
    
    // 1st item            
    ListTile (
      title: Text('Pikachu')
    ), //ListTile

   // 2nd item
    ListTile (
        title: Text('Richu')
    ), //ListTile
    
  ], //Widget
) //ListView

That means, you just copy and paste the ListTile and change the Text portion

Now, how can we add this to our application

To those who knows about Pokemon, we are using Pokemon website to counter check which Pokemon belongs to which category for example Electric, Grass etc. Credit goes to Pokemon website.

We can see these are the Electric Pokemon

From the Flutter code, scroll down to line 116 of file main.dart

We will change the code, first delete the lines of code as described below

Add the following code in adding ListView and ListTile

Code will be

ListView (
  children: <Widget>[
    ListTile (
      title:  Text('Pikachu'),
    ), //ListTile
  ], //Widget
) //ListView

Now let us Run the Flutter application

Click the Drawer

Next, click Electric

This will show you we have successfully added an item

Now, it is time to complete the rest, try doing it by your own by adding the remaining Electric Pokemon

After you have done, the Flutter code will look as below

The code will be

//This is our Electric Pokemon Screen
class ElectricScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Electric Pokemon"),
      ),
      body:
        ListView (
          children: <Widget>[
            ListTile (
              title:  Text('Pikachu'),
            ), //ListTile

            ListTile (
              title:  Text('Raichu'),
            ), //ListTile

            ListTile (
              title:  Text('Magneton'),
            ), //ListTile

            ListTile (
              title:  Text('Zapdos'),
            ), //ListTile

            ListTile (
              title:  Text('Pichu'),
            ), //ListTile

            ListTile (
              title:  Text('Electabuzz'),
            ), //ListTile

          ], //Widget
        ) //ListView

    ); //Scaffod
  }
}

Save and Hot Reload the Flutter application

We have successfully added ListView and ListTile to our Flutter application

If you have further questions or require further assistance please do not hesitate to leave a comment below.

Thank you for reading :) #MisterFlutter