Lists in Dart and Flutter

Dart, Google, Google Flutter -

Lists in Dart and Flutter

Introduction

Dart Combines Lists and Arrays

In Dart, a List is an ordered Collection (sometimes called a sequence). Unlike other languages, an Array and a List have been combined together and are the same thing.

A list is a number of items (objects) in an unordered structure. Additional items can be added to the list. Items can be updated or removed from the list if required. Lists may contain duplicate elements.

Iterators

You can use an iterator to go through the list items one by one programatically. As a developer, you will use iterators all the time.

Example

Note how the List in the example below (containing items 25, 63 and 84) is declared using square brackets, which are normally used for declaring Arrays in other languages.

void main(){
    //list
    var myList = [25, 63, 84];
    
    //get iterator to the list
    var myListIter = myList.iterator;
    
    //iterate over the list
    while(myListIter.moveNext()){
        print(myListIter.current);
    }
}

Example Output

This example outputs 25, 63 then 84.

Sorting

In Dart, Lists are not sorted by default. If you create a List of Strings then add 'Tom' and 'Mark' then they will stay in that order. However you can use the 'sort' method to change the order as required.

Example

This dart code creates a list then sorts it by first name then by last name: 

class Person{
  String _firstName;
  String _lastName;
  String _phone;
  
  Person(this._firstName, this._lastName, this._phone);
  
  toString(){
    return "${_firstName} ${_lastName} ${_phone}";
  }
}

void main() {
  List list = [
    Person("Mark", "Clow", "4043124462"),
    Person("Brant", "Sandermine", "4243124462"),
    Person("Phillip", "Perry", "4243124444")
  ];
  print("Not sorted: ${list}");

  list.sort((a, b) => a._firstName.compareTo(b._firstName));
  print("Sorted by first name: ${list}");
  
  list.sort((a, b) => a._lastName.compareTo(b._lastName));
  print("Sorted by last name: ${list}");  
}

Example Output

Not sorted: [Mark Clow 4043124462, Brant Sandermine 4243124462, Phillip Perry 4243124444]
Sorted by first name: [Brant Sandermine 4243124462, Mark Clow 4043124462, Phillip Perry 4243124444]
Sorted by last name: [Brant Sandermine 4243124462, Mark Clow 4043124462, Phillip Perry 4243124444]

Flutter Uses Lists Everywhere!

When you write UI code in Flutter, you build the UI using Widgets.

You will often build these Widgets using Lists. That is one of the reasons that Lists are so useful.

Many Widgets Contain Child Widgets

Many Flutter widgets act as containers to other (child) widgets and you specify the child widgets using lists. Many of these widgets are used to determine the layout of the UI ie. what UI elements go where.

When building a UI you could use a ListView widget to create a scrollable list of customer boxes.

Each customer box could use a Row widget to display the customer name, phone number and a button, displayed from left to right.

In fact you can break down almost 90% of the Flutter layout designs into Rows and Columns.

Column Widget

The Flutter Column widget acts as a container for multiple child widgets, laying them out vertically in the available vertical space.

If a Column widget had 3 children, they would be laid out like this:

child 1

    |

child 2

   |

child 3

Row Widget

The Row widget acts as a container for multiple child widgets, laying them out horizontally in the available vertical space.

If a Column widget had 3 children, they would be laid out like this:

child 1 - child 2 - child 3

Syntax for Creating a Container with Child Widgets 

When you invoke the constructor for the Container Widget, you pass in an argument 'children' which is a List of child Widget objects.

Example

Note that the UI below contains a Column widget that lays out three buttons, one red, one green and one blue. Note how those buttons are passed to the constructor of the Column object in a list.

    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Column"),
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Expanded(child: redButton),
              Expanded(child: greenButton),
              Expanded(child: blueButton)
            ],
          ),
        ));