如何将小部件分配给 FadeInImage 中的占位符？

Question

代码：

FadeInImage(
  placeholder: MyOwnWidget(), // error
  image: NetworkImage(url),
)

我想向 提供我自己的小部件placeholder，我该怎么做，有什么解决方法吗？

Answer 1

似乎不可能，FadeInImage我必须使用

Image.network(
  url,
  loadingBuilder: (_, child, progress) {
    if (progress == null) return child;
    return MyOwnWidget();
  },
)

Answer 2

只需将空字符串 ('') 传递给placeholder，即可placeholderErrorBuilder触发回调。并提供您的占位符小部件。

您可以检查下面的示例。

return ClipOval(
  child: FadeInImage.assetNetwork(
    placeholder: '',
    image: url,
    fit: BoxFit.cover,
    width: width,
    height: height,
    fadeInDuration: const Duration(milliseconds: 400),
    fadeOutDuration: const Duration(milliseconds: 100),
    placeholderErrorBuilder: (context, error, stackTrace) => placeholder,
    imageErrorBuilder: (context, error, stackTrace) => placeholder,
  ),
);

以及placeholder供参考的小部件。

Widget placeholder = CircleAvatar(
  backgroundColor: Color(0xffE6E6E6),
  radius: 30,
  child: Icon(
    Icons.person,
    color: Color(0xffCCCCCC),
  ),
);