create gridView using dynamic JSON data in Flutter - 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

Answer 1

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],
);
},
),
),
);
}