Working with REST API is a common task on the current mobile application workflow. In flutter, it's an easy task to work with REST API. If you are finding a step by step tutorial on Flutter REST API call with an example then you are in right place. In this post, I'll show you a step by step tutorial on how to make HTTP request on REST API and feed JSON data to our application.
First, add the Flutter HTTP package into your pubspec.yaml file in the dependency section.
dependencies:
http: <latest_version>
Add the internet permission into AndroidManifest.xml file.
<uses-permission android:name="android.permission.INTERNET" />
In this section, We sent an HTTP GET request to our JSON API service. Here I'm using a demo JSON API service which will return me a list of demo user data. To make an HTTP request, make a future type method.
Use these lines of import statements.
import 'dart:async' show Future;
import 'dart:convert';
import 'package:http/http.dart' as http;
Future method for getting data from JSON API.
List users;
bool loading = false;
Future<String> getUsers() async {
setState(() => this.loading = true);
var response = await http.get('https://jsonplaceholder.typicode.com/users');
setState(() => users = json.decode(response.body.toString()));
setState(() => this.loading = false);
return 'success';
}
I have declared a users list and a bool type variable loading
for showing loading an indication when our app will make an HTTP request to the server. Call the getUsers method inside the initState
method.
@override
void initState() {
super.initState();
this.getUsers();
}
new ListView.builder(
itemCount: users == null ? 0 : users.length,
itemBuilder: (BuildContext context, int index) {
var name = users[index]['name'];
var email = users[index]['email'];
return new Column(
children: <Widget>[
new ListTile(
leading: CircleAvatar(
child: new Icon(Icons.account_box),
),
title: Text(name),
subtitle: Text(email),
),
new Divider(),
],
);
})
Here is full code for work with REST API and bind data to a listview with a loading indicator.
import 'package:flutter/material.dart';
import 'dart:async' show Future;
import 'dart:convert';
import 'package:http/http.dart' as http;
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
List users;
bool loading = false;
Future<String> getUsers() async {
setState(() => this.loading = true);
var response =
await http.get('https://jsonplaceholder.typicode.com/users');
setState(() => users = json.decode(response.body.toString()));
setState(() => this.loading = false);
return 'success';
}
@override
void dispose() {
super.dispose();
}
@override
void initState() {
super.initState();
this.getUsers();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('REST API'),
),
body: new Column(
children: <Widget>[
this.loading
? new Center(
child: new CircularProgressIndicator(),
heightFactor: 12.0,
)
: new Expanded(
child: new ListView.builder(
itemCount: users == null ? 0 : users.length,
itemBuilder: (BuildContext context, int index) {
var name = users[index]['name'];
var email = users[index]['email'];
return new Column(
children: <Widget>[
new ListTile(
leading: CircleAvatar(
child: new Icon(Icons.account_box),
),
title: Text(name),
subtitle: Text(email),
),
new Divider(),
],
);
}),
),
],
),
);
}
}
If you find this tutorial post helpful. Please share with others.