【问题标题】:Future returning null in combination with FutureBuilder in FlutterFuture 在 Flutter 中结合 FutureBuilder 返回 null
【发布时间】:2026-02-19 02:10:01
【问题描述】:

我想使用 FutureBuilder 来检查 url 是否是 png 图像,然后构建一个或两个图像(在列表中)。但不知何故,当我打印 Future 时,它​​总是返回 null...

结果是应用程序总是使用两个 CachedNetworkImages 构建列表视图,这不是我想要的。如果 URL 是图像,它应该只使用该 url 构建一个 CachedNetworkImage,如果不是,它应该更改 url 并使用 2 个图像构建一个列表视图。

child: new FutureBuilder(
                future: _getImages(widget.imgUrl),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  switch (snapshot.connectionState) {
                    case ConnectionState.none:
                      return new Text('Press button to start');
                    case ConnectionState.waiting:
                      return new Text('Awaiting result...');
                    default:
                      if (snapshot.hasError)
                        return new Text('Error: ${snapshot.error}');
                      else {
                        print(snapshot.data);
                        if (snapshot.data == "image/png") {
                          return new SingleChildScrollView(
                            child: new CachedNetworkImage(
                              imageUrl: widget.imgUrl,
                              placeholder: new Center(
                                  child: new AdaptiveProgressIndicator()),
                            ),
                          );
                        } else {
                          return new ListView(
                            children: <Widget>[
                              new CachedNetworkImage(
                                imageUrl:
                                    widget.imgUrl.split('.png')[0] + '-0.png',
                                placeholder: new Center(
                                    child: new AdaptiveProgressIndicator()),
                              ),
                              new CachedNetworkImage(
                                imageUrl:
                                    widget.imgUrl.split('.png')[0] + '-1.png',
                              )
                            ],
                          );
                        }
                      }
                  }
                }),
          ),
        ));
  }

  Future<String> _getImages(String url) async {
    await http.get(url).then((result) {
      return result.headers['content-type'];
    });
  }

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    这段代码有点奇怪。

    Future<String> _getImages(String url) async {
      await http.get(url).then((result) {
        return result.headers['content-type'];
      });
    }
    

    async 允许您避开then(在大多数情况下)。

    代码应该是:

    Future<String> _getImages(String url) async {
      var result = await http.get(url);
      // for debugging only
      print('statusCode: ${result.statusCode}');
      var contentType = result.headers['content-type'];
      print('content-type: $contentType');
      return contentType;
    }
    

    这样你也可以检查请求是否真的提供了结果。

    【讨论】:

      【解决方案2】:

      您的_getImages 函数不返回任何内容。您需要返回调用结果。

      Future<String> _getImages(String url) async {
         return await http.get(url).then((result) {
            return result.headers['content-type'];
         });
      }
      

      【讨论】: