Flutter - Displaying an image url from a local json file

Question

Im new to flutter. I have a json file containing Name, Description, Logo URL. I managed to show Name & Description since they are text but how can I show the logo?

---

Code:

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 example

{
    "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

you can show the image or logo from url then follow below package, it will not take time every time to load image :

https://pub.dev/packages/cached_network_image

So your code is :

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

This is very simple just use like :

 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']),
                            ],
                          ),
                        );