How To Easily Use List In Flutter Dart

In this Flutter post, we will be understanding how to create and use list in Flutter Dart. A proper Flutter example will be provided in which the creation and usage of lists will be implemented practically. I hope after reading this post, you will be able to create and use list in Flutter with ease.

Outline

1. What is List In Flutter Dart?
2. Creating List In Flutter Dart(Multiple Examples)
3. Example 1: Simple List In Flutter Dart
4. Example 2: Nested List In Flutter Dart
5. Example 3: List Of Maps In Flutter Dart
6. Fetching Data From List In Flutter Dart(Multiple Examples)
7. Example 1: Fetch Data From Simple List
8. Example 2: Fetch Data From Nested List
9. Example 3: Fetch Data From List Of Maps
10. Conclusion

What is List In Flutter Dart?

As the name suggests, it is the list means it will have some number of items stored in it. We will start with creating a simple list in Flutter, then we will move forward in implementing more complex lists and also we will cover how to get the items from those lists.

Creating List In Flutter Dart(Multiple Examples)

Let’s start by first creating a simple list. After that, complex lists will also be covered. See the below examples:

Example 1: Simple List In Flutter Dart

In order to create a simple list in Flutter. See the below steps:

• Use the List keyword as a return type of the list.
• Specify the return type of list items like this: <String>.
• Give name to the list.
• Use the square brackets to define the body of list like this: [ ].

If this looks confusing then see the below code in which a simple list is implemented by following the steps mentioned above:

List<String> listOfColors=[
      'White',
      'Orange',
      'Green'
 ];

You can see that this is how you define a simple list in Flutter.

Example 2: Nested List In Flutter Dart

Now let’s see how to create a nested list(list inside list) in Dart. See the below code:

List<List<String>> listOfColors=[
          ['White1','Orange1','Green1'],
          ['White2','Orange2','Green2'],
          ['White3','Orange3','Green3'],
 ];

As you can see this is how you can easily define a nested list in Flutter.

Example 3: List Of Maps In Flutter Dart

Map uses a key value pair to store the items.  Let’s see how to create a list of maps in Flutter:

 List<Map<String,dynamic>> listOfColors=[
    {
     'id':345,
     'color':'White'
    },
    {
     'id':386,
     'color':'Green'
    }, 
    {
     'id':524,
     'color':'Blue'
    },
 ];

This is how you can easily create a list of maps in Flutter Dart.

So we now know how to create simple as well as complex lists in Flutter. Let’s now see how to fetch the values from those lists.

Fetching Data From List In Flutter Dart(Multiple Examples)

We will be using the above implement list examples for fetching the data. As you may already know that each item in a list has a specific index. Index shows the position of item in list. The index starts from 0. Let’s now fetch data of some items to demonstrate how it works:

Example 1: Fetch Data From Simple List

List<String> listOfColors=[
        'White',
        'Orange',
        'Green'
];

In order to get the orange text from the list. Let’s first see what index it has. I think you have already guessed the index, its 1, the reason is that as I said above that the index of list starts from 0. It means white has the 0 index. See the below code:

listOfColors[1]

Output:

Orange

Example 2: Fetch Data From Nested List

Let’s first reuse the nested list mentioned above then we will see how to fetch data from it.

List<List<String>> listOfColors=[
        ['White1','Orange1','Green1'],
        ['White2','Orange2','Green2'],
        ['White3','Orange3','Green3'],
];

In order to get data from nested list, we have to use the below code:

listOfColors[1][2]

Output:

Green2

The above code means takes the second item of listOfColors, the reason is that index is 1 and then take the third item of that nested list as the index is 2. So we get the Green2 string from the nested list.

Example 3: Fetch Data From List Of Maps

Let’s first rewrite the list of maps. See the below code:

 List<Map<String,dynamic>> listOfColors=[ 
        { 'id':345, 'color':'White' }, 
        { 'id':386, 'color':'Green' }, 
        { 'id':524, 'color':'Blue' }, ];

As you already know that map uses key value pair, we will use fetch the value using the key of maps. Let’s take the id and color of the third map in list. See the below code:

listOfColors[2]['id']
listOfColors[2]['color']

Output:

524
Blue

Conclusion

To conclude, hope you have learned how to properly use list in Flutter as I have used multiple examples to explain how it works and how you can use it. I would love to have your valuable feedback on this post.

I would also highly encourage you to visit my other posts on astounding Flutter templates, Flutter app development guides, Flutter widgets, Flutter books, beautiful Flutter animations, Flutter web development and many more.

Some post links are listed in the below section. Search box of this site or the menu navigation bar can be used to find others. Thanks for reading this post.