Making Http requests and Using Json in Dart's Flutter Framework

What Will I Learn?

You will learn how to make a HTTP GET request in the Flutter framework to get information from an API
You will learn how to parse Json and then serve it to other parts of your Flutter application
You will learn how to build List Views and dynamic User Interfaces in Flutter
You will learn how to make use of the Hot Reload feature in Flutter for iterative development

Requirements

IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
The Dart SDK and the Flutter SDK
A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

Intermediate

Description

In this video tutorial, we look at how we can make HTTP requests and Parse JSON from a Web API using Dart's Flutter Mobile Framework. Specifically, we look use an HTTP GET request to retrieve data from the Star Wars API, Swapi, which we then can serve onto a List View widget in our Flutter Application. This style of application is useful because it allows us to serve data without attaching a database to our application or hard-coding the date into our application. We can also make use of this method to retrieve data from external APIs such as the Google Maps API or any other public API service.

Our Application makes use of Dart's Async Isolates to call the HTTP request so that the User interface can render while the request is being made. If the request fails, the User interface still will render properly. The HTTP request grabs ten elements which populates our List View Widget and we can chose which properties we want to serve to our Front-End from the JSON. We also make use of Flutter's Hot Reload feature in this tutorial and show off the Flutter Visual Studio Code Extensions.

The Dart-Code Visual Studio Code Extension can be found here

The source code for this project can be found here

Video Tutorial

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors