HTTP POST method with Json on Body - Flutter/Dart

You can copy paste run full code below
assume your response JSON string like this, it's array

[    {        "status": 200,        "msg": "Ok",        "rows": [            {                "lid": "11031",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            },            {               "lid": "11032",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            },            {                 "lid": "11034",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            }        ],        "sql": "gg",        "reserved": null    }]

you can parse with related class

// To parse this JSON data, do////     final payload = payloadFromJson(jsonString);import 'dart:convert';List<Payload> payloadFromJson(String str) => List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));String payloadToJson(List<Payload> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));class Payload {    int status;    String msg;    List<Row> rows;    String sql;    dynamic reserved;    Payload({        this.status,        this.msg,        this.rows,        this.sql,        this.reserved,    });    factory Payload.fromJson(Map<String, dynamic> json) => Payload(        status: json["status"],        msg: json["msg"],        rows: List<Row>.from(json["rows"].map((x) => Row.fromJson(x))),        sql: json["sql"],        reserved: json["reserved"],    );    Map<String, dynamic> toJson() => {        "status": status,        "msg": msg,        "rows": List<dynamic>.from(rows.map((x) => x.toJson())),        "sql": sql,        "reserved": reserved,    };}class Row {    String lid;    String companyName;    String leadSourceName;    String leadSourceValue;    Row({        this.lid,        this.companyName,        this.leadSourceName,        this.leadSourceValue,    });    factory Row.fromJson(Map<String, dynamic> json) => Row(        lid: json["lid"],        companyName: json["CompanyName"],        leadSourceName: json["LeadSourceName"],        leadSourceValue: json["LeadSourceValue"],    );    Map<String, dynamic> toJson() => {        "lid": lid,        "CompanyName": companyName,        "LeadSourceName": leadSourceName,        "LeadSourceValue": leadSourceValue,    };}

and show ListView with

loading == true                ? CircularProgressIndicator()                : Expanded(                    flex: 1,                    child: ListView.builder(                        padding: const EdgeInsets.all(8),                        itemCount: payloadList == null ? 0 : payloadList[0].rows.length,                        itemBuilder: (BuildContext context, int index) {                          return Container(                            height: 50,                            child: Center(                                child: Text(                                    'lid ${payloadList[0].rows[index].lid}')),                          );                        }),                  ),

working demo

full code

import 'package:flutter/material.dart';// To parse this JSON data, do////     final payload = payloadFromJson(jsonString);import 'dart:convert';List<Payload> payloadFromJson(String str) =>    List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));String payloadToJson(List<Payload> data) =>    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));class Payload {  int status;  String msg;  List<Row> rows;  String sql;  dynamic reserved;  Payload({    this.status,    this.msg,    this.rows,    this.sql,    this.reserved,  });  factory Payload.fromJson(Map<String, dynamic> json) => Payload(        status: json["status"],        msg: json["msg"],        rows: List<Row>.from(json["rows"].map((x) => Row.fromJson(x))),        sql: json["sql"],        reserved: json["reserved"],      );  Map<String, dynamic> toJson() => {        "status": status,        "msg": msg,        "rows": List<dynamic>.from(rows.map((x) => x.toJson())),        "sql": sql,        "reserved": reserved,      };}class Row {  String lid;  String companyName;  String leadSourceName;  String leadSourceValue;  Row({    this.lid,    this.companyName,    this.leadSourceName,    this.leadSourceValue,  });  factory Row.fromJson(Map<String, dynamic> json) => Row(        lid: json["lid"],        companyName: json["CompanyName"],        leadSourceName: json["LeadSourceName"],        leadSourceValue: json["LeadSourceValue"],      );  Map<String, dynamic> toJson() => {        "lid": lid,        "CompanyName": companyName,        "LeadSourceName": leadSourceName,        "LeadSourceValue": leadSourceValue,      };}void main() => runApp(MyApp());class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        // This is the theme of your application.        //        // Try running your application with "flutter run". You'll see the        // application has a blue toolbar. Then, without quitting the app, try        // changing the primarySwatch below to Colors.green and then invoke        // "hot reload" (press "r" in the console where you ran "flutter run",        // or simply save your changes to "hot reload" in a Flutter IDE).        // Notice that the counter didn't reset back to zero; the application        // is not restarted.        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }}class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  // This widget is the home page of your application. It is stateful, meaning  // that it has a State object (defined below) that contains fields that affect  // how it looks.  // This class is the configuration for the state. It holds the values (in this  // case the title) provided by the parent (in this case the App widget) and  // used by the build method of the State. Fields in a Widget subclass are  // always marked "final".  final String title;  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;  List<Payload> payloadList;  bool loading = false;  String jsonString = '''  [    {        "status": 200,        "msg": "Ok",        "rows": [            {                "lid": "11031",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            },            {               "lid": "11032",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            },            {                 "lid": "11034",                "CompanyName": "WALLS ICE CREAM",                "LeadSourceName": "Website",                "LeadSourceValue": "ONLINE ADS"            }        ],        "sql": "gg",        "reserved": null    }]  ''';  void _incrementCounter() {    setState(() {      loading = true;      payloadList = payloadFromJson(jsonString);      loading = false;      // This call to setState tells the Flutter framework that something has      // changed in this State, which causes it to rerun the build method below      // so that the display can reflect the updated values. If we changed      // _counter without calling setState(), then the build method would not be      // called again, and so nothing would appear to happen.      _counter++;    });  }  @override  Widget build(BuildContext context) {    // This method is rerun every time setState is called, for instance as done    // by the _incrementCounter method above.    //    // The Flutter framework has been optimized to make rerunning build methods    // fast, so that you can just rebuild anything that needs updating rather    // than having to individually change instances of widgets.    return Scaffold(      appBar: AppBar(        // Here we take the value from the MyHomePage object that was created by        // the App.build method, and use it to set our appbar title.        title: Text(widget.title),      ),      body: Center(        // Center is a layout widget. It takes a single child and positions it        // in the middle of the parent.        child: Column(          // Column is also a layout widget. It takes a list of children and          // arranges them vertically. By default, it sizes itself to fit its          // children horizontally, and tries to be as tall as its parent.          //          // Invoke "debug painting" (press "p" in the console, choose the          // "Toggle Debug Paint" action from the Flutter Inspector in Android          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)          // to see the wireframe for each widget.          //          // Column has various properties to control how it sizes itself and          // how it positions its children. Here we use mainAxisAlignment to          // center the children vertically; the main axis here is the vertical          // axis because Columns are vertical (the cross axis would be          // horizontal).          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            loading == true                ? CircularProgressIndicator()                : Expanded(                    flex: 1,                    child: ListView.builder(                        padding: const EdgeInsets.all(8),                        itemCount: payloadList == null ? 0 : payloadList[0].rows.length,                        itemBuilder: (BuildContext context, int index) {                          return Container(                            height: 50,                            child: Center(                                child: Text(                                    'lid ${payloadList[0].rows[index].lid}')),                          );                        }),                  ),            Text(              'You have pushed the button this many times:',            ),            Text(              '$_counter',              style: Theme.of(context).textTheme.display1,            ),          ],        ),      ),      floatingActionButton: FloatingActionButton(        onPressed: _incrementCounter,        tooltip: 'Increment',        child: Icon(Icons.add),      ), // This trailing comma makes auto-formatting nicer for build methods.    );  }}

