API Integration in Flutter with JSON Parsing

Tanya Goel

27 September 2023

API Integration in Flutter with JSON Parsing using HTTP Package , where HTTP Package is the most basic and most used package in Flutter.

Read about some of our Flutter app development services

What is API?

API stands for Application Programming Interface.

API is the one which can be viewed as a set of rules and tools which are used to design various softwares.

We will use HTTP Package for API Integration in this blog, so we will need to add the dependency in the pubspec.yaml file.

http: ^0.12.2

1	http: ^0.12.2

For checking out the updated version of package, you can check out the package here – https://pub.dev/packages/http

After adding dependency, we will need to import the package in the file where we want need it.

import 'package:http/http.dart' as http;

1	import 'package:http/http.dart' as http;

Here we have used ‘ as ‘http’ ‘ , as we will need to access the methods declared inside this package instead of writing the complete code we will be accessing the methods with ‘http’.

While working on API Integration in Flutter, we will get to hear about the Future, Future Builder ..

So let’s first understand what does these terms mean and what is the use of these terms while integrating APIs.

Future is just like a function which is Asynchronous in nature. Asynchronous means ‘we do not know when it will complete its execution’.

The two keywords ‘async‘ and ‘await‘ are used in asynchronous programming.

Async function works synchronously until the first await keyword is encountered, i.e., within an async function body, all synchronous code before the first await keyword executes immediately.

FutureBuilder helps you in determining the correct state of Future and also helps in displaying the data once the Future has returned.

We will need to create Data Model for the parsing of JSON Data.

class Trailer {
  String id;
  String link;

  Trailer({this.id, this.link});

  Trailer.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    link = json['link'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['link'] = this.link;
    return data;
  }
}

class Trailer {

String id;

String link;

Trailer({this.id, this.link});

Trailer.fromJson(Map<String, dynamic> json) {

id = json['id'];

link = json['link'];

}

Map<String, dynamic> toJson() {

final Map<String, dynamic> data = new Map<String, dynamic>();

data['id'] = this.id;

data['link'] = this.link;

return data;

}

class MovieData {
  String id;
  String title;
  String year;
  String length;
  String rating;
  String ratingVotes;
  String poster;
  String plot;
  Trailer trailer;

  MovieData(
      {this.id,
      this.title,
      this.year,
      this.length,
      this.rating,
      this.ratingVotes,
      this.poster,
      this.plot,
      this.trailer,
     });

  MovieData.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    year = json['year'];
    length = json['length'];
    rating = json['rating'];
    ratingVotes = json['rating_votes'];
    poster = json['poster'];
    plot = json['plot'];
    trailer =
        json['trailer'] != null ? new Trailer.fromJson(json['trailer']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['year'] = this.year;
    data['length'] = this.length;
    data['rating'] = this.rating;
    data['rating_votes'] = this.ratingVotes;
    data['poster'] = this.poster;
    data['plot'] = this.plot;
    if (this.trailer != null) {
      data['trailer'] = this.trailer.toJson();
    }
    return data;
  }
}

class MovieData {

String id;

String title;

String year;

String length;

String rating;

String ratingVotes;

String poster;

String plot;

Trailer trailer;

MovieData(

{this.id,

this.title,

this.year,

this.length,

this.rating,

this.ratingVotes,

this.poster,

this.plot,

this.trailer,

});

MovieData.fromJson(Map<String, dynamic> json) {

id = json['id'];

title = json['title'];

year = json['year'];

length = json['length'];

rating = json['rating'];

ratingVotes = json['rating_votes'];

poster = json['poster'];

plot = json['plot'];

trailer =

json['trailer'] != null ? new Trailer.fromJson(json['trailer']) : null;

}

Map<String, dynamic> toJson() {

final Map<String, dynamic> data = new Map<String, dynamic>();

data['id'] = this.id;

data['title'] = this.title;

data['year'] = this.year;

data['length'] = this.length;

data['rating'] = this.rating;

data['rating_votes'] = this.ratingVotes;

data['poster'] = this.poster;

data['plot'] = this.plot;

if (this.trailer != null) {

data['trailer'] = this.trailer.toJson();

}

return data;

}

API Integration in Flutter Code

For decoding JSON Data, we will need to import ‘dart:convert’ which provides us the json.decode() method.

Here’s the final code,

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:url_launcher/url_launcher.dart';
import 'dart:convert';

import 'package:movie_app/movie.model.dart';

class MovieDetail extends StatefulWidget {
  @override
  _MovieDetailState createState() => _MovieDetailState();
}

class _MovieDetailState extends State<MovieDetail> {
  Map<String, String> queryParams = {
    'x-rapidapi-key': 'Enter your API Key',
    'x-rapidapi-host': 'imdb-internet-movie-database-unofficial.p.rapidapi.com',
  };

