Flutter 有没有人可以帮我使用Hero Widget将json数据解析到另一个页面？

我希望有人能帮助我将JSON数据解析到Flitter中HERO小部件的另一个页面。我将数据解析到第一页，但未能将数据解析到另一页

使JSON数据的模型使用PODO样式 这将处理所有要解析到视图类的JSON数据

class ProductResponse{
  List<ProductDetail> results;
  ProductResponse({this.results});
  ProductResponse.fromJson(Map<String,dynamic> json){
    if(json['results'] !=null){
      results=new List<ProductDetail>();
      json['results'].forEach((v){
        results.add(new ProductDetail.fromJson(v));
      });
    }
  }
Map<String,dynamic> toJson(){
  final Map<String, dynamic> data = new Map<String, dynamic>();
  if (this.results != null) {
    data['results'] = this.results.map((v) => v.toJson()).toList();
  }
  return data;
}
}
class ProductDetail{
  int phone;
  int price;
  int qty;
  String amount;
  String place;
  String image_name;
  String image_url;
  String vendor_name;
  String description;
  String category;
  String productName;
  String images;
  ProductDetail({this.phone, this.price, this.qty, this.amount, this.vendor_name,
    this.description, this.category, this.productName, this.images,this.image_name,this.image_url,this.place});
   ProductDetail.fromJson(Map<String,dynamic> json){
        phone = json['phone'];
        price = json["price"];
        qty = json['qty'];
        amount =json['amount'];
        vendor_name =json['vendor_name'];
        description = json['description'];
        category = json['category'];
        images = json['images'];
        productName = json['productName'];
        image_url =json['image_url'];
        image_name =json['image_name'];
        place =json['place'];
  }
  Map<String,dynamic> toJson(){
     final Map<String,dynamic> data =new Map<String,dynamic>();
     data['phone'] =this.phone;
     data['price'] =this.price;
     data['qty'] =this.qty;
     data['amount'] =this.amount;
     data['vendor_name'] =this.vendor_name;
     data['description'] =this.description;
     data['category'] =this.category;
     data['productName'] =this.productName;
     data['images'] =this.images;
     data['place'] = this.place;
     data['image_url'] =this.image_url;
     data['image_name'] =this.image_name;
     return data;
  }
}

类ProductResponse{
列出结果；
ProductResponse（{this.results}）；
ProductResponse.fromJson（映射json）{
如果（json['results']！=null）{
结果=新列表（）；
json['results'].forEach（（v）{
添加（newproductdetail.fromJson（v））；
});
}
}
映射到JSON（）{
最终地图数据=新地图（）；
if（this.results！=null）{
data['results']=this.results.map（（v）=>v.toJson（））.toList（）；
}
返回数据；
}
}
类ProductDetail{
国际电话；
国际价格；
整数数量；
字符串数量；
串位；
字符串图像名称；
字符串图像链接；
字符串供应商名称；
字符串描述；
字符串类别；
字符串名称；
字符串图像；
ProductDetail（{this.phone，this.price，this.qty，this.amount，this.vendor\u name，
this.description、this.category、this.productName、this.images、this.image\u name、this.image\u url、this.place}）；
ProductDetail.fromJson（映射json）{
phone=json['phone']；
price=json[“price”]；
qty=json['qty']；
amount=json['amount']；
vendor_name=json['vendor_name']；
description=json['description']；
category=json['category']；
images=json['images']；
productName=json['productName']；
image_url=json['image_url']；
image_name=json['image_name']；
place=json['place']；
}
映射到JSON（）{
最终地图数据=新地图（）；
数据['phone']=this.phone；
数据['price']=此价格；
数据['qty']=此数量；
数据['amount']=此.amount；
数据['vendor\u name']=此.vendor\u名称；
数据['description']=this.description；
数据['category']=this.category；
数据['productName']=此.productName；
数据['images']=this.images；
数据['place']=this.place；
数据['image\u url']=this.image\u url；
数据['image\u name']=this.image\u name；
返回数据；
}
}

