Delve into Flutter's UI framework to build high-quality Android apps, from creating contact profiles to enhancing them with themes and API integration, culminating in app publication.

Flutter is Google’s mobile UI framework used for crafting high-quality native interfaces on iOS and Android. This course focuses on building applications for the Android platform.

You’ll start by exploring the intricacies of Flutter and work your way up to implementing a contact profile page for an Android address book.

In the latter half of the course, you’ll learn to work with Flutter themes to spruce up the contact profile app you created. To round out your Flutter experience, you’ll also practice fetching data from a remote Application Programming Interface (API).

You’ll put into practice what you learn using live coding environments embedded within the course. By the time you’re done, you’ll be ready to create your own Android app and publish it to the Google Play Store.

Salahaddin Mohammed

I completed the course "Beginning Flutter: Android Mobile App Development" at the Educative platform. I have easily understood the course because of your great explanation. I want to thank you really!

Thank you letter from a student.

Beginning Flutter: Android Mobile App Development

# Introduction

In the last lesson, you learned how to receive the [`HttpResponse`](https://api.dart.dev/stable/2.7.1/dart-io/HttpResponse-class.html) response from API. In this lesson, you'll learn to convert responses into JSON, and parse them to render in Flutter ListView.

# Parsing JSON

Dart provides the [`dart:convert`](https://api.dart.dev/stable/2.7.1/dart-convert/dart-convert-library.html) library to parse JSON data. The `apiResponse` is the response returned from `http.get(apiEndPoint)`. The `json.decode()` method takes the response's `body` to parse it into Dart data structures. 

```
//importing the Dart package 
import 'dart:convert';

//Parsing API's HttpResponse to JSON format
json.decode(apiResponse.body)
```

## The `dart:convert` library

The `dart:convert` library parses the JSON response into the Dart collection `Map`.

The `json.decode(apiResponse.body)` method returns `Map` as [`Future`](https://api.dart.dev/stable/2.7.1/dart-async/Future-class.html). 
Futures are the objects that return the results of the asynchronous operations.  

The `getJson()` method fetches the `apiResponse` object of type `HttpResponse`. The `json.decode()` method takes `apiResponse`'s body using `apiResponse.body`, and converts it into JSON format.

```
static Future<Map> getJson() async {
 //API Key: To be replaced with your key
 final apiKey = "YOUR_API_KEY";

 //URL endpoint to fetch popular movies
 final apiEndPoint =
"http://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&sort_by=popularity.desc";

 //Making Http request 
 final apiResponse = await http.get(apiEndPoint);

 //Parsing data using `dart:convert` library 
 return json.decode(apiResponse.body); 
}
```

Let's store the response of the `getJson()` method in a `json` variable like below:

```
//Store JSON data returned into `data` variable
var data = await getJson();
```

Let's check out the API's JSON response structure next.

## JSON formatted response

The `data` variable holds the JSON formatted response like below. The JSON returned from the API look like this:

```
{ 
   "page":1,
   "total_results":10000,
   "total_pages":500,
   "results":[ 
      { 
         "popularity":407.45,
         "vote_count":2334,
         "video":false,
         "poster_path":"\/xBHvZcjRiWyobQ9kxBhO6B2dtRI.jpg",
         "id":419704,
         "adult":false,
         "backdrop_path":"\/5BwqwxMEjeFtdknRV792Svo0K1v.jpg",
         "original_language":"en",
         "original_title":"Ad Astra",
         "genre_ids":[ 
            12,
            18,
            9648,
            878,
            53
         ],
         "title":"Ad Astra",
         "vote_average":6,
         "overview":"The near future, a time when both hope and hardships drive humanity to look to the stars and beyond. While a mysterious phenomenon menaces to destroy life on planet Earth, astronaut Roy McBride undertakes a mission across the immensity of space and its many perils to uncover the truth about a lost expedition that decades before boldly faced emptiness and silence in search of the unknown.",
         "release_date":"2019-09-17"
      }
   ]
}
```

The "results" property in the JSON response above holds the array of movie listings as JSON objects. 

Since the `data` variable stores the JSON response above, `data[‘results’]` would give the array of popular movies as an array of JSON objects.

We will use this array of JSON objects to retrieve the movie information, and eventually render in Flutter applications.

Each JSON object of this array contains the movie information that needs to be displayed in each row of the app's movies list. 
In our app, we’re interested in displaying the title, description and poster image of the movie. We can use the following attributes from the above JSON object(s) to get that information.

* **title:** name of the movie

* **overview:** description of description

* **poster_path:** relative path for movie’s poster image at TMDB’s servers



In this lesson, we discuss converting  and parsing a network response into JSON in detail.

Introduction

Hello Flutter !

Build your Contact Profile Page

Flutter Themes

MovieApp: Fetching Data from REST API

Where to Go from Here

Appendix: Installation & Setting up Flutter (Optional)

Parsing JSON

Introduction