How to make HTTP Get request in Flutter
Learn HTTP get request API call
Nowadays it is impossible to develop a mobile app without any HTTP network call. That’s why I have decided to cover this topic in today’s Flutter tutorial.
I will show you how you can make simple API call, get the data and parse it to your custom class model.
For the demo purpose we will be using the below free API which return the chunk of data in the form of JSON array.
API url, which return the data in JSON array.
https://jsonplaceholder.typicode.com/albums/1

Implementation
To implement the http get call in Flutter we need to do the following steps:
- Create a new Flutter project
- Need to add the HTTP library
- Hit the API request using HTTP library
- Convert the response into custom class model
- Display the data as per the requirement
Devs, since our goal is clear now, so let’s start with coding part.
Create a new Project
You can either create a new Flutter project or use your existing one. I am using the android studio as my IDE, you can use visual code as well 😎.
Setup the HTTP package
Flutter and dart provide the HTTP package to do the network related stuff, but this package does not come with Flutter by default. So let’s add it.
Get the latest version of the HTTP package and paste it in your pubspec.yaml
.
dependencies:
flutter:
sdk: flutter
http: ^0.12.2
Now just import the this line wherever you want to use this package.
import 'package:http/http.dart' as http;
Make network call using HTTP
We have added the required package into our project now let’s make use of it.
The http.get()
method returns the data using GET method.
Future<http.Response> fetchAlbum() {
return http.get(Uri.https('jsonplaceholder.typicode.com', 'albums/1'));
}
Convert the data into custom model class
The http.get()
returns the data in simple JSON format. To make use of this data we need to parse the JSON to our custom model class.
class Album {
int userId;
int id;
String title;
Album({this.userId, this.id, this.title}) ;
factory Album.fromJson(Map<String, dynamic> json) {
return Album(
userId: json['userId'],
id: json['id'],
title: json['title'],
);
}
}
As you can see in above code, I have created a our model class Album
.
Now, I will show you how to parse the received data into our custom model class.
Code to convert http.get()
response to Album
is below.
Future<Album> fetchAlbum() async {
final response = await http.get('https://jsonplaceholder.typicode.com/albums/1');
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}
Display the data
We will use the FutureBuilder
widget to display our data. It comes with the flutter the automatically updates the view for the asynchronous data sources.
FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.title);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
);
Complete code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(MyApp());
}
//Custom model for JSON
class Album {
int userId;
int id;
String title;
Album({this.userId, this.id, this.title}) ;
factory Album.fromJson(Map<String, dynamic> json) {
return Album(
userId: json['userId'],
id: json['id'],
title: json['title'],
);
}
}
//Future method to hit API
Future<Album> fetchAlbum () async {
var response = await http.get('https://jsonplaceholder.typicode.com/albums/1');
if (response.statusCode == 200) {
return Album.fromJson(jsonDecode(response.body));
} else {
//return error
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future<Album> futureAlbum;
@override
void initState() {
// TODO: implement initState
super.initState();
futureAlbum = fetchAlbum();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Json Parsing'),
),
body: Center(
child: FutureBuilder<Album> (
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.title);
} else {
return Text('Still Loading');
}
},
)
),
);
}
}