创建将向服务器发出请求的类

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:kilimo_biashara1/Model/Dialogs.dart';
import 'package:kilimo_biashara1/Model/ProductDetail.dart';
import 'package:kilimo_biashara1/Products/ProductPage.dart';

class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}
class _ProductsState extends State<Products> {
  String url = "put your api url here";
  ProductResponse detail;// declare the class from PODO

  fetchProduct() async {
    var response = await http.get(url);
    var decodeJson = jsonDecode(response.body);
    print("response" + response.body);
    setState(() {
      detail = ProductResponse.fromJson(decodeJson);
    });
    print(detail);//debug
  }    
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: detail == null
            ? Center(
          child: CircularProgressIndicator(),
        )

          : StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: detail.results.length,
          itemBuilder: (BuildContext context, int index) {
            return ProductPage(
                detail: detail.results[index]
            ); //Return the product page
          },
          staggeredTileBuilder: (_) => StaggeredTile.fit(2),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        )

    );
  }

}

导入'dart:convert'；
进口“包装：颤振/材料.省道”；
将“package:http/http.dart”导入为http；
导入“包：颤振交错网格视图/颤振交错网格视图.省道”；
导入“package:kilimo_biashara1/Model/Dialogs.dart”；
导入“package:kilimo_biashara1/Model/ProductDetail.dart”；
导入“package:kilimo_biashara1/Products/ProductPage.dart”；
类产品扩展了StatefulWidget{
@凌驾
_ProductsState createState（）=>\u ProductsState（）；
}
类_ProductsState扩展状态{
String url=“将您的api url放在此处”；
ProductResponse detail；//从PODO声明类
fetchProduct（）异步{
var response=wait http.get（url）；
var decodeJson=jsonDecode（response.body）；
打印（“响应”+响应.正文）；
设置状态（）{
detail=ProductResponse.fromJson（decodeJson）；
});
打印（细节）；//调试
}    
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
正文：详细信息==null
？中心(
子对象：CircularProgressIndicator（），
)
：StaggedGridView.countBuilder(
交叉轴计数：4，
itemCount:detail.results.length，
itemBuilder:（构建上下文，int索引）{
返回产品页(
细节：细节。结果[索引]
)；//返回产品页
},
交错文件生成器：（）=>交错文件.fit（2），
主轴间距：4.0，
交叉轴间距：4.0，
)
);
}
}

以下是产品页面的示例代码。在此产品页面中，它将显示包含少量详细信息的卡片

import 'package:flutter/material.dart';
import 'package:kilimo_biashara1/Products/DetailProduct.dart';
import 'package:kilimo_biashara1/Model/ProductDetail.dart';
 class ProductPage extends StatelessWidget {
   final ProductDetail detail;
   ProductPage({@required this.detail});
   @override
   Widget build(BuildContext context) {
     return Card(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(4.0),
       ),
       elevation: 4.0,
       margin: EdgeInsets.all(4.0),
       child: InkWell(
         radius: 4.0,
         child: getCardView(context),
         onTap: (){
           Navigator.push(
            context,
            MaterialPageRoute(builder: (context) =>
            DetailProduct(
              detail: detail,
            ),
            ),
           );
         },
       ),
     );
   }
   //////
   getCardView(BuildContext context){
     return Column(
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
         Hero(
             tag: detail,//this key /tag will be the same with another page also
             child: Container(
               height: 200.0,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(8.0),
               image: DecorationImage(
                   image: NetworkImage("${detail.image_url}"
                      ,
                   ),
                   fit: BoxFit.cover),
             ),
             ), ),
      //   Image.asset("images/ndz.jpg"),
         Padding(
           padding: const EdgeInsets.all(4.0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
               Text("sold by: "+
                 detail.vendor_name,
                 overflow: TextOverflow.ellipsis,
                 style: Theme
                     .of(context)
                     .textTheme
                     .body2,
               ),
               Text("product: "+
                 detail.productName,
                 softWrap: true,
                 overflow: TextOverflow.ellipsis,
                 style: Theme
                     .of(context)
                     .textTheme
                     .body2,
               ),
               Text("price: ${detail.price} ${detail.amount}"
                ,
                 softWrap: true,
                 overflow: TextOverflow.ellipsis,
                 style: Theme
                     .of(context)
                     .textTheme
                     .body2,
               ),
             ],
           ),
         ),
       ],
     );
   }
 }

