Could not find the correct Provider

Question

I'm new to using flutter and i was trying to implement a covid 19 tracker of cases in the world and i got this error when creating a custom widget to display number of cases , can anyone help me figure out the solution to this exactly as i have been trying to fix it for hours now. This is the exception caught by the widgets library: Error: Could not find the correct Provider above this NewCasesCard Widget

To fix, please:

• Ensure the Provider is an ancestor to this NewCasesCard Widget
• Provide types to Provider
• Provide types to Consumer
• Provide types to Provider.of()
• Ensure the correct context is being used.

If none of these solutions work, please file a bug at: https://github.com/rrousselGit/provider/issues

Here is the code:

import 'package:stay_safe/Providers/AppBrain.dart';
import 'package:stay_safe/utils/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

class NewCasesCard extends StatelessWidget {



  @override
  Widget build(BuildContext context) {

    return getCard(context);
  }
  Widget getCard(context){
      if (Provider.of<AppBrain>(context).isloading2)
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: SpinKitPumpingHeart(color: AppTheme().kcolors[0],),
        ),
      );
      else {
        final countryInfo = Provider.of<AppBrain>(context).countryStats['countrydata'][0];
return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
        elevation: 0.5,
              color: Colors.white70,
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('New Cases Today',style: GoogleFonts.cabin(fontSize: 25),),
            ),
            SizedBox(height: 8,),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                StatIcon(countryInfo['total_active_cases'], 'Active', AppTheme().kcolors[0]),
                StatIcon(countryInfo['total_new_cases_today'], 'New Cases', AppTheme().kcolors[2]),
                StatIcon(countryInfo['total_new_deaths_today'], 'Deaths', AppTheme().kcolors[1])
              ],),
            )
          ],
        ),
      ),
    );
      }
  }
}
Widget StatIcon(int count,String type,Color color){
  return Column(
    children: <Widget>[
    Text(count.toString(),style: GoogleFonts.cabin(color: color,fontWeight: FontWeight.bold,fontSize: 20),),
    Text(type,style: GoogleFonts.cabin(color: color,fontWeight: FontWeight.bold,fontSize: 20),),
    ],
  );
}

Answer 1

The issue looks like you have created the AppBrain provider in a different part of your widget tree to NewCasesCard, so when NewCasesCard attempts to find the provider by searching the tree it cannot. You need to make sure that the AppBrain provider is above NewCasesCard somewhere in the widget tree. So for example in the screen that includes this widget you could have:

class NewCasesScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Provider<AppBrain>(
      create: (_) => AppBrain(),
        child: Scaffold(
          body: ListView(
            children: [
              NewCasesCard(),
              ...
            ]
        ),
      ),
    ); 
  }

Alternatively you could initialise the provider at the top of your app since, from the name, it looks like it is used throughout. For this you could utilise the MultiProvider and have: (Example taken from the package readme)

void main {
  runApp(MultiProvider(
    providers: [
      Provider<AppBrain>(create: (_) => AppBrain()),
      Provider<SomethingElse>(create: (_) => SomethingElse()),
    ],
    child: MaterialApp(...),
   ));
}

This way you can be sure that the provider will always be found.