CODEWITHSUNDEEP
flutterdartbloc
Main
Main

Reputation: 1842

BlocProvider.of() called with a context that does not contain a Bloc/Cubit of type MyBloc

I tried to add MyBloc using BlocProvider, but I encountered context issue. Error is as follows:

Launching lib\main.dart on sdk gphone x86 arm in debug mode... lib\main.dart:1 √ Built build\app\outputs\flutter-apk\app-debug.apk. Connecting to VM Service at ws://127.0.0.1:64346/zfCDazZFoQI=/ws

════════ Exception caught by gesture ═══════════════════════════════════════════
The following assertion was thrown while handling a gesture:
        BlocProvider.of() called with a context that does not contain a Bloc/Cubit of type MyBloc.

        No ancestor could be found starting from the context that was passed to BlocProvider.of<MyBloc>().

        This can happen if the context you used comes from a widget above the BlocProvider.

        The context used was: BlocAddPage(state: _BlocAddPageState#43fc1)

When the exception was thrown, this was the stack
#0      BlocProvider.of
package:flutter_bloc/src/bloc_provider.dart:121
#1      _BlocAddPageState.build.<anonymous closure>
package:example/…/examples/bloc_add.dart:53
#2      _InkResponseState._handleTap
package:flutter/…/material/ink_well.dart:993
#3      _InkResponseState.build.<anonymous closure>
package:flutter/…/material/ink_well.dart:1111
#4      GestureRecognizer.invokeCallback

I have following UI class.

class BlocAddPage extends StatefulWidget {
      BlocAddPage({Key key}) : super(key: key);
      static const routeName = '/addBloc';
    
      @override
      _BlocAddPageState createState() => _BlocAddPageState();
    }
    
    class _BlocAddPageState extends State<BlocAddPage> {
      final Repository repository = Repository();
     
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(
              'Add',
            ),
          ),
          body: BlocProvider<MyBloc>(
            create: (context) => MyBloc(
                repository: context.read<Repository>(),
    
            child: ElevatedButton(
                onPressed: () {
                  BlocProvider.of<MyBloc>(context)
                      .add(AddEvent());
                },
                child: const Text('Submit'),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.all(15),
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(40),
                    ),
                  ),
                )),

Upvotes: 1

Views: 352

Answers (1)

ch271828n
ch271828n

Reputation: 17567

Problem is your context. wrap with a Builder.

Reason: When call BlocProvider.of<MyBloc>(context), that of hopes your context is somewhere below the provider. But in your case, the context is the context of _BlocAddPageState which is the ancestor of the provider. Thus I put a builder to solve it.

class BlocAddPage extends StatefulWidget {
      BlocAddPage({Key key}) : super(key: key);
      static const routeName = '/addBloc';
    
      @override
      _BlocAddPageState createState() => _BlocAddPageState();
    }
    
    class _BlocAddPageState extends State<BlocAddPage> {
      final Repository repository = Repository();
     
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(
              'Add',
            ),
          ),
          body: BlocProvider<MyBloc>(
            create: (context) => MyBloc(
                repository: context.read<Repository>(),
    
            child: Builder( // this!!!
              builder: (context) => ElevatedButton(
                onPressed: () {
                  BlocProvider.of<MyBloc>(context)
                      .add(AddEvent());
                },
                child: const Text('Submit'),
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.all(15),
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(40),
                    ),
                  ),
                ))),

Upvotes: 3

Related Questions