Flutter FutureBuilder 获取网络图片时的问题答案

【问题标题】：Flutter FutureBuilder questions when getting network imageFlutter FutureBuilder 获取网络图片时的问题
【发布时间】：2021-05-01 15:17:42
【问题描述】：

我正在使用FutureBuilder 显示图像。我尝试使用https://stackoverflow.com/a/52021385/7068790。但是图像仍然没有显示。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late Future<String?> _imageUrl;

  @override
  void initState() {
    super.initState();

    _imageUrl = getImage();
  }

  Future<String?> getImage() async {
    Future.delayed(Duration(milliseconds: 2000), () {
      return "https://www.google.com/logos/doodles/2021/labour-day-2021-6753651837108920.9-l.png";
    });
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _imageUrl,
        builder: (context, snapshot) {
          if(snapshot.connectionState == ConnectionState.done)
            return Image.network(snapshot.data!.toString());
          return Container(color: Colors.orange,);
        });
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

您的 getImage 方法不执行任何操作。它缺少 return 语句，因此 _imageUrl 永远不会返回 String，只会返回 null。

如果您在代码中看到Future<String?>，您应该问自己为什么要使用?。如果你真的得到一个字符串，Flutter 不会告诉你使用Future<String?>，但你可以写Future<String>。这是 Flutter 新的 null-safetyfuture 的优点，如果您返回 null，它会在这种情况下抱怨。

所以要修复你需要做的代码：

 Future<String> getImage() async {
    return Future.delayed(Duration(milliseconds: 2000), () {
      return "https://www.google.com/logos/doodles/2021/labour-day-2021-6753651837108920.9-l.png";
    });

【讨论】：