  Future<MovieData> getResponse() async {
    var responseData = await http.get(
        'https://imdb-internet-movie-database-unofficial.p.rapidapi.com/film/tt1375666',
        headers: queryParams);
    print("Response" + responseData.body);
    var data = json.decode(responseData.body);
    var newData = MovieData.fromJson(data);
    return newData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Movie Detail"),
        backgroundColor: Colors.black,
      ),
      body: SingleChildScrollView(
        child: FutureBuilder<MovieData>(
            future: getResponse(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                var data = snapshot.data;
                return Column(
                  children: [
                    Stack(
                      children: [
                        Container(
                          height: MediaQuery.of(context).size.height / 1.5,
                          width: MediaQuery.of(context).size.width,
                          child: Image.network(
                            data.poster,
                            fit: BoxFit.cover,
                          ),
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height / 1.5,
                          color: Colors.black.withOpacity(0.4),
                        ),
                        Column(
                          children: [
                            Container(
                              height: MediaQuery.of(context).size.height / 1.8,
                            ),
                            Align(
                              alignment: Alignment.bottomCenter,
                              child: ClipRRect(
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(40.0),
                                    topRight: Radius.circular(40.0)),
                                child: Container(
                                  color: Colors.white,
                                  height: MediaQuery.of(context).size.height,
                                  child: Padding(
                                    padding: const EdgeInsets.all(16.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(data.title,
                                            style: TextStyle(
                                                fontSize: 24.0,
                                                color: Colors.black,
                                                fontWeight: FontWeight.bold)),
                                        Padding(
                                          padding: const EdgeInsets.fromLTRB(0.0,8.0,8.0,8.0),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Text(data.year),
                                              Text("Rating : ${data.rating}"),
                                              Row(
                                                children: [
                                                  Icon(Icons
                                                      .access_time_outlined),
                                                  Text(data.length),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ),
                                        Text("PLOT",
                                            style: TextStyle(
                                                fontSize: 20.0,
                                                color: Colors.black,
                                                fontWeight: FontWeight.bold)),
                                                SizedBox(height: 10.0,),
                                        Text(data.plot,
                                            style: TextStyle(
                                              fontSize: 16.0,
                                              color: Colors.black,
                                            )),
                                            SizedBox(height: 20.0,),
                                      SizedBox(
                                        width: MediaQuery.of(context).size.width,
                                        height: 60.0,
                                        child: RaisedButton(
                                          color: Colors.black,
                                          onPressed: (){
                                          if (data.trailer.link != null){
                                              launch(data.trailer.link);
                                          }
                                          else{
                                             showDialog(context: context,child: Text("Something went wrong"));
                                          }
                                          
                                        },
                                    child: Text("Checkout the Trailer",style: TextStyle(color: Colors.white),),
                                        ),
                                      )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                );
              } else {
                return Center(child: CircularProgressIndicator());
              }
            }),

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

import 'package:url_launcher/url_launcher.dart';

import 'dart:convert';

import 'package:movie_app/movie.model.dart';

class MovieDetail extends StatefulWidget {

@override

_MovieDetailState createState() => _MovieDetailState();

}

class _MovieDetailState extends State<MovieDetail> {

Map<String, String> queryParams = {

'x-rapidapi-key': 'Enter your API Key',

'x-rapidapi-host': 'imdb-internet-movie-database-unofficial.p.rapidapi.com',

};

Future<MovieData> getResponse() async {

var responseData = await http.get(

'https://imdb-internet-movie-database-unofficial.p.rapidapi.com/film/tt1375666',

headers: queryParams);

print("Response" + responseData.body);

var data = json.decode(responseData.body);

var newData = MovieData.fromJson(data);

return newData;

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Movie Detail"),

backgroundColor: Colors.black,

body: SingleChildScrollView(

child: FutureBuilder<MovieData>(

future: getResponse(),

builder: (context, snapshot) {

if (snapshot.hasData) {

var data = snapshot.data;

return Column(

children: [

Stack(

children: [

Container(

height: MediaQuery.of(context).size.height / 1.5,

width: MediaQuery.of(context).size.width,

child: Image.network(

data.poster,

fit: BoxFit.cover,

Container(

height: MediaQuery.of(context).size.height / 1.5,

color: Colors.black.withOpacity(0.4),

Column(

children: [

Container(

height: MediaQuery.of(context).size.height / 1.8,

Align(

alignment: Alignment.bottomCenter,

child: ClipRRect(

borderRadius: BorderRadius.only(

topLeft: Radius.circular(40.0),

topRight: Radius.circular(40.0)),

child: Container(

color: Colors.white,

height: MediaQuery.of(context).size.height,

child: Padding(

padding: const EdgeInsets.all(16.0),

child: Column(

crossAxisAlignment:

CrossAxisAlignment.start,

children: [

Text(data.title,

style: TextStyle(

fontSize: 24.0,

color: Colors.black,

fontWeight: FontWeight.bold)),

Padding(

padding: const EdgeInsets.fromLTRB(0.0,8.0,8.0,8.0),

child: Row(

mainAxisAlignment:

MainAxisAlignment.spaceBetween,

children: [

Text(data.year),

Text("Rating : ${data.rating}"),

Row(

children: [

Icon(Icons

.access_time_outlined),

Text(data.length),

Text("PLOT",

style: TextStyle(

fontSize: 20.0,

color: Colors.black,

fontWeight: FontWeight.bold)),

SizedBox(height: 10.0,),

Text(data.plot,

style: TextStyle(

fontSize: 16.0,

color: Colors.black,

)),

SizedBox(height: 20.0,),

SizedBox(

width: MediaQuery.of(context).size.width,

height: 60.0,

child: RaisedButton(

color: Colors.black,

onPressed: (){

if (data.trailer.link != null){

launch(data.trailer.link);

}

else{

showDialog(context: context,child: Text("Something went wrong"));

}

child: Text("Checkout the Trailer",style: TextStyle(color: Colors.white),),

)

);

} else {

return Center(child: CircularProgressIndicator());

}

}),

In this code, we have created a Future method which returns an Instance of MovieData Model.

Within the FutureBuilder widget, we have created our UI and the future property takes the Future method which is getResponse() method.

The output of the code is —

Conclusion

In this blog, we have discussed the API Integration in Flutter with JSON Parsing using HTTP Package.

I hope it will help you in understanding the basic concepts.

You may also check our blog on API Calling through Retrofit – https://mobikul.com/retrofit-api-calling-in-flutter/

Thank you for reading!!

References –

https://flutter.dev/docs/cookbook/networking/fetch-data