Add image from network in Flutter

You can add load images from the network URL or from CDN using Image.network widget in Flutter. You can directly pass the image URL inside it and it will render the image from the network in your mobile app.

Some of the basic options that are used in Image.network areas follow:

Image.network(
    'https://placeimg.com/640/480/any',
    height: 100.0,
    width: 200.0,
    fit: BoxFit.cover,
    alignment: Alignment.center,
)

If you want to show placeholder before loading and showing an image you can use FadeInImage.assetNetwork. It will show you a sample placeholder image until the actual image is fully loaded.

FadeInImage.assetNetwork(
    placeholder: 'assets/images/placeImg.jpg',
    image: 'https://placeimg.com/640/480/any',
    fit: BoxFit.contain,
),