Doing HTTP Calls in Flutter and Parsing Data

By | October 7, 2018

Here is a simple example of doing Http calls in Flutter.

In this example we will try to fetch some JSON value from the below url

You can read more from here.

Add Dependencies

First you need to add the http plugin in dependencies.

http: <latest_version>

The latest version of http can be found here (


Lets look at a simple example where we fetch some data and show it in the UI.

import ‘package:flutter/material.dart’;
import ‘dart:async’;
import ‘dart:convert’;

import ‘package:http/http.dart’ as http;

Future<Post> fetchPost() async {
final response =
await http.get(‘’);

if (response.statusCode == 200) {
// If the call to the server was successful, parse the JSON
return Post.fromJson(json.decode(response.body));
} else {
// If that call was not successful, throw an error.
throw Exception(‘Failed to load post’);

class Post {
final int userId;
final int id;
final String title;
final String body;

Post({this.userId,, this.title, this.body});

factory Post.fromJson(Map<String, dynamic> json) {
return Post(
userId: json[‘userId’],
id: json[‘id’],
title: json[‘title’],
body: json[‘body’],

class ServiceCall extends StatefulWidget {
ServiceCall({Key key, this.title}) : super(key: key);
final String title;

_ServiceCallState createState() => _ServiceCallState();

class _ServiceCallState extends State<ServiceCall> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
body: Center(
child: FutureBuilder<Post>(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(‘USER ID : ${}’),
Text(‘TITLE : ${}’),
Text(‘BODY : ${}’),
} else if (snapshot.hasError) {
return Text("Error : ${snapshot.error}");
// By default, show a loading spinner
return CircularProgressIndicator();

One thought on “Doing HTTP Calls in Flutter and Parsing Data

  1. Pingback: GridView Demo in Flutter – CODERZHEAVEN

Leave a Reply

Your email address will not be published. Required fields are marked *