Adding Images Stored in Firebase Storage to Our Flutter Application

welcome back to blou dev everyone today we're going to be finishing up our application with firebase storage and we're going to be prepping the app so that we can submit it to the ios and android app stores i do also want to make note i'm going to be doing a giveaway coming up soon and we're going to be giving away a copy of cracking the coding interview it's by gaylock mandal an excellent author who basically lays out how to prepare for and succeed in coding based interviews so if you're interested in winning this be sure to subscribe to the channel and click that notification button so you can be ready for when that giveaway comes up also make sure to follow bli dev on twitter so you can also have a little bit more awareness with that and get more flutter weekly content with that let's dive into our flutter application the first thing we need to do is set up firebase storage so that we can call and pull images down from it into our flutter application what i'm hoping to do here is i'm going to spin this up really quickly let that get running i'll let that run my emulator what i want to do is i want to have several avatars stored in firebase storage and essentially i'll provide a way for the user to select which avatar they would like to have as their profile image and so we'll be utilizing cloud firestore to tell to tell us and save the preference of the user and we'll use firebase storage to store all of our different avatars that way we could have hundreds and thousands of different photos and not take up a ton of room within our build so let's let's get going with that the first thing that we're going to want to do if you haven't already you should have at this point if not go back and do it is make sure you have your ios and android apps added in to firebase i just have ios right now because i'm only testing on my ios emulator i'm going to go back through and do android testing later the next thing we want to do is go to firebase storage so you'll see here in your developer tab and click get started click next i'm going to leave it at us central it's going to create a default bucket that's going to be empty for us okay once you get to this point once it's been officially built we're going to click on upload file and you're basically just going to upload the files and so i've got three avatar images here that i'm going to be using and these are the same ones that i currently have hard-coded into my application and so you'll see here my little editor tab i've got these three avatars and what i'm going to want to do is i want to have both these avatars and the one that's displayed here not be called from within my application but be called from fire storage so the first thing i'm going to do my application i'm going to go to my profile screen.dart because this is where we're going to be utilizing it and i'm going to add in the firebase storage import and if you haven't done so already in your pubspec.yaml you'll want to make sure that you reference firebase storage and currently as of the date of this video it's version 4.0.0 and it does also utilize the firebase core package which is version 0.5.0 and so it's important that you get both of those packages you're depending on both of those going back to our profile screen however we're going to go to the very bottom so after all of our code and this is this is after our profile screen state that we're adding this and we're going to create a new class called fire storage service and that's going to extend change notifier um yeah that's what i want and we're going to instantialize fire storage service and then we are going to say static future method the dynamic response load image and it's going to take in a build context called context and a string url image or string name of the image is what it's going to be and this is an asynchronous a sync method and it will return firebase storage dot instance dot ref dot child image get down that's the one download url okay so this is going to be our code for taking a url and returning a dynamic image type the methods for firebase storage the objects and methods involved have stayed the same nothing was deprecated as far as i know for firebase storage with the latest flutter fire updates so that's nice you can refer to older documentation if you have any questions or run into any issues that are specific to your application so that's good to know we are going to go up let's see where do we want to do this let's put it right above lisscell we're going to create a future widget method so we're going to say future and it's going to turn a widget and we're going to call it get image okay what this is going to do is it's going to return an image given a a name for that image found in firebase storage and we're going to utilize that class we just created to fetch and download the image from firebase storage so we have our build context and we have our image name okay and we are going to make this an asynchronous method because it's a future and we are going to say substantialize the image wait firebase um storage server fire storage service yeah that's what we called it dot load image passive contacts pass it image name um and then once we've done that we are going to say image hold on here um i actually that's what i want there we go i'm gonna say image which we defined above is equal to image dot network uh would be box fit dot scale down okay so this right here is going to pass in our image name the name of what we want to pull down for firebase storage it'll call our firestore service which we defined down below we'll call the method load image which takes in that url and we basically call firebase storage and pull down and download the image and return it as a dynamic object which back up at our method is going to um take that and basically we're going to it's going to take the url of that image as found in firebase storage and it's going to place it we're going to feed it to the image.network widget and set it equal to our image widget and then when we're done with all of this we can return that new widget image and now this method is ready to be utilized by a future builder so kind of a lot um so what we're gonna do here for testing let me see where i believe this is it yes i placed a temporary placeholder here but what we're going to be doing is we want to create a future builder and the future builder is going to let me get my commas in here for formatting the future builder is going to have um it's going to call that ref oh nope i want it to do it's going to yeah there we go it's going to call get image we're going to pass it for testing um let me go i'm going to need to check hold on one second i'm going to check back on firebase just to ensure that avatar 1 is an actual name of an image storage and it is so this is the image that we want to pull avatar one okay and that's the future aspect now all we need to do is take the builder piece okay and we are going to say context and snapshot and we're going to say if snapshot dot connection state is equal to connection state dot done then we want to return container and in that container we want a width of media query dots of context dot size dot width divided by 1.2 okay so we want it to be just lighter than the width of the container it's in and then for height we want it to be a perfect squared image so we're going to just keep that same value and then the child will be snapshot.data because it should just be an image class already and if we need to make any modifications to that we can do so in here this is the widget that's going to be displayed there okay we're not done yet though that's just if it's a connection state.done we also want to say if snapshot.connectionstate is equal to connection state dot waiting then we want to say um return container with the same width i'm going to actually copy all this just so i want to repeat it uh there we go but instead of snapshot.data we want to return a circular progress indicator and if it's neither of those something's gone wrong and let's just return a blank container okay to reload there we go there's our image and if we do avatar two so i have three avatars one two and three so reload pull up in my simulator there it is and i'll put this just within view let's do avatar three reload there it is and you saw briefly there is that circular progress indicator so that's what we're going for we can utilize the same piece so i can say you know all of this we can utilize this inside of our in place of our image asset here in place of this we can place um our new method oh i just locked it and we can add it there too so off camera i'm going to brush up all of this i'm also going to add a little bit better data here and the next video we're going to go over prepping your application for submission to the ios and android store and so stay tuned if you're interested in that i'm going to walk through and actually prep this app as if i'm going to submit it and i probably will submit it once i brush up the few details that they're going to be picky about so make sure you like this video and subscribe to the channel if you found this useful again if you're interested in that giveaway of that coding interview book then be sure to turn the notifications on that way you can stay tuned and hear about it as soon as i announce it as always if you have any questions leave them in the comments below and i'll catch you guys next time

Channel: Bleyl Dev

Views: 26,896

Keywords: Flutter, Flutter UI, Flutter Widget, FlutterFire, Firebase, Firebase Storage, Flutter Firebase, Flutter Firebase Storage, Flutter Google, BleylDev, Mobile App Development, Dart, How to, learn to, learn to code, how to code, programming, codenewbie

Id: zayS0zrKsF4

Length: 14min 16sec (856 seconds)

Published: Thu Sep 10 2020