In this tutorial, we are going to build Flutter APP to send data to JSONPlaceholder(Fake Online REST API for Testing and Prototyping). This is an example app that can post a text data to a web server and receive the same data as a response if resource successfully created. Having the ability to do HTTP Post Request Flutter app to the remote server is required for most apps.

1. Add Package
In this example, we are using an HTTP dart package for creating an HTTP post request. It is a composable, Future-based library for making HTTP requests. This package contains high-level functions and classes that make it easy to consume HTTP resources.
Add following dependencies to your package’s pubspec.yaml file.You can find the latest version of the http package on the pub website.
dependencies: http: ^0.12.0
2.Create Post Class
First, we’ll need to create a Post
class that contains the data from our network request. It will also include a factory constructor that allows us to create a Post
from json.
class Post { final String userId; final int id; final String title; final String body; Post({this.userId, this.id, this.title, this.body}); factory Post.fromJson(Mapjson) { return Post( userId: json['userId'], id: json['id'], title: json['title'], body: json['body'], ); } Map toMap() { var map = new Map (); map["userId"] = userId; map["title"] = title; map["body"] = body; return map; } }
3. Make a HTTP POST request
In this example, we’ll send a sample post to the JSONPlaceholder REST API using the http.post()method.
FuturecreatePost(String url, {Map body}) async { return http.post(url, body: body).then((http.Response response) { final int statusCode = response.statusCode; if (statusCode < 200 || statusCode > 400 || json == null) { throw new Exception("Error while fetching data"); } return Post.fromJson(json.decode(response.body)); }); } // Call Web services new RaisedButton( onPressed: () async { Post newPost = new Post( userId: "123", id: 0, title: titleControler.text, body: bodyControler.text); Post p = await createPost(CREATE_POST_URL, body: newPost.toMap()); print(p.title); },
http.post()
Future
that contains a Response
http.Response
Complete example
import 'dart:async'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class Post { final String userId; final int id; final String title; final String body; Post({this.userId, this.id, this.title, this.body}); factory Post.fromJson(Mapjson) { return Post( userId: json['userId'], id: json['id'], title: json['title'], body: json['body'], ); } Map toMap() { var map = new Map (); map["userId"] = userId; map["title"] = title; map["body"] = body; return map; } } Future createPost(String url, {Map body}) async { return http.post(url, body: body).then((http.Response response) { final int statusCode = response.statusCode; if (statusCode < 200 || statusCode > 400 || json == null) { throw new Exception("Error while fetching data"); } return Post.fromJson(json.decode(response.body)); }); } class MyApp extends StatelessWidget { final Future post; MyApp({Key key, this.post}) : super(key: key); static final CREATE_POST_URL = 'https://jsonplaceholder.typicode.com/posts'; TextEditingController titleControler = new TextEditingController(); TextEditingController bodyControler = new TextEditingController(); @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: "WEB SERVICE", theme: ThemeData( primaryColor: Colors.deepOrange, ), home: Scaffold( appBar: AppBar( title: Text('Create Post'), ), body: new Container( margin: const EdgeInsets.only(left: 8.0, right: 8.0), child: new Column( children: [ new TextField( controller: titleControler, decoration: InputDecoration( hintText: "title....", labelText: 'Post Title'), ), new TextField( controller: bodyControler, decoration: InputDecoration( hintText: "body....", labelText: 'Post Body'), ), new RaisedButton( onPressed: () async { Post newPost = new Post( userId: "123", id: 0, title: titleControler.text, body: bodyControler.text); Post p = await createPost(CREATE_POST_URL, body: newPost.toMap()); print(p.title); }, child: const Text("Create"), ) ], ), )), ); } } void main() => runApp(MyApp());