Flutter-显示来自本地json文件的图像url

Question

我是新手。我有一个json文件，包含名称、描述、徽标URL。我设法展示了Name&描述，因为它们是文本，但我如何才能显示徽标？

---

代码：

List data;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: Center(
child: FutureBuilder(
future: DefaultAssetBundle.of(context)
.loadString('components/abilities-list.json'),
builder: (context, snapshot) {
var myData = jsonDecode(snapshot.data.toString());
return new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Name' + myData[index]['name']),
Text('Description' + myData[index]['description']),
],
),
);
},
itemCount: myData == null ? 0 : myData.length,
);
},
),
),
));
}
}

---

json示例

{
"name": "Swiftlash",
"description": "Performs a quick Omnislash",
"logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/9/96/Swiftslash_icon.png"
},
{
"name": "Wolf Bite",
"description": "Lycan bites an ally, granting them Shapeshift properties.",
"logo_url": "http://static.wikia.nocookie.net/dota2_gamepedia/images/8/8b/Wolf_Bite_icon.png"
},

Answer 1

您可以从url中显示图像或徽标，然后按照下面的包进行操作，每次加载图像都不需要时间：

https://pub.dev/packages/cached_network_image

所以你的代码是：

new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CachedNetworkImage(
imageUrl: myData[index]['logo_url'],
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
Text('Name' + myData[index]['name']),
Text('Description' + myData[index]['description']),
],
),
);

Answer 2

这很简单，就像一样使用

return  Card( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Image.network(
myData[index]['logo_url'],
height: 100,
width: 100),
Text('Name' + myData[index]['name']),
Text('Description' + myData[index]['description']),
],
),
);