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

Question

I am new to flutter and was trying out the implementation of Network Connectivity with the Flutter Provider. I got across this error and have tried every bit of code on the Internet from changing the context and changing the place where the Provider might lie so that the child widgets will get the context. When I am trying to get the value of res in welcome. dart I am getting the error.

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 Welcome is under your MultiProvider/Provider. This usually happens when you are creating a provider and trying to read it immediately

main.dart

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        StreamProvider(
            create: (context) => Networkprovider().networkController.stream,
            initialData: Networkprovider().initRes),
      ],
      child: MaterialApp(
        theme: ThemeData(),
        initialRoute: Welcome.id,
        routes: {
          Welcome.id: (context) => Welcome(),
          NavigatorPage.id: (context) => const NavigatorPage(),
        },
      ),
    );
  }
}

NetworkProvider.dart

class Networkprovider extends ChangeNotifier {
  late StreamSubscription<ConnectivityResult> _subscription;
  late StreamController<ConnectivityResult> _networkController;
  late ConnectivityResult initRes = ConnectivityResult.none;

  StreamSubscription<ConnectivityResult> get subscription => _subscription;
  StreamController<ConnectivityResult> get networkController =>
      _networkController;

  Networkprovider() {
    startup();
  }

  void startup() {
    _networkController = StreamController<ConnectivityResult>();
    networkStatusChangeListener();
  }

  void networkStatusChangeListener() async {
    _networkController.sink.add(await Connectivity().checkConnectivity());
    _subscription = Connectivity().onConnectivityChanged.listen((event) {
      _networkController.sink.add(event);
    });
  }

  void disposeStreams() {
    _subscription.cancel();
    _networkController.close();
  }
}

Welcome.dart

class Welcome extends StatelessWidget {
  static String id = "welcome_screen";
  const Welcome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var res = Provider.of<Networkprovider>(context);
    return SafeArea(
      child: Scaffold(
        backgroundColor: MAIN_BACKGROUND_COLOR,
        body: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Row(
                  children: const <Widget>[
                    Image(image: AssetImage("assets/images/Magnet_logo.png"))
                  ],
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(20.0),
                child:
                    Image(image: AssetImage("assets/images/Mannify_logo.png")),
              ),
              const Padding(
                padding: EdgeInsets.all(10.0),
                child: Spinner(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Declare ChangeNotifierProvider like this

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => Networkprovider()),
  ],
  child: <your widget>,
)

then access like this

final provider = Provider.of<Networkprovider>(context);