How to fix "Could not find the correct Provider<Product> above this ProductItem Widget "?

Issue

I am very much new to flutter. This is my first time using providers. I have been through every solution out there but nothing seems to help.

In a shopping app I am developing, I tried to use the provider package to pass data to my widget dynamically.

I am sharing the code and the screenshot of the very big error message. Hope somebody could help

Gridview builder

final productData = Provider.of<ProductsProvider>(context);
final products = productData.items;
return GridView.builder(
  padding: EdgeInsets.all(10),
  itemCount: products.length,
  itemBuilder: (context, index) => ChangeNotifierProvider.value(
      value: products[index], child: ProductItem()),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 0.75,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10),
);

Individual product item in the grid

final product = Provider.of<Product>(context);
return Container(
  child: GestureDetector(
    onTap: () {
      Navigator.of(context)
          .pushNamed(ProductDetails.routeName, arguments: product.id);
    },
    child: Card(
      color: Colors.white,
      elevation: 6,
      shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          //product image
          Image(image: AssetImage(product.imageUrl)),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
            //item name and fav button
            child: Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                    child: Text(
                  product.name,
                  style: Theme.of(context)
                      .textTheme
                      .headline1
                      .copyWith(fontSize: 16, color: Colors.black),
                )),
                IconButton(
                    icon: Icon(
                      product.isFav
                          ? Icons.favorite
                          : Icons.favorite_border,
                      color: Colors.red,
                    ),
                    onPressed: () {
                      product.toggleFav();
                    })
              ],
            ),
          ),
          // price and buy button
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
            child: Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                    child: Text(
                  "\$ " + product.price.toString(),
                  style: Theme.of(context).textTheme.headline1.copyWith(
                      color: Theme.of(context).primaryColor, fontSize: 15),
                )),
                SizedBox(
                  width: 60,
                  child: RaisedButton(
                    onPressed: () {},
                    color: Colors.orange,
                    child: Text(
                      "Buy",
                      style: TextStyle(fontFamily: 'Prompt', fontSize: 14),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

screenshot of error

Solution

You need to declare the provider in you main material widget. Atm you are using it but you haven’t told flutter that you will use it.

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple#changenotifierprovider

Answered By – krumpli

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.