1

Problem: Some of my providers cannot be found in the context above the modal bottom sheet. Example:

Error: Could not find the correct Provider above this ModalEnterTask Widget

This happens because you used a BuildContext that does not include the provider of your choice.

All Providers are definetly above the widget opening the modal sheet. One provider is actually working. That one is created above the material app. The ones not working are created in the build method of my tabs screen. I've been using them sucesfuly all throughout the app. Why can they not be found in the modal sheet?

My theory: The context used for the modal sheet is dependend on the Material app context; not on the context from where it is opened in the widget tree. Correct?

Solution: I don't know. I can't move the providers up to where the working Provider sits. They need context information (edit: MediaQuery information, not context), so they cannot be initialized before the material app.

Code:

MyApp State...this is where I initialize the provider that works:

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => MainElementList(widget.mainElementList),
        ),
        ChangeNotifierProvider(
          create: (context) => ScrollControllerToggles(),
        )
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Three Things',
        initialRoute: '/',
        routes: {
          '/': (ctx) => TabsScreen(),
        },
      ),
    );
  }
}

The TabsScreen(), here I initialize the Providers that do not work in the modal sheet:

return MultiProvider(
  providers: [
    ChangeNotifierProvider(
      create: (ctx) => CustomColors(customColorScheme),
    ),
    //
    ChangeNotifierProvider(
      create: (ctx) => DimensionsProvider(
          appBarHeight: appBarHeight,
          availableHeight: availableHeight,
          availableWidth: availableWidth),
    ),
    //
    ChangeNotifierProvider(
      create: (ctx) => CustomTextStyle(availableHeight, customTextTheme),
    ),
  ],
  child: Scaffold(//body: function picking pages)

Calling the modal sheet:

return GestureDetector(
          onTap: () => showModalBottomSheet(
            context: context,
            builder: (bctx) => ModalEnterTask(positionTask: positionTask),
          ),
          //
          child: Center(//container with an icon)

The widget called in the builder of the the modal sheet:

class ModalEnterTask extends StatelessWidget {
  late String positionTask;

  ModalEnterTask({required String this.positionTask, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    //RESPONSIVENESS
    final availableHeight =
        Provider.of<DimensionsProvider>(context).availableHeight;

    return Column(
      children: [
        SizedBox(
          height: 10,
        ),
        //
        IconButton(
          icon: Icon(Icons.plus_one),
          onPressed: () {
            Provider.of<MainElementList>(context, listen: false)
                .changeSingleTaskPhase(0, positionTask);
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }
}

DimensionProvider > doesn't work MainElementList > works

5
  • 1
    You are not doing anything on DimensionProvider then how it will update Feb 21, 2022 at 14:24
  • The code for the sheet isn't done. For now all I want is to grab the providers and vonfirm I can use them. The issue is that it cannot find the provider in the context. Any idea why?
    – Joe
    Feb 21, 2022 at 14:34
  • can you paste the error here??? and also change this line to final availableHeight = Provider.of<DimensionsProvider>(context,listen:false).availableHeight; Feb 21, 2022 at 14:50
  • Error: Could not find the correct Provider above this ModalEnterTask Widget This happens because you used a BuildContext that does not include the provider of your choice. This is the error. Not listening didn't help.
    – Joe
    Feb 21, 2022 at 15:03
  • I have included a solution which might help .. from your error it seems like flutter is unable to find the provider which you are calling means it might not be in the tree it might be initializing after calling so its better to declare all providers in runApp in main Feb 21, 2022 at 15:13

3 Answers 3

2

As I can see you are getting error because your provider is not in the tree which you are calling so its better to include all providers in the main and you will be able to resolve this issue. Here is how you do that

void main() async {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CustomColors()),
        ChangeNotifierProvider(create: (context) => DimensionsProvider()),
        ChangeNotifierProvider(create: (context) => MainElementList()),
        ChangeNotifierProvider(create: (context) => ScrollControllerToggles()),
      ],
      child: MyApp(),
    ),
  );
}

I think this solution will work in your case... Have a try and let me know

Note: I can see that you are passing some parameters in providers so just change a structure little bit and assign values to providers where you are initializing them

6
  • Hi, thanks a lot! I tried adding them in the MultiProvider in main; but some of them are dependend on MediaQuery ... and I cannot use MediaQuery before the MaterialApp has been returned and that hasn't happend here yet. I also don't understand why they are not in the tree. I create them in the tabs screen and that is well above where I open the modal sheet. Where are modal bottom sheets taking there context from?
    – Joe
    Feb 21, 2022 at 15:19
  • 1
    yes if it depends upon MediaQuery then you can create a setter where you can assign the values to variables whereever you want Feb 21, 2022 at 15:24
  • have a look on this detailed solution .... 'stackoverflow.com/a/66485893/15023395' Feb 21, 2022 at 15:24
  • If I understand it correctly, I create the Provider in main, but then once MaterialApp is returned and media query is avalable, I derive the values I need and set the values in the Provider? That's the approach...cause, yeah, sounds like a lot of refactoring on my end, but that might work :)
    – Joe
    Feb 21, 2022 at 15:39
  • 1
    Yup that's it. Best of luck Feb 21, 2022 at 15:43
1

I got same error when using method showModalBottomSheet. I try to use BlocBuilder in the widget that was open as a modal bottom sheet, then i got

BlocProvider.of() called with a context that does not contain a MyBloc

My solutions is: pass the value as a parameter of widget. In my case is:

showModalBottomSheet(
      context: context,
      builder: (BuildContext btsContext) {
        return CartBottomSheetPage(
            cartBloc: BlocProvider.of<MyBloc>(context),
          );
      },
    );

NOTE: you must get the value from parent context like this:

BlocProvider.of<MyBloc>(context)

not like this:

BlocProvider.of<MyBloc>(btsContext)
0

I use localized blocs for my app and if you want your bloc to work properly in your bottom sheet then you have to wrap the builder method of showModalBottomSheet with BlocProvider.value since a new context is assigned to bottom sheet

           showModalBottomSheet(
              context: context,
              builder: (_) => BlocProvider.value(
                    value: BlocProvider.of <YourBloc>(context),
                    child: const YourBottomSheet(),
                  ));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.