Flutter 如果资产中的图像不可用，如何显示占位符

Question

我得到了一些图像名称列表，我只需要从我的资产文件夹中获取它。 但是有些图像不可用，所以如果不存在，我需要添加一些错误占位符。 我尝试使用 Future 但是当我在屏幕上显示它时显示无法在 Widget 中添加 Future Widget 的错误

   ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(100)),
    child: Image.asset(
      'assets/images/${image}.png',
      height: 50,
      width: 50,
      fit: BoxFit.fill,
    )),

这就是我得到的

 Future<Widget> Imagee(image) async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

显示Widget中无法添加Future

Answer 1

也许您可以尝试使用验证：

  await rootBundle.load(image);
  if (image != null) {
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
         'assets/team/${image}.png',
         height: 60,
         width: 60,
         fit: BoxFit.fill,
      ));
  } else {
        //...
  }

Answer 2

如果您有异步调用来加载图像，则可以使用FutureBuilder 。

Future<Widget> ImageOrNot() async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

并在构建内部使用FutureBuilder

class ImageOrBox extends StatelessWidget {
  const ImageOrBox({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: imageOrNot(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return snapshot.data??Text('Error');
      },
    );
  }
}