CODEWITHSUNDEEP
imagefluttercachingnetwork-programmingdart
mocha234
mocha234

Reputation: 147

Flutter : Display Local Image when Network Image not found or error fetching it?

Center(
                child: CachedNetworkImage(
                  imageUrl: "http:/ sosme link here",
                  errorWidget: (context, url, error) => Icon(Icons.error),
                  fadeInCurve: Curves.easeIn ,
                  fadeInDuration: Duration(milliseconds:1000),
                  fadeOutCurve: Curves.easeOut,
                  fadeOutDuration: Duration(milliseconds:500),
                  imageBuilder: (context, imageProvider) => Container(
                    height: 250.0,
                    width: 250.0,
                    decoration: BoxDecoration(
                    border: Border.all(
                    color: Colors.black,
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    color: Colors.white,
                    image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                    ),
                    ),
                  ),
                ),
              ),

My goal is to load image from URL that may and may not exist. In case of not existing URL, load asset image. Tried insert asset image here, but didnt't work. As I was thinking if there's error loading it, means no image found or something else. So I wanna display a local image instead.

Any Suggestion?

errorWidget: (context, url, error) => Icon(Icons.error),

Error, when i use asset image

Error, when i use asset image

Upvotes: 2

Views: 5704

Answers (3)

Bijoya_Banik
Bijoya_Banik

Reputation: 449

CachedNetworkImage(
imageUrl: "your image url",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
placeholder: (context,url) => CircularProgressIndicator(),
errorWidget: (context,url,error) => new Icon(Icons.error))

Upvotes: -1

Jitesh Mohite
Jitesh Mohite

Reputation: 34280

Make Sure image exist in the asset folder in the path. for Eg:

errorWidget: (context, url, error) => Image.asset('assets/images/image.jpg'),

And declare that path inside pubspec.yaml file. Eg:

assets:
    - assets/images/image.png

Upvotes: 1

srikanth7785
srikanth7785

Reputation: 1522

You can use FadeInImage widget for your use case..

Here's a sample for you..


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

You can get more information from official website.

Upvotes: 1

Related Questions