导入“包装：颤振/材料.省道”；
导入“包：kilimo_biashara1/Products/DetailProduct.dart”；
导入“package:kilimo_biashara1/Model/ProductDetail.dart”；
类ProductPage扩展了无状态小部件{
最终产品细节；
ProductPage（{@required this.detail}）；
@凌驾
小部件构建（构建上下文）{
回程卡(
形状：圆形矩形边框(
边界半径：边界半径。圆形（4.0），
),
标高：4.0，
边距：所有边集（4.0），
孩子：InkWell(
半径：4.0，
子项：getCardView（上下文），
onTap:（）{
导航器。推(
上下文
MaterialPage路线（生成器：（上下文）=>
详细产品(
细节：细节，
),
),
);
},
),
);
}
//////
getCardView（构建上下文）{
返回列(
mainAxisSize:mainAxisSize.min，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
英雄(
tag:detail，//此键/标记与另一页相同
子：容器(
高度：200.0，
装饰：盒子装饰(
边界半径：边界半径。圆形（8.0），
图像：装饰图像(
image:NetworkImage（${detail.image\u url}）
,
),
安装：BoxFit.盖），
),
), ),
//Image.asset（“images/ndz.jpg”），
填充物(
填充：常数边集全部（4.0），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
文本（“销售人：”+
详细信息。供应商名称，
溢出：TextOverflow.省略号，
风格：主题
.of（上下文）
.文本主题
.2，
),
文本（“产品：”+
detail.productName，
import 'package:flutter/material.dart';
import 'package:kilimo_biashara1/Model/ProductDetail.dart';
import 'package:kilimo_biashara1/payment/Payment.dart';
class DetailProduct extends StatelessWidget {
  final ProductDetail detail;
  DetailProduct({this.detail});
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        persistentFooterButtons: <Widget>[
             Padding(
               padding: const EdgeInsets.fromLTRB(15.0, 5.0, 40.0, 5.0),
               child: new Text("SHOPPING",
                  style: new TextStyle(fontSize: 25.0,color: Colors.green,fontWeight: FontWeight.bold),
                ),
             ),
            new FlatButton(
            child: new Icon(Icons.shopping_cart,size: 35.0,),
            onPressed:(){
    Navigator.of(context).push(
    new MaterialPageRoute(
    builder: (BuildContext context)=>new Payment()));
    } ,
          ),
        ],
        body:new Scaffold(
    body:ListView(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Hero(
              tag: detail,
              child: Container(
                height: 250.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16.0),
                  shape: BoxShape.rectangle,
                  image: DecorationImage(
                    image: NetworkImage(
                      "${detail.image_url}",
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),

           // Image.asset("images/ndz.jpg"),
            SizedBox(
              height: 16.0,
            ),
            Text("vendor name:  "+
              detail.vendor_name,
              style: Theme.of(context).textTheme.title,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("product name: "+
              detail.productName,
              style: Theme.of(context).textTheme.subhead,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("vendor place: "+
              detail.place,
              style: Theme.of(context).textTheme.subhead,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("price:  ${detail.price}  ${detail.amount}",
              style: Theme.of(context).textTheme.subhead,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("short description:  "+
              detail.description,
              style: Theme.of(context).textTheme.subhead,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("Category:  "+detail.category,
              style: Theme.of(context).textTheme.subhead,
            ),
            SizedBox(
              height: 16.0,
            ),
            Text("contacts:  ${detail.phone}",
              style: Theme.of(context).textTheme.subhead,
            ),
          ],
        ),
      ),
    ],
    ),

    ),
    ),
    );
  }
}