1

I am doing flutter for a while and have been using setState(). Recently decided to learn BLoC. Now in v6, Bloc comes with Cubit so started following up on tutorials for BLoC-Cubit on how they work and how to implement. So far whatever I learned, I implemented on a demo project.

I ran into this error :

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

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

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

The context used was: BlocConsumer<Cubit, dynamic>(dirty)

The relevant error-causing widget was BlocConsumer<Cubit<dynamic>, dynamic> this redirects me to CreateProfile.dart line no. 3, check below.

I guess the error is related to the context that I'm not passing down correct context to CreateProfile's BlocConsumer. However, the Bloc in Login and Otp pages are working just fine.

Widget trees goes: Main->Splash->Login->Otp->CreateProfile.

Please help me solve this issue, and suggest the right practice for bloc implementation, if mine is not proper.

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Splash(),
        routes: {
          Splash.id : (context) => Splash(),
        },
    );
   }
}

Splash.dart

FlatButton(
  onTap: (){
    Navigator.push(context, MaterialPageRoute(builder: (context) => BlocProvider(
      create: (context) => LoginCubit(),
      child: Login(),)));
    },
  child: Text('Get Started', style: kText18SemiBold.copyWith(color: Colors.white)),
),

Login.dart

return Scaffold(
    backgroundColor: kBackgroundColor,
    body: BlocConsumer<LoginCubit, LoginState>(
      listener: (context, state) {
        if(state is LoginApiSuccess){
          Navigator.push(context, MaterialPageRoute(builder: (context) => BlocProvider(
            create: (context) => OtpCubit(),
            child: Otp(),
          )));
        }
      },
      builder: (context, state) {
        return Stack(
          // Contains Login UI 
        )
      }
    )
);

Otp.dart

return Scaffold(
    backgroundColor: kBackgroundColor,
    body: BlocConsumer<OtpCubit, OtpState>(
      listener: (context, state) {
        if(state is OtpApiSuccess){
          Navigator.push(context, MaterialPageRoute(builder: (context) => BlocProvider(
            create: (context) => CreateprofileCubit(),
            child: CreateProfile(),
          )));
        }
      },
      builder: (context, state) {
        return Stack(
          // Contains OTP UI 
        )
      }
    )
);

CreateProfile.dart

return Scaffold(
    backgroundColor: kBackgroundColor,
    body: BlocConsumer<CreateprofileCubit, CreateprofileState>( // Error redirects here
      listener: (context, state) {
        if(state is ProfileCreated){
          Navigator.push(context, MaterialPageRoute(builder: (context) => AddProfileImages(),));
        }
      },
      builder: (context, state) {
        return Stack(
          // Contains CreateProfile UI 
        )
      }
    )
);
VipiN Negi
  • 2,994
  • 3
  • 24
  • 47

1 Answers1

2

BlocProvider is a generic class, you need to provide a type to it. Try replacing:

BlocProvider(
   create: (context) => OtpCubit(),
   child: Otp(),
)

with:

BlocProvider<OtpCubit>(
   create: (context) => OtpCubit(),
   child: Otp(),
)

The same thing applies to all the other BlocProviders that you use.

Limbou
  • 369
  • 1
  • 9