在 Flutter 中使用 Bloc/Cubit 时避开 CONTEXT

Question

我做flutter有一段时间了，一直在用setState()。最近决定学习 BLoC。现在在 v6 中，Bloc 随附了 Cubit，因此开始关注 BLoC-Cubit 的教程，了解它们的工作原理和实现方式。到目前为止，无论我学到什么，我都在一个演示项目中实现了。

我运行进入这个错误:

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> 这会将我重定向到 CreateProfile.dart 行号。 3、查看下方。

我猜这个错误与我没有将正确的上下文传递给 CreateProfile 的 BlocConsumer 的上下文有关。但是，登录和 Otp 页面中的 Bloc 工作正常。

Widget 树：Main->Splash->Login->Otp->CreateProfile。

请帮我解决这个问题，如果我的不合适，请提出正确的 bloc 实施方法。

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 
        )
      }
    )
);

Answer 1

BlocProvider 是一个泛型class，您需要为其提供一个类型。尝试替换：

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

与：

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

同样的事情适用于您使用的所有其他 BlocProvider。

在 Flutter 中使用 Bloc/Cubit 时避开 CONTEXT

Get around of CONTEXT while using Bloc/Cubit in Flutter

dart

flutter

bloc