Flutter Flutter Networking | RRTutors

Flutter Networking & JSON and Serialization

Now a days every mobile application communicate with remote server on Networking


Flutter provides a sky_enginedevelopment kit in the Flutter engine , which contains a _http library that contains various operation classes related to encapsulated http requests. In this article, we will introduce _http the use of related operation classes and the use _httpof three-party dio network libraries based on encapsulation


HTTP Introduction

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. HTTP works as a request-response protocol between a

client and server. A protocol describes how machines communicate with each other using messages. A protocol defines the format of these messages



Make HTTPRequest

http support is located dart:io, so to create an HTTP client, we need to add an import


import 'dart:io';


var httpClient = new HttpClient();


HTTP API uses Dart Futures in the return value . We recommend using the async/ await syntax to call the AP


Involve below steps to handle the HttpClient

  • Create client

  • Construct Uri

  • Make a request, wait for a request, and you can also configure request headers and body

  • Close the request and wait for a response

  • Decode the content of the response


get() async {

 var httpClient = new HttpClient();

 var uri = new Uri.http(

     'domain', 'path to api', params in map object);

 var request = await httpClient.getUrl(uri);

 var response = await request.close();

 var responseBody = await response.transform(UTF8.decoder).join();



Decode and encode JSON


The dart:convertlibrary makes it easy to decode and encode JSON.

Decode a simple JSON string and parse the response into a Map


Map data = JSON.decode(responseBody);

String name=mapNews[0]['name']

Check Example 


class NetwotkHTTP extends StatefulWidget {

NetwotkHTTP({Key key}) : super(key: key);



_NetwotkHTTPState createState() => new _NetwotkHTTPState();



class _NetwotkHTTPState extends State<NetwotkHTTP> {





void initState() {

 // TODO: implement initState





_getNewsData() async {


 var url='https://newsapi.org/v2/sources?apiKey=API_KEY&page=1';

 //var url = 'https://httpbin.org/ip';

 var httpClient = new HttpClient();


 var listNewsdata="";

 try {

  var request = await httpClient.getUrl(Uri.parse(url));

  var response = await request.close();

  if (response.statusCode == HttpStatus.OK) {

   var json = await response.transform(utf8.decoder).join();

   var data = jsonDecode(json);


     List<dynamic>hm=data['sources'] as List;


     setState(() {


      print("errorr SetState"+mapNews.toString());



  } else {

   print("errorr ");

   listNewsdata =

   'Error Resposne :\nHttp status ${response.statusCode}';


 } catch (exception) {

  print("errorr $exception");

  listNewsdata = 'Failed getting News Data $exception';



 // If the widget was removed from the tree while the message was in flight,

 // we want to discard the reply rather than calling setState to update our

 // non-existent appearance.

 if (!mounted) return;





Widget build(BuildContext context) {

 var spacer = new SizedBox(height: 32.0);


 return new Scaffold(

  appBar: AppBar(title: Text("News API WITH HTTP CLIENT"),backgroundColor: Colors.pink,),

  body: SingleChildScrollView(


    child: new Center(

     child: new Column(

      mainAxisAlignment: MainAxisAlignment.center,

      children: <Widget>[




        shrinkWrap: true,

        primary: false,

           itemCount: mapNews.length,

           itemBuilder: (ctx,pos){

        return Card(

         elevation: 5,

         child: Container(

          margin: EdgeInsets.all(5),

          padding: EdgeInsets.all(5),

          child: InkWell(

           onTap: (){},

           child: Row(

            children: <Widget>[


              height: 50,

              width: 50,

              decoration: ShapeDecoration(shape: CircleBorder(),color: Colors.pink),

              child: Center(child: Text(mapNews[pos]['name'].substring(0,1).toUpperCase(),style: TextStyle(fontSize: 30,color: Colors.white),)),




              child: Column(

               crossAxisAlignment: CrossAxisAlignment.start,

               children: <Widget>[

                Text(mapNews[pos]['name'],style: TextStyle(fontSize: 18,color: Colors.black),),


                Text(mapNews[pos]['description'],style: TextStyle(fontSize: 12,color: Colors.grey[800]),maxLines: 3,),



















HTTP Library

http  Library http.dartfile package HttpClientclass is our common network requests the operation class, which is an abstract class, the specific operation by the http_impl.dart document _HttpClient class that implements the class encapsulates http request various methods, including get, post, put, delete, patchAnd head wait for the request


Let's look at the usage method through the following example


In this example  using the NewsAPI to fetch the news headlines. News API is a simple HTTP REST API for searching and retrieving live articles from all over the web


To call api in Flutter we need to add http: ^0.12.0+2 dependencies in the pubspec.yaml file


The above same example with http library


static Future callNewsCAtegory() async{

 var url="API_KEY";

 return  get('https://newsapi.org/v2/sources?apiKey=$url&page=1');



The above method will return the response data, that we are handle in below code



 var callNews = NewsCategoryModel.callNewsCAtegory();


   var response=json.decode(data.body );


   var listNewsdata=response['sources']as List;

   setState(() {






 },onError: (error){

   print("Result Error $error");






POST Method 

Map<String, String> queryParameters = {'key': 'value', 'key': 'value'};

Map<String, String> header = {'key': 'value'};

post("API_URL",body: queryParameters,headers: header);


JSON Parsing


After getting the response from the API we need to parse the data, for this we are using the  import 'dart:convert' library 


var callNews = NewsCategoryModel.callNewsCAtegory();


 var response=json.decode(data.body );


 var listNewsdata=response['sources']as List

Var listNews=listNewsdata.map<NewsCategoryModel>((model)=>NewsCategoryModel.fromJson(model)).toList();



The  NewsCategoryModel class like below


class NewsCategoryModel {

 String id;

 String name;

 String description;

 String url;

 String category;

 String language;

 String country;















 static Future callNewsCAtegory() async{

   var url="API_KEY";

   return  get('https://newsapi.org/v2/sources?apiKey=$url&page=1');




Flutter - ListVew - Search Filter - NewsApplication