Cannot get data API Flutter

Question

I want to get data of each element inside "invoices" to show but I don't know why it has a problem when I try to call "DataAllInvoice" class.

Please help me fix this problem.

Data API

{
    "invoices": [
        {
            "id": 3,
            "customer_id": 6,
            "customer_name": "Nguyễn Công Phượng",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-16T10:05:43",
            "total": 411107.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 4
        },
        {
            "id": 2,
            "customer_id": 3,
            "customer_name": "Nguyễn Văn A",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-14T10:05:43",
            "total": 411107.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 1
        },
        {
            "id": 1,
            "customer_id": 3,
            "customer_name": "Nguyễn Văn A",
            "creater_id": 2,
            "creater_name": "Lê Minh Tuấn",
            "create_time": "2021-05-14T09:28:43",
            "total": 222220.0,
            "description": "ABC",
            "manager_confirm_id": 0,
            "manager_confirm_name": null,
            "manager_confirm_date": null,
            "customer_confirm_date": null,
            "status_id": 5
        }
    ],
    "total": 3
}

Class to call API

 class GetInvoice{
     static int statusInvoice;
      createInvoice() async {
        final response = await http.get(
          Uri.parse("http://3.137.137.156:5000/api/rtm/v1/invoice/get-invoice?customer_id=0&pageNum=10&pageNo=1&from=%20&to=2021-05-14%2012%3A00%3A00"),
          headers: <String, String>{
            'Content-Type': 'application/json; charset=UTF-8',
            'Accept': 'application/json',
            'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIwMTIzNDU2Nzg4IiwiaWF0IjoxNjIyNjI0MjAyLCJleHAiOjE2MjMyMjkwMDJ9.zkf23Da4-TR5sVZgtXjXvczERhaNT1teeX5k-mQaKK6lbE0l28j5TwY5ZqPL252AEAaT8W1jyEUijG-rQiSu5Q',
          },

    );
    print("Status getApi Invoice:${response.statusCode}");

    statusInvoice = response.statusCode;

    if (response.statusCode == 200) {


      Invoice invoice = Invoice.fromJson(jsonDecode(response.body));
      List<DataAllInvoice> _invoice;
      for(int i=0;i < invoice.invoices.length;i++){
        if(invoice.invoices[i]!=null){
          Map<String,dynamic> map=invoice.invoices[i];
          _invoice.add(DataAllInvoice.fromJson(map)); ****Not working here****
        }
      }

      return _invoice;
    } else {
      // throw an exception.
      throw Exception('Failed to load data');
    }
  }

Class have a problem when I try to call - DataAllInvoice class

class DataAllInvoice {
  final int id, customer_id, creater_id, total, manager_confirm_id, status_id;
  final String customer_name, manager_confirm_name;
  final String creater_name, description;
  final DateTime create_time, manager_confirm_date, customer_confirm_date;

  DataAllInvoice(
      {this.id,
        this.customer_id,
        this.creater_id,
        this.total,
        this.manager_confirm_id,
        this.status_id,
        this.customer_name,
        this.manager_confirm_name,
        this.creater_name,
        this.description,
        this.create_time,
        this.manager_confirm_date,
        this.customer_confirm_date
      });

  factory DataAllInvoice.fromJson(Map<String, dynamic> json) {
    return DataAllInvoice(
      id: json[" id"],
      customer_id: json[" customer_id"],
      creater_id: json[" creater_id"],
      total: json[" total"],
      manager_confirm_id: json[" manager_confirm_id"],
      status_id: json[" status_id"],
      customer_name: json[" customer_name"],
      manager_confirm_name: json[" manager_confirm_name"],
      creater_name: json[" creater_name"],
      description: json[" description"],
      create_time: DateTime.parse(json[" create_time"]),
      manager_confirm_date: DateTime.parse(json[" manager_confirm_date"]),
      customer_confirm_date: DateTime.parse(json[" customer_confirm_date"]),
    );
  }

}

Invoice Class

class Invoice {
  final List invoices;
  final int total;

  Invoice({this.invoices, this.total});

  factory Invoice.fromJson(Map<String, dynamic> json) {
    return Invoice(
      invoices: json["invoices"],
      total: json["total"],
    );
  }
}

Answer 1

Try That :

So here Fetch Api Class

Sometime you gotta need to use Uri.parse() to put the URL inside it.

and you have to check the statusCode is equal 200 Otherwise there is problem.

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

class FetchApi {
  static Future<List<Articles>> fetchStory() async {
    var url = Uri.parse("https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=c5609b49c9274e89bacde5dcab5c52a2");

    http.Response response = await http.get(url);

    if (response.statusCode == 200) {
      Map<String, dynamic> resMap = jsonDecode(response.body);

      List listNews = resMap['articles'];

      return listNews.map((e) => Articles.fromJson(e)).toList();
    }

    return null;
  }
}

So the second Step :

you have to copy All Code Of Json and convert to Dart Code via This Link

You will get a code like this :

class NewsModel {
  String status;
  int totalResults;
  List<Articles> articles;

  NewsModel({this.status, this.totalResults, this.articles});

  NewsModel.fromJson(Map<String, dynamic> json) {
    status = json['status'];
    totalResults = json['totalResults'];
    if (json['articles'] != null) {
      articles = new List<Articles>();
      json['articles'].forEach((v) {
        articles.add(new Articles.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['status'] = this.status;
    data['totalResults'] = this.totalResults;
    if (this.articles != null) {
      data['articles'] = this.articles.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Articles {
  Source source;
  String author;
  String title;
  String description;
  String url;
  String urlToImage;
  String publishedAt;
  String content;

  Articles(
      {this.source,
        this.author,
        this.title,
        this.description,
        this.url,
        this.urlToImage,
        this.publishedAt,
        this.content});

  Articles.fromJson(Map<String, dynamic> json) {
    source =
    json['source'] != null ? new Source.fromJson(json['source']) : null;
    author = json['author'];
    title = json['title'];
    description = json['description'];
    url = json['url'];
    urlToImage = json['urlToImage'];
    publishedAt = json['publishedAt'];
    content = json['content'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.source != null) {
      data['source'] = this.source.toJson();
    }
    data['author'] = this.author;
    data['title'] = this.title;
    data['description'] = this.description;
    data['url'] = this.url;
    data['urlToImage'] = this.urlToImage;
    data['publishedAt'] = this.publishedAt;
    data['content'] = this.content;
    return data;
  }
}

class Source {
  String id;
  String name;

  Source({this.id, this.name});

  Source.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    return data;
  }
}

The Third step :

you have to create a Function loadData like this and after that you will put it inside initState to get data

watch this code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/StoryModel.dart';
import 'Fetch_Api.dart';
import 'New_Page.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Articles> listModel;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadData() ;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
        actions: [
          Padding(padding: EdgeInsets.only(right: 20.0),child: Icon(Icons.search_rounded))],
        backgroundColor: Colors.indigo,
      ),
      body: SafeArea(child: listModel != null ?  ListView.builder(
          shrinkWrap: true,
          itemCount: listModel.length,
          itemBuilder: (_ , index){
            Articles model = listModel[index] ;
            if(model.urlToImage != null)
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  InkWell(
                      onTap:()=> onPressCallback(model),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(30.0),
                          child: Image.network(model.urlToImage,)),),
                  Text(model.title,style: TextStyle(fontSize: 27.0,fontWeight:FontWeight.bold),),
                  SizedBox(height: 20,),],
              ),
            ) ;

            return SizedBox();

          }) : Center(child: Text('Loading data ... ')),)

    );
  }

  void loadData() async{

   listModel = await FetchApi.fetchStory() ;

   setState(() {});

  }


  void onPressCallback(Articles model) {
    Navigator.push(context, MaterialPageRoute(builder: (_) => NewPage(model: model)));

  }
}