Flutter http package

The easiest way to make Network calls.

Contents

• Installation
• Import
• Usage
• Http methods
  1. Get
  2. Post
  3. Form
  4. Put
  5. Patch
  6. Delete
• Extras
• Code
• Plugin
• Similar plugin

Installation

http | Dart Package

dependencies:
  http: ^0.12.2

Import

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

Usage

For this example I created variable to store url prefix, status_code and data variables to show result in the screen. Here I used dummy API calls to demonstrate the package and also used “flutter_json_widget” package for to make the tutorial very easy and clean.

dynamic _data;
int statusCode = 0;
final String url = 'https://jsonplaceholder.typicode.com';

Created 6 buttons for every HTTP method.
Example:

RaisedButton(onPressed: get, child: Text("Get")),

Http Methods

Let’s discuss about HTTP methods and examples.

• Get Request

var response = await http.get(
  url + "/posts/1",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
).timeout(Duration(seconds: 60)) 
.catchError((error) {
  /// NEED TO IMPLEMENT: Do what you want to show in the screen
});

Result:

• Post Request

/// This json going to post
Map<String, dynamic> postJson = {
  "title": 'foo',
  "body": 'bar',
  "userId": 1,
};

/// Sending http post request
var response = await http.post(
  url + "/posts",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: json.encode(postJson) /// Convert json to string
).timeout(Duration(seconds: 60)) 
.catchError((error) { 
  /// NEED TO IMPLEMENT: Do what you want to show in the screen
});

Result:

• Form Request

In MultipartRequest requires uri and also it’s bit different from other request types.
Note: Http form request only accepts files and String type values

/// This json going to post
Map<String, String> postJson = {
  "title": 'foo',
  "body": 'bar'
};

/// converting url to uri
var uri = Uri.parse("https://postman-echo.com/post");

/// creating http form request
var request = http.MultipartRequest(
  'POST',
  uri,
)..fields.addAll(postJson);

/// sending http form request
var response = await request.send()
    .timeout(Duration(seconds: 60)) 
    .catchError((error) { 
      /// NEED TO IMPLEMENT: Do what you want to show in the screen
    });

You can add files like this

..files.add(await http.MultipartFile.fromPath(
'package', 'build/package.tar.gz',
contentType: MediaType('application', 'x-tar')));

Result:

• Put Request

/// This json going to post
Map<String, dynamic> postJson = {
  "id": 1,
  "title": 'foo',
  "body": 'bar',
  "userId": 1,
};

/// sending http put request
var response = await http.put(
  url + "/posts/1",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: json.encode(postJson) /// Convert json to string
).timeout(Duration(seconds: 60))
.catchError((error) {
  /// NEED TO IMPLEMENT: Do what you want to show in the screen
});

Result:

• Patch Request

/// This json going to post
Map<String, dynamic> postJson = {
  "title": 'foo',
};

/// sending http patch request
var response = await http.patch(
  url + "/posts/1",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  body: json.encode(postJson) /// Convert json to string
).timeout(Duration(seconds: 60))
.catchError((error) {
  /// NEED TO IMPLEMENT: Do what you want to show in the screen
});

Result:

• Delete Request

/// sending http delete request
var response = await http.delete(url + "/posts/1")
    .timeout(Duration(seconds: 60))
    .catchError((error) {
      /// NEED TO IMPLEMENT: Do what you want to show in the screen
    });

Result:

Extras

Above example I used custom timeout 60 seconds for my request. If you want to add custom timeout this is the example.

var response = await http.delete(url + "/posts/1")
    .timeout(Duration(seconds: 60))
    .catchError((error) {
      /// NEED TO IMPLEMENT: Do what you want to show in the screen
    });

When the request processing exceeds 60 seconds. It generates timeout error and caught by “catchError” and also it catches HTTP statuscode errors like 403, 404 etc,

If you need more HTTP status codes click here

HTTP response status codes

Code

Complete source code available on my github feel free to checkout.

bloggerraviteja/flutter_http

Plugin

http | Dart Package

Similar plugins

My favorite plugin

dio | Dart Package

Who are comes from android native this will be used

retrofit | Dart Package

Which plugin you are using in your project let me know in the responses. If you are begginer tell me is this article helps you or not.

Don’t forget to clap and follow me in the medium for more quality tutorials.