I want a fade in image with a placeholder. After searching through internet I came across FadeInImage.memoryNetwork() and it is working fine as I wanted, but now I also need to call a function when the image is loaded successfully from network, thanks to Image.network() for providing loadingBuilder() function.
But the problem is that I am not able to use both FadeInImage.network() as well as Image.network() simultaneously and I want both the property for my app.
Any suggestions how to put image placeholder using Image.network or other way round how to use loadingBuilder in FadeInImage.memoryNetwork(). Any way round will solve my problem.
Any suggestions is highly appreciated.
you can try this:
var image = Image.network(//your code);
FadeInImage(
placeholder: //your placeholder
image: image.image,
)
Related
It's said in the description of the package that is supports web. But since it's not possible to get path of the file in flutter web I can't to use it. Because the only way to work with this package is to provide path of the image
I looked at the example and you have to use Image.network instead of Image.file on web.
Then you can pass in the url to the image like this:
Image.network(
url,
);
if you what to crop image than check out crop_image package
I want to add an image that I added to my application from the phone's gallery to the list and call it with Image.asset as a String value.
I managed to get the image with ImagePicker. Unfortunately, there is no next. I don't know exactly how to do this.
In short: I will select an image from gallery with ImagePicker and replace it with "Image.file"
I will do it by converting it to String value with Image.asset.
You have to use image.file or image.memory to load an image from ImagePicker.
image.asset is for images that already exist within your app.
image is not loading in output in my screen .soo plz anyone help me in solving this
Container(
decoration: const BoxDecoration(
image:DecorationImage(image: NetworkImage(''))
),
)
Check if you added your image into the pubspec.yaml file like this:
assets:
- images/image1.jpeg
- images/icon.png
I suggest use the child of the Container and not the decoration.
Also, you could use Image.Asset instead, specifing height or/and height:
Image.asset('images/icon.png', height: 20)
Documentation here and here
Generally, Network Images on flutter take time to appear.
But if it still continues then
Check Internet Permission setting in andoidmanifes.xml file
Using Asset image is not a good solution because it makes the app size larger..
The solution is that you need to use:
Container(
child: Image.network('') //your image source
)
And if that is not the case.. the image you are using is invalid but not exactly invalid. Meaning it does not end with an image format in the end.. like (.jpg,.png etc.)
Problem Description
I have no clue when I need to use and Image.asset() and when I need to use AssetImage(). For me, it seems like both of these are the same.
Image.asset is a kind of Widget/StatefulWidget. You can use Image.asset() directly while AssetImage is a provider of an image type, which helps in retrieving an image from a source location/path and you can't use AssetImage directly.
I am trying to display gif in flutter.
I am using the code
Image(image : NetworkImage(message.image_url))
But it shows error:
Another exception was thrown: Exception: HTTP request failed, statusCode: 403, https://media.giphy.com/media/13AXYJh2jDt2IE/giphy.gif%20
Place your gif in your images folder of your project and mention it in pubspec.yaml file,just like you do for images.
Image.asset(
"images/loading.gif",
height: 125.0,
width: 125.0,
),
This is what used in Flutter Gallery app to display .gif from web
Image.network('https://example.com/animated-image.gif')
I found a way with which you can download and add giphy.com's gif in your application using #Nudge answer.
Here is the trick which you can use-
Sample Giphy's .gif URL - https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe
You have to split the last part of url after -.
Insert the last part in the following url: https://giphy.com/media/{URL_PART}/200.gif.
In this case, URL_PART will be xT0xezQGU5xCDJuCPe. Simply replace it in the above url.
You will get the following output url:
https://giphy.com/media/xT0xezQGU5xCDJuCPe/200.gif
Check it out. I hope it will help someone. ;)
EDIT:
Recently, Giphy changed their url format to https://i.giphy.com/media/${URL_PART}/200.gif (Special thanks to #Rivaan for mentioning it out).
Now, new url would become: https://i.giphy.com/media/xT0xezQGU5xCDJuCPe/200.gif
Giphy does not allow you to load the image. There's nothing that flutter can do about it: https://en.wikipedia.org/wiki/HTTP_403
When adding a new resource to assets, restart the ide
An update to #Chetan Goyal 's answer. It throws an exception of incorrect image data now.
To display URL from Giphy that looks something like https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe, we need to extract the part after hyphen i.e. xT0xezQGU5xCDJuCPe and add it to this URL: https://i.giphy.com/media/${URL_PART}/200.gif
Hope it helps someone.