似乎无法锻炼为什么我的 BlocProvider 失败了答案

【问题标题】：Can't seem to workout why my BlocProvider is failing似乎无法锻炼为什么我的 BlocProvider 失败了
【发布时间】：2022-01-10 09:55:50
【问题描述】：

我正在重新编写 Reso Coder 的 TDD 清洁架构课程，并进行了一些小改动。最终目标是拥有与最新版本的 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（下面给出了 sn-p），我就明白了

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),),
                    ],
                  )
                ],
              )

            ],
          ),
        ),
      ),
    ) ;
  }

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

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

【问题讨论】：

标签： flutter dart bloc state-management flutter-state

【解决方案1】：

您还必须将 bloc 传递给 BlocBuilder。

bloc: sl<NumberTriviaBloc>(),

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

【讨论】：

【解决方案2】：

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

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

【讨论】：