似乎无法解决我的 BlocProvider 失败的原因

Question

我正在重新编写 Reso Coder 的 TDD clean architecture 课程，并做了一些小改动。最终目标是让最新版本的 flutter 具有完全相同的内容和更新的库，并且还可以选择 Riverpod 状态管理。但是在使用 flutter_bloc 时，我似乎无法让它工作。

BlocProvider buildBody({required BuildContext context}){
    return BlocProvider(
      create: (context) => sl<NumberTriviaBloc>(),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              SizedBox(height: 20.0,),
              Container(
                  margin: EdgeInsets.all(5),
                  height: MediaQuery.of(context).size.height/2.5,
                  child: Placeholder()
              ),
              SizedBox(height: 20.0,),
              Column(
                children: [
                  Placeholder(fallbackHeight: 50),
                  SizedBox(height: 25),
                  Row(
                    children: [
                      Expanded(child: Placeholder(fallbackHeight: 30)),
                      SizedBox(width: 10),
                      Expanded(child: Placeholder(fallbackHeight: 30),),
                    ],
                  )
                ],
              )

            ],
          ),
        ),
      ),
    ) ;
  }

上面的代码似乎没有任何错误。

但是一旦我引入 BlocBuilder（下面给出的片段），我就得到了

Error: Could not find the correct Provider<NumberTriviaBloc> above this BlocBuilder<NumberTriviaBloc, NumberTriviaState> Widget

BlocProvider buildBody({required BuildContext context}){
    return BlocProvider(
      create: (context) => sl<NumberTriviaBloc>(),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            children: [
              SizedBox(height: 20.0,),
              //start of the problem
              BlocBuilder<NumberTriviaBloc, NumberTriviaState>(
                  builder: (context, state) {
                    if (state is Empty) {
                      return Text("1");
                    }else{
                      return Text("2");
                    }
                  }
              ),
              //end of the problem
              Container(
                  margin: EdgeInsets.all(5),
                  height: MediaQuery.of(context).size.height/2.5,
                  child: Placeholder()
              ),
              SizedBox(height: 20.0,),
              Column(
                children: [
                  Placeholder(fallbackHeight: 50),
                  SizedBox(height: 25),
                  Row(
                    children: [
                      Expanded(child: Placeholder(fallbackHeight: 30)),
                      SizedBox(width: 10),
                      Expanded(child: Placeholder(fallbackHeight: 30),),
                    ],
                  )
                ],
              )

            ],
          ),
        ),
      ),
    ) ;
  }

我已经阅读了所有可以从 Internet 上获得的信息，但似乎仍然无法弄明白。任何帮助将不胜感激。

完整代码可在 here & 依赖注入逻辑可用 here

Answer 1

您还必须将集团传递给 BlocBuilder。

bloc: sl<NumberTriviaBloc>(),

只需将此添加到您的 BlocBuilder 即可。

Answer 2

尝试使用 Builder() 包装您的 Center() 小部件以获取 BlocProvider 的上下文，而不是传递给没有 BlocProvider 作为父级的 buildBody 方法的上下文。

return BlocProvider(
  create: (context) => sl<NumberTriviaBloc>(),
  child: Builder(
    builder: (context) => Center(...),//Wrap with Builder 
  ),
);

似乎无法解决我的 BlocProvider 失败的原因

Can't seem to workout why my BlocProvider is failing

state-management

dart

flutter

bloc

flutter-state