Flutter — List and Network Data

Flutter is a new SDK created by Google in order to create cross platform Applications. It is based on Dart, a programming language also created by Google. While still in alpha, Flutter can create help create Application that will render at full 60fps on your device.

You can find a prettier version of this tutorial here.

As a first tutorial on Flutter, I will assume that you followed the basic tutorial of Flutter that you can find here. You will learn how to create a simple list by gathering data from a website. I will use a school website which you can crawl to retrieve basic student data.

You will end up with this result :

The Student Model

First we have to create a model to store the data of a student. We will have only 3 data to keep, the name, email and the photo’s url of the student.

Student ListItem

Then we will have to display each student information in a Widget. For that let’s use ListTile. We also want to open the default mail application when we touch a row to send a mail (why would we look up for someone otherwise ?). For ListTile, the leading represent the icon on the left of the Widget, and the onTap will launch a method we will explain later.

Let’s explain this a bit, for title and subtitle it's fairly explicit, you just assign a text based on the student model. For leading you create a Widget named CircleAvatar, it's just a round placeholder for the backgroundImage. The backgroundImage is a Image loaded from the network : let's use NetworkImage. The argument of this Widget is just the URL of your image.

You can see how easy it is to load an image ! In Android, for the easiest way, you would still have to use Glide and a custom background to get the same result !

For the onTap function, I’ve used a third party library to open a custom URL : url_launcher. Add import 'package:url_launcher/url_launcher.dart'; at the beginning of your file and modify pubspec.yaml as such :

You can finally define your function:

Student List

You have now to define the Widget that will display this list. For doing so, we will create a StatelessWidget with a list of Student.

In the build function, we create a ListView, and convert the list of students in a list of _StudentListItem. The “fat arrow” syntax can be strange at first. => expr is just a shortcut for { return expr; }. Once you've built the list of _StudentListItem, each element is display in the ListView. We've also added some padding to ListView with EdgeInsets.symmetric.

We’re good with the list of students ! Let’s see the Application Layout

Application Layout

We are now going to create the main screen of our application. Let’s start by defining its theme and main Widget:

We use here a MaterialApp with a blue theme. Let’s now create the homepage.

We use a StatefulWidget, because we want to store a state : the state of the list of student. Let’s create the only state our widget will have :

A lot of things to explain ! First the TextEditingController is used to get the current state of a TextField. We will use his value for gathering the right data.

The _getStudents function use the async tag because we will retrieve the student list asynchronously. We use the setState function before and after getting the new data. At each call the Widget will call the build function to refresh the data.

Then in the build function we create a childWidget, to hold the StudentList if there is some, or just to show a CircularProgressIndicator. We put the CircularProgressIndicator in a Center Widget to get it in the right place.

Finally we’re building the app layout with a Scaffold. This Widget just helps creating a basic Material Design layout with an appBar and a body.

We also used an Expanded Widget to get the children to take all the available space. Let’s add a FloatingActionButton to search and we’re done !

Now dig into the data gathering !

Data Gathering

The website we will use as our database is this one. It relies on a simple html form to request data.

We will only select students based on their name so we will only focus on this input. You would be able to create other filters.

We are going to need an html parser, hopefully there is a dart library for this ! Modify pubspec.yaml and add this line :

And you can import it : import 'package:html/parser.dart' show parse;.

Let’s create our POST request :

We first create an HttpClient to handle our request. We’re then defining the URL. With the keyword await, we’re asking to wait for the response of the server to continue.
 The body argument is the POST request we’re sending to the server. Thanks to our TextEditingController we can retrieve the value of the field.

The server is French and does not handle accented characters, so we’re also replacing some letters.

Then we parse the answer to be able to use it.
 A typical answer for a student is sent as such :

I know, it could be prettier …

Regular Expression

To match the exact part we want, we will use regular expressions. But first let’s find all the photos url.

We can get every elements of a certain class with getElementsByClassName. Then we create a RegExp object based on a regular expression that we apply on the inner html of the selected class. for instance here the inner html would be <img src="/photo.php?uid=name&amp;h=80&amp;w=62" border="0">.
 We then add the values to the list.

Let’s repeat this process for the email address:

And finally we can create our list of student.

Let’s not forget to close the httpClient !


If you run your application, you should be able to get the list of the student based on their name !
 You can find the source of the project right here.
 Feel free to ask anything in the comment section below !

Originally published at www.lyok.fr

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.