Flutter Rest Api Connection - How to get data?

Question

I am a beginner in Flutter. I was trying to extract data from api. I got response like this

  "status": "success",
  "data": {
    "integration": "051st93cqk90gqeyuikkkii1s5il5d3p",
    "rootcategory": 2,
    "slider": [
      {
        "image": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60b787d5beb55.png",
        "type": "category",
        "id": "6",
        "sort_order": "0.00"
      },
      {
        "image": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60b787fb306c7.png",
        "type": "product",
        "id": "5",
        "sort_order": "1.00"
      }
    ],
    "noimg": "https://omanphone.smsoman.com/api/media/omanphone_icon.png",
    "catimages": [
      {
        "id": "6",
        "img": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60b4857e526dd.jpg"
      },
      {
        "id": "7",
        "img": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60ba1d4142c0b.jpeg"
      },
      {
        "id": "8",
        "img": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60ba1d6440439.jpeg"
      },
      {
        "id": "11",
        "img": "https://omanphone.smsoman.com/mobile-admin/uploads/image_60ba1d7c6974c.jpeg"
      }
    ],
    "store_id": 1,
    "minimum_order_amount": null,
    "stores": [
      
    ],
    "currency": "OMR",
    "payment_imgs": [
      "https://omanphone.smsoman.com/api/media/payment_all.png",
      "https://omanphone.smsoman.com/api/media/cards.png"
    ],
    "voucher_cat": 151,
    "whatsapp": "96812345678",
    "celebrity_id": 0,
    "register_otp": "0",
    "mobile_formats": [
      {
        "webiste": "base",
        "len": 8,
        "country_code": "+968",
        "country": "OM",
        "id": 1
      }
    ],
    "cmspages": {
      "faq": 73,
      "about": 72,
      "terms": 71,
      "privacy": 70
    },
    "pay_method_imgs": [
      "https://omanphone.smsoman.com/pub/media/itoons/payment-icon.png",
      "https://omanphone.smsoman.com/pub/media/itoons/cod-icon.png"
    ]
  }
}

Using app.quicktype.io - I converted this data to model.

like below.


// To parse this JSON data, do
//
//     final slideData = slideDataFromJson(jsonString);

import 'dart:convert';

SlideData slideDataFromJson(String str) => SlideData.fromJson(json.decode(str));

String slideDataToJson(SlideData data) => json.encode(data.toJson());

class SlideData {
    SlideData({
        this.status,
        this.data,
    });

    String status;
    Data data;

    factory SlideData.fromJson(Map<String, dynamic> json) => SlideData(
        status: json["status"],
        data: Data.fromJson(json["data"]),
    );

    Map<String, dynamic> toJson() => {
        "status": status,
        "data": data.toJson(),
    };
}

class Data {
    Data({
        this.integration,
        this.rootcategory,
        this.slider,
        this.noimg,
        this.catimages,
        this.storeId,
        this.minimumOrderAmount,
        this.stores,
        this.currency,
        this.paymentImgs,
        this.voucherCat,
        this.whatsapp,
        this.celebrityId,
        this.registerOtp,
        this.mobileFormats,
        this.cmspages,
        this.payMethodImgs,
    });

    String integration;
    int rootcategory;
    List<Slider> slider;
    String noimg;
    List<Catimage> catimages;
    int storeId;
    dynamic minimumOrderAmount;
    List<dynamic> stores;
    String currency;
    List<String> paymentImgs;
    int voucherCat;
    String whatsapp;
    int celebrityId;
    String registerOtp;
    List<MobileFormat> mobileFormats;
    Cmspages cmspages;
    List<String> payMethodImgs;

    factory Data.fromJson(Map<String, dynamic> json) => Data(
        integration: json["integration"],
        rootcategory: json["rootcategory"],
        slider: List<Slider>.from(json["slider"].map((x) => Slider.fromJson(x))),
        noimg: json["noimg"],
        catimages: List<Catimage>.from(json["catimages"].map((x) => Catimage.fromJson(x))),
        storeId: json["store_id"],
        minimumOrderAmount: json["minimum_order_amount"],
        stores: List<dynamic>.from(json["stores"].map((x) => x)),
        currency: json["currency"],
        paymentImgs: List<String>.from(json["payment_imgs"].map((x) => x)),
        voucherCat: json["voucher_cat"],
        whatsapp: json["whatsapp"],
        celebrityId: json["celebrity_id"],
        registerOtp: json["register_otp"],
        mobileFormats: List<MobileFormat>.from(json["mobile_formats"].map((x) => MobileFormat.fromJson(x))),
        cmspages: Cmspages.fromJson(json["cmspages"]),
        payMethodImgs: List<String>.from(json["pay_method_imgs"].map((x) => x)),
    );

