Json Mapping-Data Class Generator-Progress Indicator in Flutter
if we have to get data in json formate than we first have to map the data in catalog.dart file like this
import 'dart:convert';
class CatalogModel {
static List<Item> items;
}
class Item {
final int id;
final String name;
final String desc;
final num price;
final String color;
final String image;
Item({
this.id,
this.name,
this.desc,
this.price,
this.color,
this.image,
});
Item copyWith({
int id,
String name,
String desc,
num price,
String color,
String image,
}) {
return Item(
id: id ?? this.id,
name: name ?? this.name,
desc: desc ?? this.desc,
price: price ?? this.price,
color: color ?? this.color,
image: image ?? this.image,
);
}
Map<String, dynamic> toMap() {
return {
'id': id,
'name': name,
'desc': desc,
'price': price,
'color': color,
'image': image,
};
}
factory Item.fromMap(Map<String, dynamic> map) {
if (map == null) return null;
return Item(
id: map['id'],
name: map['name'],
desc: map['desc'],
price: map['price'],
color: map['color'],
image: map['image'],
);
}
String toJson() => json.encode(toMap());
factory Item.fromJson(String source) => Item.fromMap(json.decode(source));
@override
String toString() {
return 'Item(id: $id, name: $name, desc: $desc, price: $price, color: $color, image: $image)';
}
@override
bool operator ==(Object o) {
if (identical(this, o)) return true;
return o is Item &&
o.id == id &&
o.name == name &&
o.desc == desc &&
o.price == price &&
o.color == color &&
o.image == image;
}
@override
int get hashCode {
return id.hashCode ^
name.hashCode ^
desc.hashCode ^
price.hashCode ^
color.hashCode ^
image.hashCode;
}
}
In home page load this json file data
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
import 'package:flutter_catalog/models/catalog.dart';
import 'package:flutter_catalog/widgets/drawer.dart';
import 'package:flutter_catalog/widgets/item_widget.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final int days = 30;
final String name = "Codepur";
@override
void initState() {
super.initState();
loadData();
}
loadData() async {
await Future.delayed(Duration(seconds: 2));
final catalogJson =
await rootBundle.loadString("assets/files/catalog.json");
final decodedData = jsonDecode(catalogJson);
var productsData = decodedData["products"];
CatalogModel.items = List.from(productsData)
.map<Item>((item) => Item.fromMap(item))
.toList();
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Catalog App"),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: (CatalogModel.items != null && CatalogModel.items.isNotEmpty)
? ListView.builder(
itemCount: CatalogModel.items.length,
itemBuilder: (context, index) => ItemWidget(
item: CatalogModel.items[index],
),
)
: Center(
child: CircularProgressIndicator(),
),
),
drawer: MyDrawer(),
);
}
}