Solvedflutter_cached_network_image using placeholder on CachedNetworkImageProvider or directly use CachedNetworkImage

when i try to use this library on Container to make circle image i get error

The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'.

code:

image: DecorationImage(
  image: CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    placeholder: (context, url) => new CircularProgressIndicator(),
    errorWidget: (context, url, error) => Image.asset("assets/images/profile.jpg"),
  ),
),

now i try to use another way for example:

image: new DecorationImage(image:new CachedNetworkImageProvider(url)),

so how can i have placeholder and errorWidget in this implementation?

12 Answers

βœ”οΈAccepted Answer

@MahdiPishguy sorry for my late reaction.

ImageProviders can only return 1 image, so this cannot return a placeholder first.
All image widgets on Android expect an imageprovider, so indeed you cannot use CachedNetworkImage directly. CachedNetworkImage does provide a callback which gives an imageprovider. What you can do is something like this (I'll improve the readme file to show this option):

CachedNetworkImage(
  imageUrl: "http://notAvalid.uri",
  imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: imageProvider,
            fit: BoxFit.cover,
          ),
        ),
      ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

Other Answers:

Use CachedNetworkImageProvider instead of CachedNetworkImage, It would solve the problem.

If you want to use it with DecorationImage you need to use CachedNetworkImageProvider. If you want to combine it with a placeholder you can do 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) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

Related Issues:

28
flutter_cached_network_image using placeholder on CachedNetworkImageProvider or directly use CachedNetworkImage
@MahdiPishguy sorry for my late reaction ImageProviders can only return 1 image so this cannot retur...
19
flutter_cached_network_image Library is incompatible with latest Flutter master
I published a quick fix for this as 2.0.0-rc Wil remove the -rc tag when this flutter version reache...
14
flutter permission handler Error: failed linking references during Android Build
@fritz-playmaker have you tried updating you project to fully support AndroidX (API 28)? Here are th...
12
flutter permission handler Make API more intuitive
No there is not but the basics are as follows: old way new way await PermissionHandler() .checkPermi...
5
haproxy Issue with checks after 2.0.6
As a workaround you can add option tcp-check or option httpchk in your listener/backend - checks wil...
4
offline plugin SWs & Webpack
(text may have a lot of type because I wasn't re-reading/reviewing it) I actually been thinking abou...
3
offline plugin How to exclude a specific path and all the paths underneath from being cached?
/admin and all the paths underneath are not part of my app so I want to avoid the SW from caching th...
381
flutterfire [firebase_core_web , firebase_auth_web, cloud_firestore_web ] Plugin project :firebase_auth_web not found. Please update settings.gradle.
Hi @gsusI Please add this in flutter app -> android -> settings.gradle if you disagree please write ...
252
provider A Product was used after being disposed. flutter: Once you have called dispose() on a Product, it can no longer be used.
Oh I see what you're doing Don't: DO: i have a ChangeNotifireProvider that such that i do pushReplac...
133
flutter intellij Can't wrap widget list with new widget assist by Alt+Enter
@wisit-phusi I thought you may disable Dart Quick Assists (Alt+Enter) from IDE To make sure please o...
99
flutter_svg Error: Type 'DiagnosticableMixin' not found
There are two ways to solve it if you are in an older version of flutter other than the last one (1....
95
bloc Close instances of dart.core.Sink.
Hi @zeucxb πŸ‘‹ Thanks for opening an issue! This is a false positive in the dart linter dart-lang/lin...
73
bloc Doc request: How to use bloc across pages?
If you want your Bloc to be accessible globally (across different routes) you need to make sure that...
60
flutterfire [FIREBASE_AUTH] 'UserAgent.h' file not found flutter firebase iOS
I changed dependencies try this Don't use ^ in version. I am working on flutter application with fir...
59
flutterfire [firebase_messaging] <Background push notification handling - no implementation found for method FcmDartService#initialized>
So in the new firebase_messaging version support for background messages was added Actually if you d...
59
provider Tried to listen to a value exposed with provider, from outside of the widget tree
listen:true being the default is logical It's not specifying listen: false inside an event handler t...
57
flutterfire [firebase_auth] iOS verifyPhoneNumber Token mismatch
Same problem with firebase_auth: 0.15.5+3: on the simulator I get the CAPTCHA code and it works ...
49
getx Persistent Bottom Bar
@arcas0803 I am putting here a complete example of using Navigator with bottomNavigationBar to be us...
47
bloc [Proposal] Replace mapEventToState with on<Event> in Bloc
What would an example that includes some basic async processing look like? It could look something l...
45
hive Version solving failed between hive_generator and dartx
Thanks for the info In the future I will release a new version of all the packages simultaneously Un...
37
flutterfire [firebase_auth] iOS doesn't build when upgrade to 1.15.x
I fixed this temporarily by running pod update in ios folder Describe the bug Flutter app doesn't bu...
36
flutterfire πŸ› [firebase_auth] Incompatible with latest flutter_localizations master channel.
For now you can simply add the following to your pubspec.yaml if you need to stay on dev channel and...
34
flutterfire [cloud_firestore] no visible @interface for 'FIRQuery' declares the selector ...
cd ios and run pod update Firebase/Firestore and run build command let me know ...
33
river_pod [RFC] Unifying syntax for listening to providers (v2)
I like most of it but I am not sure that I like the approach of a new ConsumerHookWidget ...
32
flutterfire [firebase_messaging] Application.kt: Type mismatch: inferred type is PluginRegistry but FlutterEngine was expected
There is a workaround mentioned in: #1613 Replace: To: Also temporary downgrade firebase_messaging t...
31
flutterfire Firebase messaging onResume and onMessage broken on iOS since Flutter 1.7.4
everybody: What would be possible other implications when removing that code? Removing those lines m...
29
flutterfire [firebase_auth] Method swizzling problem with phone auth iOS
@cielo Hi Yes i did I got Token mismatch too But when i fixed AppDelegate.swift i solved this error ...
29
flutterfire [firebase_admob 0.11.0+1] XCode Build Fails: Google-Mobile-Ads-SDK-fjgkwjemgangjofelixrcilvndtg
Hey guys I think this is because AdMob recently updated their SDK to 8.0.0(because of this firebase_...
28
flutterfire [firebase_messaging] Type mismatch: inferred type is PluginRegistry? but FlutterEngine was expected
Fixed by replace with: Following the instructions on pub.dev for handling background messages doesn'...
28
flutterfire [firebase_messaging] Android v2 embedding crashes
Why is this not labelled severe? This causes crash dialogs to show periodically when the application...
28
invoiceninja PHP 7.2 issues: count(): Parameter must be an array or an object that implements Countable
Since I was using PHP 7.2 locally but 5.6 on the production server I fixed this by casting an array ...
26
flutterfire πŸ› [firebase_messaging][firebase_auth] Data-only messages not received in iOS. Never fires anything in onMessage
Disabling method swizzling and using the below in my AppDelegate.swift Bug report Describe the bug O...
24
hive [Hive Generator] Failed assertion: boolean expression must not be null
Fixed in v0.8.1 I tested with complex models and it worked. Steps to Reproduce I'm trying to generat...
24
flutter_inappwebview [InAppWebview]: window.flutter_inappwebview.callHandler is not a function
I solved this issue by adding these code: hope this help 😁 Environment Flutter version: 1.10.15 Plu...
23
flutterfire πŸ› [firebase_remote_config: 0.4.1] Plugin using removed method, causing app to crash
Fixed for me by using implementation platform('com.google.firebase:firebase-bom') instead of impleme...
22
flutterfire [firebase_messaging] The application cannot be created when I add the Aplication.java
Hi I want to use firebase notifications in my application I'm adding Aplication.java for this After ...
22
flutterfire πŸ› [Crashlytics] iOS build crashes when adding crashlytics
@kuromukira Workaround for Flutter 2.0.4 is to use firebase_crashlytics from git instead of pub.dev ...
22
bloc [Question] How would you manage animation in the bloc builder?
@felangel @basketball-ico Hello I want to use Navigator too when AuthenticationState changed I solve...
21
flutterfire [Cloud Firestore] fatal error: module 'cloud_firestore' not found
I think I managed to workaround the issue I got this error as well after integrating cocoapods mysel...
21
flutter intellij Android Studio device list shows "loading" and no devices connected
Search everywhere (Shift + Shift): Search for restart flutter daemon: Device should appear after thi...
21
flutter intellij Auto complete import is ignoring package imports
Fixed with those steps: Switched to beta and back to master clearing .packages .dart_tool directory ...
21
flutter intellij 'Build Project' action doesn't work for flutter projects
For anyone looking for a workaround From @darrellpf on April 30 ...
20
flutterfire Warnings from the cloud_firestore plugin on Android: FirebaseCorePlugin.java uses unchecked or unsafe operations
set: multiDexEnabled true solved for me project/android/app/build.gradle: Steps to Reproduce Create ...
19
Dart Code Dart code stuck on "Analyzing", making every operation take too long
I battled with this for a few hours In case anyone else is battling with this After upgrading to Dar...
18
Dart Code Support --flavor argument in the debugger
Ok I think maybe the existing args already supports this I just set my launch.json like this: When I...
18
flutterfire firebase-messaging: Android Integration
@OliverWangWei Sorry.. It was a mistake to edit the MainActivity.kr file Android Integration I'm not...
18
flutterfire [firebase_crashlytics] Either the Crashlytics plugin doesn't work, or the instruction is wrong
Having the same issue even with a really simple app: I followed the setup instruction from Pub: http...