"Could not find the correct Provider" even the widget is built after the Provider is added to context

Issue

I’m having problems trying to obtain data from a provider. I’ve been working a lot with them so I know all the usual errors that you can get with, but this one is driving me crazy.

I have a simple widget that gets data from PassesSelector provider:

class PassesSelector extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Passes> passes = Provider.of<PassesSelectorManager>(context).passes;

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        DaysSelector(
          primaryColor: Colors.green,
          title: "Select pass",
          passDays: passes,
        ),
      ],
    );
  }
}

In another widget, I create a Multiprovider (as there will be more providers needed) where I initialize the PassesSelector and in child, I add a Builder that receives a column with two texts showing some PassesSelector Provider data and the PassSelector widget:

class TicketSelectionPresenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<PassesSelectorManager>(
          create: (_) => PassesSelectorManager()
        ),
      ],
      child: Builder(builder: (context) {
        return Column(
          children: [
            Text(context.read<PassesSelectorManager>().taxes.toString()),
            Text(context.read<PassesSelectorManager>().dayPasses.toString()),
            PassesSelector(),
          ],
        );
      }),
    );
  }
}

The thing is that the Texts inside the Column show the information properly (so, the provider is created) but when rendering the PassesSelector() I’m getting the error Could not find the correct Provider<PassesSelectorManager> above this PassesSelector widget but I don’t understand why, like the context received did not have the provider. I know the context is different if you push a route, but in this case we’re just adding a Widget to the context…

Things you might want to know:

• [√] Flutter (Channel stable, 2.10.2, on Microsoft Windows [Version 10.0.19042.1526], locale en-GB)
• [√] VS Code (version 1.65.2)
• [√] Android toolchain – develop for Android devices (Android SDK version 30.0.2)

Things I tried so far:

• Using the builder(context, child) => PassesSelector() function of MultiProvider instead of child
• Add Consumer<PassesSelector> inside the Builder column and add PassesSelector() as child
• Add Consumer<PassesSelector> inside the build function of PassesSelector()
• Placed all the Column with Texts and PassesSelector as a new Widget, and the same happens, the Texts can show the data properly but the widget PassesSelector() throws the error.

Any help is appreciated, thank you!

Solution

We’ve been a few days working on other things and we got again a weird error as Flutter/Provider was not working as expected. We did big research again until we found the solution.

When importing files, Visual Studio Code was importing some words in lower case while the directory name started with Caps. So, the page that was creating the provider was instantiating it from (it’s an example, notice how the Providers word is written):

import 'package:xxx/Application/Providers/pass_selector_manager.dart

while the Widget reading was trying to obtain it from:

import 'package:xxx/Application/providers/pass_selector_manager.dart

We feel silly, we’ve been checking each widget tree generated and all the "hard" stuff around until we found out this. It’s almost a meme, but well, at the end, the lesson is to check your imports when something breaks, even if they’re auto imported.

Answered By – Juli15

Answer Checked By – Robin (FlutterFixes Admin)