Error in flutter application: "Could not find the correct Provider above this Widget"

Question

I'm trying to use a ChangeNotifierProvider in my flutter application but end up with the above error. Any guidance would be greatly appreciated, thanks so much!

This is the part of my home screen with the provider

class UserHomePage extends StatefulWidget {
  const UserHomePage({Key? key}) : super(key: key);

  @override
  _UserHomePageState createState() => _UserHomePageState();
}

class _UserHomePageState extends State<UserHomePage> {
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (ctx) => Products(),
        child: MaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomeScreen(),
        )
        
        );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
  

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  User? user = FirebaseAuth.instance.currentUser;
  UserModel loggedInUser = UserModel();
  SellerModel seller = SellerModel();
  AuthClass authClass = AuthClass();

  @override
  void initState() {
    super.initState();
    FirebaseFirestore.instance
        .collection("users")
        .doc(user!.uid)
        .get()
        .then((value) {
      // ignore: unnecessary_this
      this.loggedInUser = UserModel.fromMap(value.data());
      setState(() {});
    });
    FirebaseFirestore.instance
        .collection("sellers")
        .doc("tuC30IFrAQfHUl14VrLhF9G9I5w1")
        .get()
        .then((value) {
      // ignore: unnecessary_this
      this.seller = SellerModel.fromMap(value.data());
      setState(() {});
    });
  }

  int pageIndex = 0;
  final pages = [
    const ProductsOverviewScreen(),
    const AddProduct(),
    const Orders(),
  ];

Under the HomeScreen class, I have created a link to another page 'ProductsOverviewScreen' as below

    class ProductsOverviewScreen extends StatelessWidget {
    const ProductsOverviewScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red[50],
      body: ProductsGrid(),
    );
  }
}

And here is the 'ProductsGrid' page where the provider will be called

    class ProductsGrid extends StatelessWidget {
  const ProductsGrid({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Products>(context);
    final products = productsData.items;
    return GridView.builder(
      padding: EdgeInsets.all(10),
      itemCount: products.length,
      itemBuilder: (ctx, i) =>
          ProductItem(products[i].id, products[i].title, products[i].imageUrl),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10),
    );
  }
}

Here is the error output

Error: Could not find the correct Provider<Products> above this ProductsGrid Widget

This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:

- You added a new provider in your `main.dart` and performed a hot-reload.
  To fix, perform a hot-restart.

- The provider you are trying to read is in a different route.

  Providers are "scoped". So if you insert of provider inside a route, then
  other routes will not be able to access that provider.

- You used a `BuildContext` that is an ancestor of the provider you are trying to read.

  Make sure that ProductsGrid is under your MultiProvider/Provider<Products>.
  This usually happens when you are creating a provider and trying to read it immediately.