networkImage错误处理/占位符不起作用

Question

当url返回null时，如何在networkimage中添加网络处理/占位符？

body: Center(
child: ListView.builder(
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
User user = users[index];
return ListTile(
title: Text(user.firstName),

subtitle: Text(user.role),
leading: CircleAvatar(
backgroundImage: NetworkImage(user.avatar.toString()),
errorWidget: (context, url, error) =>  //this part not working
Icon(Icons.error),
),
onTap: () {});
})));

Answer 1

有两种方法可以显示带有错误处理的网络图像：

一：使用Image.network

Container(
clipBehavior: Clip.antiAlias,
height: 100,
decoration: BoxDecoration(shape: BoxShape.circle),
child:
Image.network('wawdasda', errorBuilder: (context, object, trace) {
return Container(
color: Colors.red,
);
}),
)

两个：

Container(
clipBehavior: Clip.antiAlias,
height: 100,
decoration: BoxDecoration(shape: BoxShape.circle),
child: Image(
errorBuilder: (context, object, trace) {
return Container(
color: Colors.red,
);
},
image: NetworkImage(
'asdasdas',
),
),
)

Answer 2

使用以下代码。

body: Center(
child: ListView.builder(
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
User user = users[index];
return ListTile(
title: Text(user.firstName),

subtitle: Text(user.role),
leading: CircleAvatar(
backgroundImage: Image.network('ImageURL....',
errorBuilder: (context, exception, stackTrace) {
return const Icon(Icons.error);
},
), 
onTap: () {});
})));