根据 flutter 类型显示 svg 或来自网络的图像

Question

您好，我正在使用一项向我发送图像的服务，有时是 png 或 jpeg 图像，我使用 flutter widget Image。另一方面，有时会向我发送 svg 图像，直觉上我可以使用flutter_svg包，但我不知道如何根据图像类型在这些小部件之间进行切换。

网址上没有任何内容可用于确定图像类型。

我怎样才能做到这一点？

更新：来自服务器的示例响应，图像位于属性 lexeme_image 上

{
  "has_tts": true,
  "word": "one",
  "language_information": {},
  "from_language_name": "Spanish",
  "tts": "https://d1vq87e9lcf771.cloudfront.net/joeyn/b53723d682be1114be1cefce3ddbb908",
  "infinitive": null,
  "learning_language": "en",
  "translations": "un, una, uno",
  "learning_language_name": "English",
  "pos": "Numeral",
  "lexeme_image": "https://d2pur3iezf4d1j.cloudfront.net/images/4be10d03a4c6ac4078b6be0df2eb5247",
  "from_language": "es",
  "is_generic": false,
  "lexeme_id": "dd0309fb9cf34f8a2b2e029889c26ec5",
  "related_lexemes": [],
  "canonical_path": "/dictionary/English/one/d3a447831e3322e78309fa3a161c0ebf"
}

Answer 1

.network不要使用小部件提供的构造函数，而是使用网络请求Image检索图像文件，如下所示：

HttpClient().getUrl(Uri.parse(STRING URL HERE))
    .then((HttpClientRequest request) => request.close())
    .then((HttpClientResponse response) => 
        response.pipe(File('foo').openWrite()));

或使用以下更好的示例await：

HttpClientRequest request = await HttpClient().getUrl(Uri.parse(STRING URL HERE));
HttpClientResponse response = await request.close();

File file = File('foo');
await response.pipe(file .openWrite());

然后使用image library和解码器类方法，PngDecoder您可以检查图像是否为 png 或 jpeg。例子：JpegDecoderisValidFile

PngDecoder png = PngDecoder();
JpegDecoder jpg = JpegDecoder();

if(png.isValidFile(file) || jpg.isValidFile(file)) {
  //use `Image.file(file)`
}
else {
  //use `SvgPicture.file(file)`
}

如果是其中任何一个，您可以将检索到的文件传递给Image.file构造函数。如果不是，则使用SvgPicture.file构造函数。