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

Question

我是新手。我有一个包含名称、描述、 Logo URL 的 json 文件。我设法显示名称和描述，因为它们是文本，但我怎样才能显示 Logo ？

代码:

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,
                );
              },
            ),
          ),
        ));
  }
}

示例

{
    "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 显示图像或 Logo ，然后按照以下包进行操作，每次加载图像都不会花费时间:
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']),
                        ],
                      ),
                    );