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

Question

This screen is a Login screen which makes the user enter into the application. I got this error although I am using the correct provider

{Error: Could not find the correct Provider above this Z Widget

To fix, please:

• Ensure the Provider is an ancestor to this Z Widget
• Provide types to Provider
• Provide types to Consumer
• Provide types to Provider.of()
• Always use package imports. Ex: import 'package:my_app/my_code.dart';
• Ensure the correct context is being used.

I want to know the problem why using Provider.of(context) does not work

    import 'package:provider/provider.dart';
    import 'package:voyager/api/userProvider.dart';

    class LoginScreen extends StatefulWidget {

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

    class _LoginScreenState extends State<LoginScreen> {
    UserProvider user_Provider;



     @override
       Widget build(BuildContext context) {
        userProvider = Provider.of<UserProvider>(context,listen: false);
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => UserProvider()),
          ],
        child: Consumer<UserProvider>(
          builder: (context, userProvider, child) =>  Container(
            child: Scaffold(
                body: InkWell(
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  focusColor: Colors.transparent,
                  onTap: () {

splash screen code

 Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        backgroundColor: AppTheme.getTheme().backgroundColor,
        body:Column(
          children: <Widget>[
            SizedBox(
              height: MediaQuery.of(context).padding.top,
            ),
            Expanded(
              child: PageView(
                controller: pageController,
                pageSnapping: true,
                onPageChanged: (index) {
                  currentShowIndex = index;
                },
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  PagePopup(imageData: pageViewModelData[0]),
                  PagePopup(imageData: pageViewModelData[1]),
                  PagePopup(imageData: pageViewModelData[2]),
                ],
              ),
            ),
            PageIndicator(
              layout: PageIndicatorLayout.WARM,
              size: 10.0,
              controller: pageController,
              space: 5.0,
              count: 3,
              color: AppTheme.getTheme().dividerColor,
              activeColor: AppTheme.getTheme().primaryColor,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 48, right: 48, bottom: 8, top: 32),
              child: Container(
                height: 48,
                decoration: BoxDecoration(
                  color: AppTheme.getTheme().primaryColor,
                  borderRadius: BorderRadius.all(Radius.circular(24.0)),
                  boxShadow: <BoxShadow>[
                    BoxShadow(
                      color: AppTheme.getTheme().dividerColor,
                      blurRadius: 8,
                      offset: Offset(4, 4),
                    ),
                  ],
                ),
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    borderRadius: BorderRadius.all(Radius.circular(24.0)),
                    highlightColor: Colors.transparent,
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => LoginScreen()),
                      );
                    },

Answer 1

You can register provider in ancestor widget like MyApp
and let your provider wrap MaterialApp(home: LoginScreen())

code snippet

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => X()),
      ],
      child: Consumer<X>(
        builder: (context, counter, _) {
          return MaterialApp(
            home: LoginScreen(),
          );
        },
      ),
    );
  }
}

full test code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class X with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => X()),
      ],
      child: Consumer<X>(
        builder: (context, counter, _) {
          return MaterialApp(
            home: LoginScreen(),
          );
        },
      ),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    final user_Provider = Provider.of<X>(context);
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${user_Provider.count}',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: IncrementCounterButton(),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        Provider.of<X>(context, listen: false).increment();
      },
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}