    Map<String, dynamic> toJson() => {
        "integration": integration,
        "rootcategory": rootcategory,
        "slider": List<dynamic>.from(slider.map((x) => x.toJson())),
        "noimg": noimg,
        "catimages": List<dynamic>.from(catimages.map((x) => x.toJson())),
        "store_id": storeId,
        "minimum_order_amount": minimumOrderAmount,
        "stores": List<dynamic>.from(stores.map((x) => x)),
        "currency": currency,
        "payment_imgs": List<dynamic>.from(paymentImgs.map((x) => x)),
        "voucher_cat": voucherCat,
        "whatsapp": whatsapp,
        "celebrity_id": celebrityId,
        "register_otp": registerOtp,
        "mobile_formats": List<dynamic>.from(mobileFormats.map((x) => x.toJson())),
        "cmspages": cmspages.toJson(),
        "pay_method_imgs": List<dynamic>.from(payMethodImgs.map((x) => x)),
    };
}

class Catimage {
    Catimage({
        this.id,
        this.img,
    });

    String id;
    String img;

    factory Catimage.fromJson(Map<String, dynamic> json) => Catimage(
        id: json["id"],
        img: json["img"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "img": img,
    };
}

class Cmspages {
    Cmspages({
        this.faq,
        this.about,
        this.terms,
        this.privacy,
    });

    int faq;
    int about;
    int terms;
    int privacy;

    factory Cmspages.fromJson(Map<String, dynamic> json) => Cmspages(
        faq: json["faq"],
        about: json["about"],
        terms: json["terms"],
        privacy: json["privacy"],
    );

    Map<String, dynamic> toJson() => {
        "faq": faq,
        "about": about,
        "terms": terms,
        "privacy": privacy,
    };
}

class MobileFormat {
    MobileFormat({
        this.webiste,
        this.len,
        this.countryCode,
        this.country,
        this.id,
    });

    String webiste;
    int len;
    String countryCode;
    String country;
    int id;

    factory MobileFormat.fromJson(Map<String, dynamic> json) => MobileFormat(
        webiste: json["webiste"],
        len: json["len"],
        countryCode: json["country_code"],
        country: json["country"],
        id: json["id"],
    );

    Map<String, dynamic> toJson() => {
        "webiste": webiste,
        "len": len,
        "country_code": countryCode,
        "country": country,
        "id": id,
    };
}

class Slider {
    Slider({
        this.image,
        this.type,
        this.id,
        this.sortOrder,
    });

    String image;
    String type;
    String id;
    String sortOrder;

    factory Slider.fromJson(Map<String, dynamic> json) => Slider(
        image: json["image"],
        type: json["type"],
        id: json["id"],
        sortOrder: json["sort_order"],
    );

    Map<String, dynamic> toJson() => {
        "image": image,
        "type": type,
        "id": id,
        "sort_order": sortOrder,
    };
}

Future<void> getDataFromInternet() async {
    //getting data from Internet
    try {
      var response =
          await http.get('https://omanphone.smsoman.com/api/configuration');

         } catch (error) {
      print(error);
    }
  }

I just want to get slider images. So What did I need to do in above code? I used http package and var response = await http.get('https://omanphone.smsoman.com/api/configuration'); did this. But I don't know how to extract it.

If you get data from API refer my answer [here](https://stackoverflow.com/a/68709502/13997210) or [here](https://stackoverflow.com/a/68533647/13997210) or [here](https://stackoverflow.com/a/68594656/13997210) hope it's helpful to you — Ravindra S. Patil, Sep 17 '21 at 06:19
I have checked that. but as a beginner. It's quite difficult. I am also trying, but could you please show me with my code. — Mahi, Sep 17 '21 at 06:26
try my answer [here](https://stackoverflow.com/a/69027721/13997210) — Ravindra S. Patil, Sep 17 '21 at 06:38
I got it, but how to use SliderData.fromJson() like this. means i need to parse the data SliderData.fromJson() and get the image. it's more professional may be I am wrong. — Mahi, Sep 17 '21 at 06:38
https://github.com/Daviswww/triathlon_flutter/blob/master/day14/lib/api_manager.dart — Daviswww, Sep 17 '21 at 07:06

Flutter Rest Api Connection - How to get data?

0 Answers0