Question

今天想给rss频道加个头像，代码如下（flutter 2.x）：

return Card(
      key: Key(counter.value.id.toString()),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  CircleAvatar(
                    radius: 20,
                    backgroundImage: NetworkImage(
                      'https://source.unsplash.com/50x50/?portrait',
                    ),
                  ),
                  Flexible(
                      child:Text(
                      counter.value.subName,
                      softWrap: true,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      )),
                    ),
                  if(isFav.value == 1)
                    Padding(
                      padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
                      child: ButtonTheme(
                          minWidth: 50,
                          height: 30.0,
                          child: RaisedButton.icon(
                            color: Theme.of(context).primaryColor,
                            icon: Icon(
                              Feather.check_circle,
                              size: 16,
                            ),
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(5.0)),
                            onPressed: () => touchSub(counter.value.id.toString(),SubStatus.UNSUB),
                            label: Text("已订阅"),
                          )
                      ),
                    )
                  ,
                  if(isFav.value != 1)
                    Padding(
                      padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
                      child: ButtonTheme(
                          minWidth: 50,
                          height: 30.0,
                          child: RaisedButton(
                            color: Theme.of(context).primaryColor,
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(5.0)),
                            onPressed: () => touchSub(counter.value.id.toString(),SubStatus.SUB),
                            child: Text("订阅"),
                          )
                      ),
                    )
                ],
              ),
              Row(
                children: [
                  Flexible(
                    child:Text(
                        counter.value.intro,
                        softWrap: true,
                        style: TextStyle(
                          fontSize: 15,
                        )),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );

当我添加此代码片段时：

CircleAvatar(
                    radius: 20,
                    backgroundImage: NetworkImage(
                      'https://source.unsplash.com/50x50/?portrait',
                    ),
                  ),

显示错误：

======== Exception caught by widgets library =======================================================
Null check operator used on a null value
The relevant error-causing widget was: 
  CircleAvatar file:///home/dolphin/Documents/GitHub/cruise-open/lib/src/component/channel_item_card.dart:67:19
====================================================================================================

======== Exception caught by widgets library =======================================================
Null check operator used on a null value
The relevant error-causing widget was: 
  CircleAvatar file:///home/dolphin/Documents/GitHub/cruise-open/lib/src/component/channel_item_card.dart:67:19
====================================================================================================

CircleAvatar 绝对不为空，为什么会出现这个错误？问题出在哪里，我应该怎么做才能解决它？我试过像这样在构建方法之外获取图像：

  NetworkImage getImage(){
    NetworkImage ni = NetworkImage(
      'https://source.unsplash.com/50x50/?portrait',
    );
    return ni;
  }

好像不行。我试图从本地加载图像：

CircleAvatar(
                    radius: 20,
                    backgroundImage: AssetImage('lib/resouce/icon/ProcessedImages/Icon-App-83.5x83.5@3x.png'),
                  ),

也没有用，这是 pubspec.yaml 中的资产配置：

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  generate: true
  assets:
    - lib/resouce/icon/ProcessedImages/Icon-App-83.5x83.5@3x.png

这是图片路径：

我发现图像包为空：

并且没有线索解决它。

Answer 1

NetworkImage('https://source.unsplash.com/50x50/?portrait') 可能是 null。当 flutter 调用 build 方法时，它希望 build 方法立即返回结果，以便每秒渲染 120 帧。这意味着它不会等待任何网络请求发生。

您必须在构建方法之外从 Internet 加载图像。

在flutter中使用CircleAvatar时对空值使用的空检查运算符

1 个答案: