Implement a Flutter ListView using data from a REST API
Ive been learning Flutter for a few weeks now and it has been a really good experience. I used to use Objective-C and this seems to be way easier. Plus, when you develop using Flutter, you develop for both iOS and Android using the same code base. I am using a Mac with VSCode. Here are a few links which can get you up and running with Flutter:
- Install Flutter
- Set up an IDE. I prefer to use VSCode.
- Write your First Application
- Introduction to Flutter Widgets
These are the links which helped me learn Flutter for the first time. You can also check out the Flutter in Focus channel in Youtube if you like learning by watching videos.
After youve learned the basics, you can try out this example Ive done which displays a ListView widget with data retrieved from a REST API.
All source code for this example is available in my github repo.
The entrypoint of the applications is main.dart inside the lib directory. This example is a MaterialApp which has an AppBar and a ListView. The flutter code below is pretty straightforward and is easy to understand.
main.dart
This code is bootstrapped by a main function in the same file.
main.dart
main.dart The ListView widget code is in JobsListView.dart. To use it in main.dart, you need to import it.
After that, you can now create an instance of the JobsListView widget.
All the magic happens in the JobsListView.dart file. In this file, there are 2 classes, Job and JobsListView. Lets check out the code.
The Job class is a data structure which contains our entity, a Job. It also has the conversion of json to the Job structure. This conversion will be used for the data retrieved from the REST API which is in json format.
Job class The JobsListView class has a few functions.
The _fetchJobs[] function is an asynchronous function which returns a Future. This future contains the data which we will use to display in the ListView. I think a future is similar to a Promise in Javascript.
A future represents the result of an asynchronous operation, and can have two states: uncompleted or completed. [source]
You can change the value of jobsListAPIUrl if you want to point it to your own API. Here is the glitch project //glitch.com/~mock-json-service for the API I used for this example
Sample data returned by the API. Check out the actual response payload here //mock-json-service.glitch.me/
The _jobsListView[data] function returns/creates a ListView using the ListView builder.
The _tile[] function returns/creates a tile which will be used to create an item in the ListView.
Lastly, the JobsListView build method wires up everything. It is using a FutureBuilder. The FutureBuilder is used to integrate the ListView widget and the future we earlier created to asynchronously retrieve data from the REST API.
For this example, I created the REST API using nodeJS in glitch. I have it up, so feel free to use the same service in running this example. But if you need to modify it for your needs, feel free to remix it! //glitch.com/~mock-json-service
To run the example just run it.
Youll see something like this when you run it. In this screenshot, I am testing with an iOS simulator.
Thats it! Hope this will be useful to those who are learning Flutter! All source code for this example is available in my github repo.
If you need a someone to develop a Flutter app, I can help! You can reach me in LinkedIn or GitHub.
P.S. For updates, you can follow my blog and Twitter @donvito. Most of my tweets are about Docker, Kubernetes, GoLang, Cloud, DevOps, Agile and Startups. I also share code in my GitHub. If you want to know more about what I do, please add me in LinkedIn. I recently started a new youtube channel - I upload some tutorials there. Check it out!