CODEWITHSUNDEEP
imageif-statementflutternetwork-programming
blueprint
blueprint

Reputation: 61

New to Flutter. How to display a network image in Flutter with cached_network_image and have an image from local imageAsset as placeholder?

I have this dynamic local AssetImage from a model/event.dart file, but in case imagePath is empty i want to display an image from network with cached_network_image.

           child: Stack(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Image(
                    height: 200.0,
                    /* width: 280.0, */
                    width: MediaQuery.of(context).size.width * 0.80,
                    image: AssetImage(event.imagePath),
                    fit: BoxFit.cover,
                  ),
                ),
              ],
            ),

Upvotes: 0

Views: 1466

Answers (1)

griffins
griffins

Reputation: 8246

from the cached_network_image you can do something like this 

 CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => placeholder: (context, url) => {return Image.asset('assets/img/my_placeholder.png');},
  errorWidget: (context, url, error) => Icon(Icons.error),
),

else you can use fadein image as shown below FadeInImage(image: NetworkImage(url), placeholder: AssetImage(assetName)

Upvotes: 1

Related Questions