HTTP API calling in flutter

In the mobile app development lifecycle, communicating with the server(via API) to fetch or store data is one of the basic needs. In today’s blog let’s check HTTP API calling in flutter.

Fetching data from the internet is very important for most applications.

First of all, let’s understand API.

Application programming interface (API)

An application programming interface (API) is an interface that defines interactions between multiple software applications or mixed hardware-software intermediaries.

It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.

Flutter provides tools for API calling such as HTTP package.

Please follow below steps for HTTP API calling in flutter

Step1: Create a flutter project.

Step2: Add the below dependencies in pubspec.yaml file

http: ^0.13.3

1	http: ^0.13.3

Now, run the command “flutter pub get” to download the dependencies.

Step3: Let’s create a class for API calling.

import 'dart:convert';
import 'package:http/http.dart';
import 'model.dart';

class HttpService {
  final String postsURL = "https://jsonplaceholder.typicode.com/posts";

  Future<List<User>> getPosts() async {
    Response res = await get(Uri.parse(postsURL));

    if (res.statusCode == 200) {
      List<dynamic> body = jsonDecode(res.body);

      List<User> posts = body
          .map(
            (dynamic item) => User.fromJson(item),
      )
          .toList();

      return posts;
    } else {
      throw "Unable to retrieve posts.";
    }
  }
}

import 'dart:convert';

import 'package:http/http.dart';

import 'model.dart';

class HttpService {

final String postsURL = "https://jsonplaceholder.typicode.com/posts";

Future<List<User>> getPosts() async {

Response res = await get(Uri.parse(postsURL));

if (res.statusCode == 200) {

List<dynamic> body = jsonDecode(res.body);

List<User> posts = body

.map(

(dynamic item) => User.fromJson(item),

)

.toList();

return posts;

} else {

throw "Unable to retrieve posts.";

}

Step4: Now, create a model class to store the API data.

import 'dart:convert';
List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
  User({
    this.userId,
    this.id,
    this.title,
    this.completed,
  });
  int userId;
  int id;
  String title;
  bool completed;
  factory User.fromJson(Map<String, dynamic> json) => User(
    userId: json["userId"],
    id: json["id"],
    title: json["title"],
    completed: json["completed"],
  );
  Map<String, dynamic> toJson() => {
    "userId": userId,
    "id": id,
    "title": title,
    "completed": completed,
  };
}

import 'dart:convert';

List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));

String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class User {

User({

this.userId,

this.id,

this.title,

this.completed,

});

int userId;

int id;

String title;

bool completed;

factory User.fromJson(Map<String, dynamic> json) => User(

userId: json["userId"],

id: json["id"],

title: json["title"],

completed: json["completed"],

);

Map<String, dynamic> toJson() => {

"userId": userId,

"id": id,

"title": title,

"completed": completed,

};

}

Step5: Then, call the api method from your main.dart class.

  FutureBuilder<List<User>> _buildBody(BuildContext context) {
    final HttpService httpService = HttpService();
    return FutureBuilder<List<User>>(

      future: httpService.getPosts(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final List<User> posts = snapshot.data;
          return _buildPosts(context, posts);
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

FutureBuilder<List<User>> _buildBody(BuildContext context) {

final HttpService httpService = HttpService();

return FutureBuilder<List<User>>(

future: httpService.getPosts(),

builder: (context, snapshot) {

if (snapshot.connectionState == ConnectionState.done) {

final List<User> posts = snapshot.data;

return _buildPosts(context, posts);

} else {

return Center(

child: CircularProgressIndicator(),

);

}

);

}

Step6: Now, we can display our data in the form of a list. Please check below the complete code for main.dart class.

import 'dart:collection';
import 'package:flutter/material.dart';
import 'http_class.dart';
import 'model.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
// to set the root of app.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'API Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Flutter - API Implementation"),
      ),
      body: _buildBody(context),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {

        },
        label:Icon(Icons.cancel),
        backgroundColor: Colors.green,
      ),
    );
  }

  // build list view & manage states
  FutureBuilder<List<User>> _buildBody(BuildContext context) {
    final HttpService httpService = HttpService();
    return FutureBuilder<List<User>>(

      future: httpService.getPosts(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final List<User> posts = snapshot.data;
          return _buildPosts(context, posts);
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  // build list view & its tile
  ListView _buildPosts(BuildContext context, List<User> posts) {
    return ListView.builder(
      itemCount: posts.length,
      padding: EdgeInsets.all(8),
      itemBuilder: (context, index) {
        return Card(
          elevation: 4,
          child: ListTile(
            title: Text(
              posts[index].title,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            subtitle: Text(posts[index].completed.toString()),
          ),
        );
      },
    );
  }
}

100

import 'dart:collection';

import 'package:flutter/material.dart';

import 'http_class.dart';

import 'model.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// to set the root of app.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.green,

visualDensity: VisualDensity.adaptivePlatformDensity,

home: MyHomePage(title: 'API Demo Page'),

);

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

void initState() {

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

title: Text("Flutter - API Implementation"),

body: _buildBody(context),

floatingActionButton: FloatingActionButton.extended(

onPressed: () {

label:Icon(Icons.cancel),

backgroundColor: Colors.green,

);

}

// build list view & manage states

FutureBuilder<List<User>> _buildBody(BuildContext context) {

final HttpService httpService = HttpService();

return FutureBuilder<List<User>>(

future: httpService.getPosts(),

builder: (context, snapshot) {

if (snapshot.connectionState == ConnectionState.done) {

final List<User> posts = snapshot.data;

return _buildPosts(context, posts);

} else {

return Center(

child: CircularProgressIndicator(),

);

}

);

}

// build list view & its tile

ListView _buildPosts(BuildContext context, List<User> posts) {

return ListView.builder(

itemCount: posts.length,

padding: EdgeInsets.all(8),

itemBuilder: (context, index) {

return Card(

elevation: 4,

child: ListTile(

title: Text(

posts[index].title,

style: TextStyle(fontWeight: FontWeight.bold),

subtitle: Text(posts[index].completed.toString()),

);

}

Finally, you can run the code, and see the below results.

For more details and methods you can refer the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you for a better understanding of API calling in flutter.

Thanks for reading

API calling in Flutter HTTP

Shikha Melkani 24 May 2021

. . .

4 comments

Algassime Mar 14, 2022 at 4:08 pm

Thanks you

anchit (Moderator) Apr 12, 2022 at 11:02 pm
Your Welcome

Reply

Abdirahman Abdi May 17, 2022 at 6:08 pm

great,thank you

anchit (Moderator) Aug 7, 2022 at 11:03 pm

Your Welcome

Reply

HTTP API calling in flutter

Application programming interface (API)

Please follow below steps for HTTP API calling in flutter

Leave a Comment Cancel Reply

4 comments

Message Sent!