title: Pass data to another screen when Gridview item is clicked
body: <p>I am a Java developer learning flutter. I need to pass data to another screen when an item of a Gridview has been clicked. I tried several online helps and could not find a better solution,</p>
  
  <p>my class is,</p>
  
  <pre><code>class Product extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _ProductState();
    }
  }
  
  var productList = [
    {
      "name": "Product 1",
      "image": "assets/products/product1.jpg",
      "price": 6.99,
      "description": "30% off",
    },
    .
    .
    .
    .
  ];
  
  class _ProductState extends State&lt;Product&gt; {
    @override
    Widget build(BuildContext context) {
      return GridView.builder(
        physics: const NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: productList.length,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemBuilder: (BuildContext context, int index) {
          return FeatureProduct(
            productName: productList[index]['name'],
            productImage: productList[index]['image'],
            productPrice: productList[index]['price'],
            productDescription: productList[index]['description'],
          );
        },
      );
    }
  }
  
  class FeatureProduct extends StatelessWidget {
    final String productImage;
    final String productName;
    final String productDescription;
    final double productPrice;
  
    FeatureProduct(
        {this.productImage,
        this.productName,
        this.productPrice,
        this.productDescription});
  
    @override
    Widget build(BuildContext context) {
      return Card(
        child: Hero(
          tag: productName,
          child: Material(
            child: InkWell(
              onTap: () {
                // print(productName);
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =&gt; new ProductDetail(
                          product: FeatureProduct(
                            productName: productName,
                            productImage: productImage,
                            productDescription: productDescription,
                            productPrice: productPrice,
                          ),
                        ),
                  ),
                );
              },
              child: GridTile(
                  footer: Container(
                    color: Colors.white70,
                    child: ListTile(
                      leading: Text(
                        productName,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      title: Text(
                        "RM $productPrice",
                        style: TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                      subtitle: Text(
                        productDescription,
                        style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(15.0),
                    child: Image.asset(
                      productImage,
                      fit: BoxFit.cover,
                    ),
                  )),
            ),
          ),
        ),
      );
    }
  }
  
  class ProductDetail extends StatelessWidget {
    final FeatureProduct product;
  
    ProductDetail({this.product});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("${product.productName}"),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Text('${product.productDescription}'),
        ),
      );
    }
  }
  </code></pre>
  
  <p>I tried but getting following exception during the execution of above code,</p>
  
  <blockquote>
    <p>I/flutter ( 7767): ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY
    ╞═════════════════════════════════════════════════════════
        I/flutter ( 7767): The following assertion was thrown during a scheduler callback:
        I/flutter ( 7767): There are multiple heroes that share the same tag within a subtree.
        I/flutter ( 7767): Within each subtree for which heroes are to be animated (typically a PageRoute subtree), each Hero
        I/flutter ( 7767): must have a unique non-null tag.
        I/flutter ( 7767): In this case, multiple heroes had the following tag: Product 5
        I/flutter ( 7767): Here is the subtree for one of the offending heroes:
        I/flutter ( 7767): # Hero(tag: Product 5, state: _HeroState#c56bf)
        I/flutter ( 7767): # └KeyedSubtree-[GlobalKey#ef976]
        I/flutter ( 7767): #  └Material(type: canvas, state: _MaterialState#d2e02)
        I/flutter ( 7767): #   └AnimatedPhysicalModel(duration: 200ms, shape: rectangle, borderRadius: BorderRadius.zero, elevation: 0.0,
    color: Color(0xfffafafa), animateColor: false, shadowColor:
    Color(0xff000000), animateShadowColor: true, state:
    _AnimatedPhysicalModelState#8cf00(ticker inactive))</p>
  </blockquote>
  
  <p>How could I fix this issue, please help me.</p>