create gridView using dynamic JSON data in Flutter

Question

I want to create gridView using dynamic JSON data in Flutter JSON Data

name;
description;
image;
price;
discountAmount;
status;

as gridview vertical *2

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Future<Products> getApiData() async {
    var url = "https://gorest.co.in/public-api/products";
    var response = await http.get(url);
    var jsonString = response.body;
    Products products = productsFromJson(jsonString);

    print(jsonString);
    return products;
  }

  @override
  void initState() {
    super.initState();
    getApiData().then((value) => print(value));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("helloo"),
        centerTitle: true,
      ),
    );
  }
}

I am building an app using flutter. I want to show a gridview and inside that gridview of data. I have a JSON Api which the response is like this.

// To parse this JSON data, do
//
//     final products = productsFromJson(jsonString);

Products productsFromJson(String str) => Products.fromJson(json.decode(str));

String productsToJson(Products data) => json.encode(data.toJson());

class Products {
  Products({
    this.code,
    this.meta,
    this.data,
  });

  int code;
  Meta meta;
  List<Datum> data;

  factory Products.fromJson(Map<String, dynamic> json) => Products(
        code: json["code"],
        meta: Meta.fromJson(json["meta"]),
        data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "code": code,
        "meta": meta.toJson(),
        "data": List<dynamic>.from(data.map((x) => x.toJson())),
      };
}

class Datum {
  Datum({
    this.id,
    this.name,
    this.description,
    this.image,
    this.price,
    this.discountAmount,
    this.status,
    this.categories,
  });

  int id;
  String name;
  String description;
  String image;
  String price;
  String discountAmount;
  bool status;
  List<Category> categories;

  factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        id: json["id"],
        name: json["name"],
        description: json["description"],
        image: json["image"],
        price: json["price"],
        discountAmount: json["discount_amount"],
        status: json["status"],
        categories: List<Category>.from(
            json["categories"].map((x) => Category.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "description": description,
        "image": image,
        "price": price,
        "discount_amount": discountAmount,
        "status": status,
        "categories": List<dynamic>.from(categories.map((x) => x.toJson())),
      };
}

class Category {
  Category({
    this.id,
    this.name,
  });

  int id;
  String name;

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

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

class Meta {
  Meta({
    this.pagination,
  });

  Pagination pagination;

  factory Meta.fromJson(Map<String, dynamic> json) => Meta(
        pagination: Pagination.fromJson(json["pagination"]),
      );

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

class Pagination {
  Pagination({
    this.total,
    this.pages,
    this.page,
    this.limit,
  });

  int total;
  int pages;
  int page;
  int limit;

  factory Pagination.fromJson(Map<String, dynamic> json) => Pagination(
        total: json["total"],
        pages: json["pages"],
        page: json["page"],
        limit: json["limit"],
      );

  Map<String, dynamic> toJson() => {
        "total": total,
        "pages": pages,
        "page": page,
        "limit": limit,
      };
}

like this one

Mimu Saha Tishan Mimu Saha Tishan · Accepted Answer · 2021-01-14T14:29:33

Try to get an idea and implement in this way in your main dart file

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("helloo"),
        centerTitle: true,
        body : GridView.builder(
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemCount: (snapshot.data.length) != null ? snapshot.data.length : 0, // your getApiData()
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                    itemBuilder: (context, index) {
                      return YourItemDesign(
                        product: snapshot.data[index],
                      );
                    },
                  ),
      ),
    );
  }

create gridView using dynamic JSON data in Flutter

1 Answers