如何在flutter(SvgPicture.network)中为flutter_svg网络映像创建回退映像

Question

目前，我正在这样调用SvgPicture网络映像：

SvgPicture.network(
"https://upload.wikimedia.org/wikipedia/commons/2/24/Circle-icons-image.svg",
width: 90,
fit: BoxFit.cover,
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
);

但是，如果URL格式不正确怎么办？如果发生这种情况，我怎么能有一个后备映像，这样我的整个应用程序就不会崩溃？

我也试过用try/catch来包装它，但没有用，因为崩溃仍然会杀死应用程序。

SvgPicture getImageType(String? imageUrl) {
try {
return SvgPicture.network(
"https://upload.wikimedia.org/wikipedia/commons/2/24/malformed_url.svg",
width: 90,
fit: BoxFit.cover,
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
);
} catch (_) {
return SvgPicture.network(
"https://upload.wikimedia.org/wikipedia/commons/2/24/Circle-icons-image.svg",
width: 90,
fit: BoxFit.cover,
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator()),
);
}
}

Answer 1

您可以使用http包检查资源是否存在。如果它不存在，请使用其他URL:

var image = 'https://upload.wikimedia.org/wikipedia/commons/2/24/malformed_url.svg';
final response =
await http.get('https://upload.wikimedia.org/wikipedia/commons/2/24/malformed_url.svg');
if (response.status != 200) {
image = 'https://upload.wikimedia.org/wikipedia/commons/2/24/Circle-icons-image.svg'
}

您可以通过检查flaft_SVG是否能够解析SVG来检查SVG是否格式错误：

final SvgParser parser = SvgParser();
try {
parser.parse(svgString, warningsAsErrors: true);
print('SVG is supported');
} catch (e) {
print('SVG contains unsupported features');
}