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