Step 1:Create a Model class for your responsefor example

Sample JSON structure //In your response results is row

{    "count": 49,    "next": null,    "previous": null,    "results": [{        "id": 4,        "name": "PC",        "image_background": "https://media.rawg.io/media/games/562/562553814dd54e001a541e4ee83a591c.jpg"    }]}class PlatformResult{  int count;  String next;  final List<Results> result;  PlatformResult({this.count,this.next,this.result});  factory PlatformResult.fromJson(Map<String, dynamic> json) {    return PlatformResult(      count: json['count'],      next:json['next'],      result: parseResult(json),    );  }  static List<Results> parseResult(resultJson) {    var list = resultJson['results'] as List;    List<Results> resultsList =    list.map((data) => Results.fromJson(data)).toList();    return resultsList;  }}class Results {  final int id;  final String name;  final String image_background;  Results({this.id, this.name,this.image_background});  factory Results.fromJson(Map<String, dynamic> parsedJson) {    return Results(id: parsedJson['id'], name: parsedJson['name'],image_background:parsedJson['image_background']    );

}

Step 2:

Function to get result:

PlatformResult platformResult;getData(BuildContext context) async {  var res = await http      .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});  print(res.body);  if (res.statusCode == 200) {    print(res.body);    platformResult = PlatformResult.fromJson(json.decode(res.body));  }  return  platformResult;}

Step 3:

Use FutureBuilder to display your list data

   FutureBuilder(            future:   getData(context),            builder: (BuildContext context,AsyncSnapshot  platformData)              {               if (platformData.hasData != null) {                    return ListView.builder(                      shrinkWrap: true,                      itemCount: platformData==null?0:   platformResult.result.length,                      itemBuilder: (context, index) {                        return Card(                          child: Container(                            child: Column(children: <Widget>[                               Text('${platformResult.result[index].name}'),                              new Container(                                  width: 190.0,                                  height: 190.0,                                  decoration: new BoxDecoration(                                      shape: BoxShape.circle,                                      image: new DecorationImage(                                          fit: BoxFit.fill,                                          image: new NetworkImage(                                            platformResult.result[index].image_background,                                          )                                      )                                  )),                            ],),                          ),                        );                      },                    );                  }                  else {                    return Center(child: CircularProgressIndicator(                        valueColor: AlwaysStoppedAnimation<Color>(                            Colors.green)));                  }              };)