CODEWITHSUNDEEP
flutterflutter-dependenciesflutter-provider
Ali Yar Khan
Ali Yar Khan

Reputation: 1344

How to add multi notifier provider in flutter

I am working on Food delivery app and I am using Provider as state management architecture. Problem is when i add a second provider to my app it is giving error.

Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MultiProvider(
    providers: [
      ChangeNotifierProvider<GPSViewModel>(create: (_) => GPSViewModel()),
      ChangeNotifierProvider<OTPViewModel>(create: (_) => OTPViewModel()),
    ],
    child: GPS(),


    ),
    );
   }

Error is

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

In MobileOTP i am accessing the provider like this in init state method

   @override
  void initState() {
    super.initState();
    Provider.of<OTPViewModel>(context, listen: false).
    verifyMobileNumber(widget.phone,verificationCompleted,verificationFailed,codeSent,codeAutoRetrievalTimeout);
  }

The Full error trace is like this

Error: Could not find the correct Provider<OTPViewModel> above this MobileOTP 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 MobileOTP is under your MultiProvider/Provider<OTPViewModel>.
  This usually happens when you are creating a provider and trying to read it immediately.

  For example, instead of:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // Will throw a ProviderNotFoundError, because `context` is associated
      // to the widget that is the parent of `Provider<Example>`
      child: Text(context.watch<Example>()),
    ),
  }
  ```

  consider using `builder` like so:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // we use `builder` to obtain a new `BuildContext` that has access to the provider
      builder: (context) {
        // No longer throws
        return Text(context.watch<Example>()),
      }
    ),
  }


What i am doing wrong ?

Upvotes: 0

Views: 1854

Answers (2)

Ali Yar Khan
Ali Yar Khan

Reputation: 1344

So basically problem was "Provider is based on InheritedWidget. Only child widgets can inherit parent widget's state.". I was trying to access it otherwise, so it was giving me error. I swap the Material App with Multi provider and it fixes the problem.

Code now becomes

@override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<GPSViewModel>(create: (_) => GPSViewModel()),
        ChangeNotifierProvider<OTPViewModel>(create: (context) => OTPViewModel()),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: GPS(),
      ),
    );
  }

Thats it !!!

Upvotes: 1

Huthaifa Muayyad
Huthaifa Muayyad

Reputation: 12373

Do not ignore the context, use it while you define them, like this:

MultiProvider(
    providers: [
      ChangeNotifierProvider<GPSViewModel>(create: (ctx) => GPSViewModel()),
      ChangeNotifierProvider<OTPViewModel>(create: (ctx) => OTPViewModel()),
    ],

Upvotes: 0

Related Questions