Adding Images Stored in Firebase Storage to Our Flutter Application

This tutorial goes through simple Firebase storage hookup and usage in flutter. Learn to Setup Firebase Storage, pull image URL's from it for usage within the app.
For more weekly Flutter content be sure to Subscribe to the Channel!
✅ Twitter: / bleyldev
✅ Facebook: / bleyldev
✅ Medium: / bleyldev
✅ Patreon: / bleyldev
FlutterFire Documentation: firebase.flutter.dev/docs/sto...

[@sanuhara1375]

You mentioned minor things that worth a fortune. Clear and precise..
Love it.. Liked and Subbed in case this Thanks isn't enough..

[@BleylDev]

Thanks Shasiru!

[@arjunbansal2805]

Always the best ❤️❤️❤️🎉🎉🎉🙏🏻🙏🏻
Thankyou so much

[@nykse]

Usefull Thank You!

[@sakibshaikh3447]

Thanks. This works👍👍

[@mohammad7339]

that keyboard tho. niceee

[@zepecat]

great! thank you!

[@BleylDev]

Glad you liked it!

[@sevoim]

I uploaded an image on firebase storage, but the image appears on a white screen in the image.

[@kishanyadav-wj9gu]

I am working on some project in flutter and I am a beginner so please help to retrieve the pdf file which is store in firebase.

[@delyaralo5720]

my friend your video is very usefull for me but i have question what abut if i have directory contain some images how can i adding all of image in my flutter app

[@tristangjarrett]

Hey man, thanks for the video. Are you going to do part 11 with submitting to the app store? I'm curious as to what changes need to be made for it to be accepted.

[@BleylDev]

I've got a video done for submitting to app store, just haven't edited it quite yet. If you have any specific questions on publishing a Flutter app to the app store message me on discord and I can answer them in the meantime

[@IreshDissanayakaM]

Could you please explain why did the FireStorageService class extend the ChangeNotifier class? btw, Thanks for the great tutorial.

[@logicgates8944]

same question here; especially that he didn't notify listeners and use provider for state management

[@ramadhanputra6391]

@@logicgates8944 thats is because that is the same pages

[@jacobmiller38]

I have something similar, but with post backgrounds instead of avatars. They are large images, but take a long time to load and use lots of memory. Is there anything I could do?

[@BleylDev]

Try utilizing the CachedNetworkImage package. It’ll load photos as they render. Also if you can, simply host your photos somewhere and use a link instead of the actual photo in your app with that package so it won’t use up so much memory

[@jacobmiller38]

@@BleylDev it’s definitely better. There are about 20 images and will all be seen by the user on a variety of screens. Would it make sense to prebuild the list of images widget on initial launch?

[@BleylDev]

@@jacobmiller38 I don't think so, as you will be forcing things to load that the user might not actually even come across. If these are images you know will be seen though and feel it's necessary to the UX of the app, then it might be worth doing that.

[@user-nn5oc4qe2t]

Are you going to continue to make tutorials about how to show the other avatar options as you showed in this video so that users can pick and save one of them?

[@BleylDev]

I was planning on it. I was going to do one last video on that playlist to finish hooking things up and then showing App Store submission

[@user-nn5oc4qe2t]

@@BleylDev Good. I hope to see that soon :)

[@goziem]

Thanks a lot. But I get a runtime error at this part:
child: snapshot.data
The error is as follows:
The argument type 'Object' can't be assigned to the parameter type 'Widget?'.

[@BleylDev]

Without looking at your code I won’t know for sure, but chances are if you’re using a newer version that some of the stuff in this video is deprecated and needs to be refactored. They have excellent documentation for FlutterFire now that you can Google and find easily

[@youssefsarhan2063]

same problem did u fix it ?

[@terryrees7218]

Try "child: snapshot.data as Image, " - it worked for me

[@swatithakrar5444]

sir, thanks for the video . it's really helpful to me . will you help me or guide me for my query ? I want multiple images from firebase storage to the app using for loop in this code but I don't know how to use for loop in this code. please help me...!!!'

[@enes5111]

did you learn how to do it

[@swatithakrar5444]

@@enes5111 yes, A good solution could be store the urls on Firestore so you can query the url of the images you need and with a builder paint the images (snapshots) .
it works for me.

[@enes5111]

​@@swatithakrar5444 sorry .I cant make.I added ımage in firestore, how to get ımage ı dont know.can you share the example code

[@swatithakrar5444]

now you have to copy url and store it on cloud and then ,
Firestore.instance.collection('collection name').document('document name if needed').snapshots();
if it works for you or not, let me know

[@enes5111]

@@swatithakrar5444 finally I made it. first I created a show data widget => class GonderiGosterme extends StatelessWidget {
String baslik;
// String burger;
GonderiGosterme({
@required this.baslik,
// @required this.burger
});
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
width: 400,
height: 400,
child: Stack(
children:[
ClipRRect(
borderRadius:BorderRadius.circular(8),
child:Image.network(
baslik,
fit:BoxFit.cover,
width: MediaQuery.of(context).size.width,),
)
]
),
),
);
}
}
after I accessed the database => Widget gonderiListesi(){
return Container(
child:Column(
children:[
StreamBuilder(
stream:FirebaseFirestore.instance.collection("mutfak").snapshots(),
builder:(context, snapshot){
if(snapshot.hasData){
return ListView.builder(
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
itemBuilder:(context,index){
DocumentSnapshot documentSnapshot = snapshot.data.documents[index];
return GonderiGosterme(baslik:documentSnapshot["baslik"],);
},
);
}
}
)
]
)
);
}
I access data in the simplest way. Thank you so much for your help

[@chinnifood9331]

I followed all steps in your video. Shows no error. But image is not displaying. I gave exact image in firestore. I dont why image is not displayed

[@KennethPalamara]

did you ever resolve this? I'm having the same issue

[@BleylDev]

This is likely due to differences between versions of the firebase packages. I’ll probably do this same tutorial again with updated package versions in the near future.

[@chinnifood9331]

@@KennethPalamara yes

[@trf8749]

@@chinnifood9331 how did you fixed that?

[@naseerullah7085]

Kindly provide Source Code...
Thank you

[@BleylDev]

I will check for that. This is a fairly old video however, so I can't be sure that I'll be able to locate the repo / I might have already deleted the repo.

[@naseerullah7085]

@@BleylDev Ok no problem.
Thank You

[@__sagar_shah__591]

github link?

[@__sagar_shah__591]

the code dose not work!!! any help !!??

[@BleylDev]

If you don’t use the same package version as seen in the video, it will break. This has since been deprecated. See more recent documentation for updated changes