构建函数返回 null，有问题的小部件是：flutter_bloc 包中的 BlocBuilder<NotificationBloc, NotificationState>

Question

我是 flutter 和 flutter_bloc 的初学者，我试图在 blocbuilder 中获取小部件但得到 "A build function returned null. The offending widget is:BlocBuilder. Build functions must never return null." 下面是 bloc 代码和空错误来自控制台。

        Column(
          children: <Widget>[
            Container(
              color: Colors.white,
              child: BlocListener<NotificationBloc, NotificationState>(
                listener: (context, state) {
                },
                child: BlocBuilder<NotificationBloc, NotificationState>(
                  builder: (context, state) {
                    if (state is NotificationLoadedState) {
                      return NotificationIconBuild();
                    }
                  },
                ),
              ),
            )
          ],
        )
  Widget NotificationIconBuild() {
    return Column(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.notifications),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(Icons.notifications),
          onPressed: () {},
        ),])}

Error from console log

I/flutter (13632): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (13632): The following assertion was thrown building BlocBuilder<NotificationBloc, NotificationState>(dirty,
I/flutter (13632): state: _BlocBuilderBaseState<NotificationBloc, NotificationState>#7fa62):
I/flutter (13632): A build function returned null.
I/flutter (13632): The offending widget is:
I/flutter (13632):   BlocBuilder<NotificationBloc, NotificationState>
I/flutter (13632): Build functions must never return null.
I/flutter (13632): To return an empty space that causes the building widget to fill available room, return
I/flutter (13632): "Container()". To return an empty space that takes as little room as possible, return
I/flutter (13632): "Container(width: 0.0, height: 0.0)".
I/flutter (13632): 
I/flutter (13632): The relevant error-causing widget was:
I/flutter (13632):   BlocBuilder<NotificationBloc, NotificationState>
I/flutter (13632):   file:///C:/Users/Nabil/AndroidStudioProjects/flutter_save/lib/home_page.dart:77:24

Answer 1

发生这种情况是因为您只为您的州指定了一个 if 条件，即 NotificationLoadedState。您的 Bloc 必须尝试构建未指定的其他状态，因此导致 BlocBuilder 返回 null。

为了快速修复，您可以暂时将 BlocBuilder 更改为类似的内容。

                child: BlocBuilder<NotificationBloc, NotificationState>(
                  builder: (context, state) {
                    if (state is NotificationLoadedState) {
                      return NotificationIconBuild();
                    } else {
                      return Container();,
                    }
                  },
                ),

Answer 2

发生这种情况是因为 BlocBuilder 需要 return。但是当 condition 为真时，您只定义了一个 return。但是当条件为假时，它将 return null。这就是它给出此错误的原因。所以你必须添加 else 块或 return 语句。

而在新版本的bloc中，如果你想同时使用BlocBuilder和BlocListener，你可以使用BlocConsumer widget。

你可以查一下： BlocConsumer Example

Answer 3

有一件事真的很傻，我用BlocListener代替BlocBuilder，它抛出了上面的错误，希望它能帮助别人。

构建函数返回 null，有问题的小部件是：flutter_bloc 包中的 BlocBuilder<NotificationBloc, NotificationState>

A build function returned null,The offending widget is: BlocBuilder<NotificationBloc, NotificationState> in flutter_bloc package

dart

flutter

bloc

flutter-bloc