This question already has answers here:
How to store image to cachednetwrok image in flutter
(7 answers)
Closed 16 days ago.
In my Flutter app, I have pages with multiple user profile images. Sometimes 20 of the same user profile image. For every image, I fetch the download URL from Firebase Storage and use a FadeInImage. Will Firebase Storage count every image as a download or do the images get saved to the cache and automatically reused?
In other words, do I need to worry about saving the images to cache myself to reduce downloads and costs or does Firebase do that for me?
do I need to worry about saving the images to cache myself to reduce downloads or does Firebase do that for me?
If you're reading files from Storage, it doesn't mean that they will be automatically cached on your device.
To solve this you have to find a solution for caching, so you don't need to use bandwidth each time you display an image. For Flutter I recommend you check the accepted answer from the following post:
How to store image to cachednetwrok image in flutter
I cannot find any documentation that currently shows any data being cached, but flutter has plenty of libraries that can help with that, I personally use the extended image library https://pub.dev/packages/extended_image that can cache any image fetched on the network with very simple code.
Are you trying to reduce bandwidth costs for Firebase storage or for users so they don't have to download same images every time? If for users, then you'll have to cache them yourselves and write your own logic to purge the files as needed.
Alternatively, consider using Cloud CDN, where egress charges are lower compared to Firebase storage and it would also speed up download speed significantly for end users. It'll also be useful to purge cache programmatically using Cloud Functions/backend when a user updates their profile image.
Also see Firebase storage extremely slow fetching.
Related
So, I am using Firebase/Cloud Storage with Flutter.
I am still trying to understand what constitutes bandwidth usage.
Setup:
I've built a simple app to pull images from Firebase. Each image is less than 100kb.
Flutter DevTool Network:
Here, it makes a multiple HTTP calls for maybe 10 images.
Firebase CloudStorage BandWidth Usage:
What I am seeing:
With just 10 images being loaded, the Bandwidth uses around 400 MB.
After refreshing the app a few times, the bandwidth already exceeded close to 2 GB.
I am not really understanding what's going on.
Does anyone know how else I can investigate why so much bandwidth is being used for simple 10 images loading?
I want to build a flutter app which focuses on learning plant names with the help of a lot of pictures. In total there will be 600-800 pictures.
question: Do I store these pictures all in the app or in a database?
From what I read so far I guess the app would be too big if I store all these pictures in the app.
question: Which database should I use for storing such an amount of pictures?
I want to give the possibility to store a lection/course (containing 30-40 pictures) locally on the phone to be able to learn without internet connection.
question: Which database should I use for that?
Question #1: Do I store these pictures all in the app or in a
database?
You should not store all the images in your app. Use the Cloud Storage for Firebase service to store your pictures and download them to your app as desired.
Question #2: Which database should I use for storing such an amount of pictures?
You should use Cloud Storage for Firebase to store your pictures: "Cloud Storage for Firebase is built for app developers who need to store and serve user-generated content, such as photos or videos."
Question #3: I want to give the possibility to store a section/course (containing 30-40 pictures) locally on the phone to be
able to learn without internet connection. Which database should I use
for that?
You can save these pictures locally as explained here in the Firebase doc: "The writeToFile() method downloads a file directly to a local device. Use this if your users want to have access to the file while offline."
If in a database, get pic to many times, and much more than the free limit of database , we will prefer pic in app than in database.
But in app will never consider the cost, just keep the develop account. Maybe, a pic could compress down to 50kb each, and the app will not too big to download.
mongodb google-could amazon ... all database on the market can serve you.
above dbs are good. the more resourses on net, the better envirnment we like.
My app uses a-lot of cached images which (I think is the reason causing my app to crash) when i scroll to view so many at one time.
My app is all about images inside list/grid view.
Is it good practice to cache them all?
Note:
Please note I'm using SliverGrid which is loading images lazily.
If you going to manage a buch of amount image is better, download them to a local directory and take the url like a name in a Data Base then you can ask on every request if your url is on your data base if is there then the file in your directory exist if not, you do the request and store it file in directory and name on db. This is better when your app manage a buch of information in cache like image, because on some devices the app can be crash o even restar the device.
I have been working on an e-commerce app. As there are a lot of images to be loaded for product listing I tried to cache the images using flutter_advanced_networkimage: ^0.7.0, and cached_network_image 2.5.0 packages. It seems that images are cached and loaded only if the app is in memory.
ie: if the os kills the app or user closes the app from the background the cached data lost.
Is there any better way to cache images for use-cases like e-commerce?
Thanks.
I am creating an app where the user will select some photos for the avatars used in the app. Once selected, on the next launch I want to populate the avatars automatically.
Solution I am Thinking: I will keep a duplicate of the original photo in the app directory and next time I will use the photo to make the avatars.
Issue: Not efficient as the same copy of the image exists.
Question: Since many apps are doing this thing, I want to know the best way to do that, more specifically in Flutter?
Use the cached_network_image plugin.
This plugin allows you to download an image from the internet and cache it in the app for later. You can provide a placeholder image that sits there while no image has been loaded yet(from the web or the internal cache) and also what to show in case of error. If the device goes offline cached_network_image automatically will load the image from the cache, it's transparent to your app, you don't have to bother with the cache, storage space, database, anything.
Take a look at the docs.
There are no best practices in this regard. It depends on your app.
1) Storing your avatars
Takes more storage space. But your app runs faster.
Best when the number of avatars displayed on a single screen is high, but the total number of avatars in your app is small. (E.g.: you show 15 avatars on a single screen, and there are 100 avatars in your database).
2) Generating your avatars
Takes less space. But your app runs slower.
Best when the number of avatars displayed on a single screen is low, but the total number of avatars in your app is large. (E.g.: you only show 3 avatars on a single screen, but there are 100.000 avatars in your database).
Conclusion
Speed is usually more important than storage space, therefor I'd lean towards storing the avatars. But the only true way to get an answer is to test it and see what works best for your specific app.
I think you must copy the original photo, Most people use cloud service(google photos etc.) for their photos and not keep photos on phones any more..
use cached images widget to store images for some time or use SQLite database for long time in device .