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

Question

Hi I am Trying to call a POST api using chopper. but it is giving me

"Error: Could not find the correct Provider above this LoginPage Widget".

Even I have added the provider as the ancestor widget to the page.

What am I doing wrong? please help.

 @override
 Widget build(BuildContext context) {
return Provider(
  create: (_) => ApiService.create(),
  dispose: (context, ApiService service) => service.client.dispose(),
  child: Container(
                          width: double.infinity,
                          child: ButtonTheme(
                            height: 36.0,
                            child: RaisedButton(
                              onPressed: () async {
                                //Navigator.pushReplacementNamed(context, "/myjourney");
                                print("Arpit: ${_emailController.text + " " +_passwordController.text}");
                                generateMd5(_passwordController.text);
                                String email = _emailController.text;
                                String password = generateMd5(_passwordController.text);
                                 final response = await Provider.of<ApiService>(context)
                                  .doLogin("d1d2fe0514f7d5c748c0e7e085b36f74",email,password,"App");
                              print(response.body);
                              },
                              color: Colors.white,
                              disabledColor: Colors.white,
                              shape: BeveledRectangleBorder(),
                              textColor: Colors.indigo,
                              padding: EdgeInsets.all(8.0),
                              splashColor: Color(0xFF6c60e4),
                              child: Text("SIGN IN", style: TextStyle(
                                  fontFamily: "Montserrat",
                                  fontSize: 15.0,
                                  color: Colors.indigo,fontWeight: FontWeight.bold)),
                            ),
                          )
                      ),
);

}

Answer 1

You are getting the error because you aren't putting the Provider above the Login Page that needs it.

You have to put any Provider you are using above any Widget that uses it. This process is called Lifting state up.

To correct the error, remove the Provider widget from the Login Widget and wrap it in the root widget of your application.

Like the code below:

void main() {
  runApp(
    Provider(
    create: (_) => ApiService.create(),
    dispose: (context, ApiService service) => service.client.dispose(),      
    child: MyApp(),
    ),
  );
}

To read more about lifting state up. Check the link below:

Using provider correctly

I hope this helps.

Answer 2

you could use a Consumer below to avoid using the wrong context:

@override
Widget build(BuildContext context) {
  return Provider(
    create: (_) => Foo(),
    child: Consumer<Foo>(
      builder: (_, foo, __) => Text(foo.value),
    },
  );
}

Like this:

@override
 Widget build(BuildContext context) {
return Provider<ApiService>(
  create: (_) => ApiService.create(),
  dispose: (context, ApiService service) => service.client.dispose(),
  child: Consumer<ApiService>(
          builder: (_, apiService, __) => Container(
                          width: double.infinity,
                          child: ButtonTheme(
                            height: 36.0,
                            child: RaisedButton(
                              onPressed: () async {
                                //Navigator.pushReplacementNamed(context, "/myjourney");
                                print("Arpit: ${_emailController.text + " " +_passwordController.text}");
                                generateMd5(_passwordController.text);
                                String email = _emailController.text;
                                String password = generateMd5(_passwordController.text);
                                 final response = await apiService.doLogin("d1d2fe0514f7d5c748c0e7e085b36f74",email,password,"App");
                              print(response.body);
                              },
                              color: Colors.white,
                              disabledColor: Colors.white,
                              shape: BeveledRectangleBorder(),
                              textColor: Colors.indigo,
                              padding: EdgeInsets.all(8.0),
                              splashColor: Color(0xFF6c60e4),
                              child: Text("SIGN IN", style: TextStyle(
                                  fontFamily: "Montserrat",
                                  fontSize: 15.0,
                                  color: Colors.indigo,fontWeight: FontWeight.bold)),
                            ),
                          )
                      ),
);

Check COnsumer documentation here: https://pub.dev/documentation/provider/latest/provider/Consumer-class.html