Flutter: Remote Image Loading

what's going on everybody another day another live stream how's your wednesday going mine is off to a pretty decent start as you usual you know woke up got ready started doing this not too much has happened in between but it looks like it's going to be a pretty good day anyways let me know how your day is going i know that some of you are watching in all kinds of different parts of the world and i really love to hear like where you're coming from because yeah it just always blows my mind how many people uh and where you you people are at in the world it's just really crazy to me anyways let's go ahead and get started oh gonzalo's back here in chile we changed the season hour so it's 9 24 a.m oh okay so you get so so y'all have something like daylight saving time which is what we have um oh there's an echo oh no let's double check um some type of echo oh okay i see what's going on hold on there we go all right i think i fixed it alright so it sounds like y'all have something like what we call daylight saving time here in the states um i don't know if y'all call it that but yes awesome and thank you gonzalo for telling me about the echo i usually don't catch these things and y'all do and i appreciate it but yeah we had our we had our time change um like last month so for me to get up at 5 30 a.m it was it was um let's see spring forward so i think it was like trying to get up at 4 30 a.m so yeah all right cool well that's cool i always find it interesting like to hear which which places observe and which places don't observe there's places in the states that don't observe it so it's always interesting to find out anyways this is where we we left off last time we were working oh juka's back what's up man thanks for coming back how's your day going i think that yesterday you had mentioned that your day was going pretty pretty good uh yo what's going on how's your week going rio welcome back so my week is going um a little bit stressful there's like a lot to do at work and i'm trying to get that all figured out but it's going pretty good um overall how about you rio how's your week going yeah anytime juka all right let's quit this we're trying to open up the simulator [Music] and anything that i can close i should probably close just because it gets all laggy in the stream oh rio's week is going amazing love to hear it hey i think i'm supposed to be i think i'm supposed to have some posts here aren't i hmm okay we may potentially have a bug yeah we may have a bug why didn't it load the first time okay that's fine as long as it's loading at all is important but it should have loaded the first time um we can we can discuss that so in this video or in this live stream the goal is to get this working so there's technically supposed to be like an image right here but it's not showing because we don't have the actual image so today i have to figure out how to download a remote image in flutter but it has to be cached and i have to do it by a key so lots to learn uh flutter remote image let's start off right there display remote display images from the internet right we could do network right but what we actually need is we need like something custom because i want to be able to pass in a key and then what i want to do is i want to be able to download that image and also cache it so let's see if they give us any information and i wouldn't really expect to get this information out of the flutter docs because like this is like a very custom use case right okay hey by the way about keys oh okay uh got some more info keys actually play a pretty important part keys make flutter apps precisely behaving a preserved state of widgets precisely yesterday i just assumed they were not a big deal oh yeah yeah yeah for sure they are definitely a big deal um but i think like having to interact with keys is like the thing that we were kind of talking about but yeah you're absolutely right and that's awesome that you did your own research just to find out like always recommend doing that so really good job on on finding that and yeah like the keys are for like flutter to know which widgets are changing and to like hang on to a reference of that specific widget and only rebuild the ones that need it and stuff like that so yeah um what's going on limbani i'm going with that name because i could kind of pronounce it a little bit hopefully but welcome back i'm about to start flutter development need your assistance on some development resources and how to set up on mac uh yeah we can probably look at that real quick because we're already here um go over here to the install so you want to go to flutter.dev and then there should be some type of docs uh let's see okay go to flutter.dev you go to docs you go to get started go to install choose mac and then it's gonna walk you through it's it's pretty good documentation actually somebody um i think that you should be able to just kind of follow along here and then it's like um nothing too tricky but yeah feel free to reach out on the discord if you do get stuck feel free to reach out on discord um but i think that this is essentially what you want okay so back to trying to find out how to download these images okay hey it's not going back okay there we go i don't know why it keeps doing this um how to display images from url or networks um a better way to load images from network let's see cached network image i've worked with that that's that does seem to be pretty decent let's see if it supports um like a custom constructor or like custom implementation um let's see i don't think that they're going to show it in the example okay i know what i could look for so what i'll do flutter um remote image firebase storage so firebase storage uses this key system that's very uh that that's also how um amplify storage uses it so we could use a similar approach i just need to find out what they're using right let me see they may have built it themselves i see this yeah this is not necessarily what we want please um get down no no no no no okay so we may have to build something ourselves um okay yeah no problem bonnie um let me think let me think by the way suggestion on flutter channel choice in insta suggestion on flutter channel choice in install release channel oh oh oh oh the channels um you're probably going to want to go with stable if you're going to do it that way but the way that they um they instruct you to do it is uh let's see i think the way that they instruct you to do is just to download this which is the stable the stable version of it and then you can run flutter upgrade like if you do it like this where you download it then you don't have to worry about install like um i don't even know if you can choose the different branches though that's the problem i don't know if you could choose a different branches because it's more like just installing that that specific branch but if you want to have control over that then you would um you would download it from github instead and then you would check out recommended as stable right here but yeah and any handouts like video series resources you would like to recommend um well i'm doing all of this in this 30 days of flutter challenge which is now over 60 days it's taking me quite some time to finish but what i would recommend uh what's going on clean clean swift uh yes what i would recommend is starting off with this hashtag 30 days of flutter and this is kind of assuming that you don't it assumes that you have some knowledge of programming but you don't have any knowledge of flutter other than ju than it just being installed so i think that it's a pretty good starting point you get to build like a bunch of different little projects but i mean that's obviously biased you know i put it out so i think that it's decent so you know you might feel like oh this is poop and then you tell me hey hey kilo this is poop and then i'm like yeah i actually knew that deep down inside so you're right all right let's see so i think that we're going to have to build this um this image thing by ourselves it's kind of interesting that they don't already have they don't already have like something that's built in which is like a very different situation to be in um when you're working with flutter a lot of the times a lot of the stuff is just already built in see even this is interesting because um yeah like they're expecting some type of path to be constructed when usually you just have the key uh the name but yeah if that works that works all right well then i'll just go ahead and make my own um let's go to the repo i'm actually going to reverse engineer this yes i've been into ios development buddy for more than seven years oh well i didn't know that but um so yeah like if if you wanted to if you wanted to get started with flutter uh it starts off kind of slow for somebody that knows how to program um but it does cover like the basics and i think it has some pretty cool projects in there to learn bro i was making your pokedex app and i want to add search bar to it can you help me um if you want to uh if you want to add search there's i guess there's a couple of different ways to do it you could probably hit the api but you could also just do a filter type search but yeah like if you want to join the the discord and if you have questions about it we can go go over it there all right let's go ahead and see how they built this because um yeah let's see how complex it is all right um you have your firebase image cache refresh strategy i want to see this um okay that's a enum cache manager yeah i think that this is probably going to be pretty similar to something that i would implement except they're adding the ability to put files and stuff like that um dang i really don't want to do this myself though look at all that i don't want to deal with that all right let's build it let's build it somebody get somebody gots to build it so let's let's let it be us all right all right let's start off fresh um with the terminal let's update what we've done so far get add commit and then what are we what did we do last time uh add new post functionality so i'm not sure how i want to do this so like what should the api be for this thing right um what up ideally what i would do is let's take a look where am i doing my post feed let me think let me think okay so let's think about what the what the api should be right like i think that's how i usually like to go about it that's like what do what how should i use this thing right and we would have like some type of child and then it would be an image um amplify image right amplify image or actually yeah let's just do an amplified image right now i'll probably build this out and make it a little bit more robust and uh friendly for other implementations but i want to be able to pass in an amplify image i want to be able to have some type of placeholder so that's going to be some type of image [Music] so do image like that right let's just let's just pretend like we could do image like that right and then we would also have um the image key and then it would be like some image key dot jpeg and it would be that that's all i really want to be able to do so i want to do the placeholder i want to pass in an image key and yeah all right so there might be this for flutter get a file from url network to file image okay um network network to file image okay let me look at let me look that up because if i don't have to build this that would be ideal because then if i have to build it then y'all have to build it and that is not cool it's not cool network to file what what does this do this is a mixture of file image network image it will download the image from the url once save it locally to the system and then use it from there in the future um kind of let's see so the problem here is that i don't have this url i can get this url it'd probably be easier to just do it that way but the easiest thing would just to be that use the key and then we don't have to do this weird mapping thing and let me like explain the situation a little bit better because i don't think that i'm doing a good job of explaining it to be honest so let me refresh this let's make sure that we're still signed in we can still see everything and here we go so this is the image key right this is what we're storing in our database right this this this guy right here and then there's also if i open up aws there's also we should already be signed in the actual image key over here in s3 is there a faster way to get to i this realized that i might have to look for it and i don't want to do that there we go could have just done that all right what's going on ned spike hope hope you are able uh able to keep moving forward good job lately you've been you've been working through your problems love it all right so as you can see let's see shouldn't have done that okay so here we go right we have this image key which is stored in our database so this is this is like us looking at our database and then um this is the the actual thing that's being stored not a url right like i don't have the url now if i wanted to use the url if i select this one this one's s this is s3 this is a whole entire different service this is what amplify storage is using under the hood to store your your images your photos your videos things like that if i wanted to get the the url i could get it like this right i could just assume that i have all the information which is like not a best practice it's not um it's not safe and then also like there are like there are authorization rules in place so not every image is going to work like that so as you can see i could get the url but that's like an extra step and if i have a list of posts right if i have a list of objects a list of posts yeah if i wanted to show these three posts in my feed then i would have to either fetch the url for each of those images which i would do by sending in the key let me show that just so that i can explain that as well let's see libraries storage okay so you see look at i would have to get the url with my key and then once i have that url i would be able to display it like any other url but i don't want to do that what's going on javier um so ideally it would be better if i could just pass in a key it does it it will do this operation in the background but after it downloads the the file then what it would do is it would reference that file in the future so um essentially it would be doing the same thing that you had sent to me where it's doing exactly what it's what is explained here right it downloads the the it downloads the image once from that key using that key and then saves it locally saves it locally in the file system and then use it from there so that is the plan um yeah yeah i think that is what we want to do so yeah yeah and i thought there was a way to download just the data but maybe not because that's not really a whole entire concept in flutter so this is what i want to build amplify image so let's go ahead and try to build this out and see if we can do it or not if i can do it i guess y'all are going to be helping me hopefully amplify image dot dart and there's going to be a lot of different concepts that we have to have in here like um well now because it's actually going to be saving it to a file system so might not be as crazy as i think it might be all right let's go ahead and do let's start off by making a class this is going to be a state full widget i think um we won't be using block in here i don't think that might make it a little bit more complicated and then also to have the dependency on block just to do this if we wanted to make it another package would not be good so let's go ahead and call this amplify image extends state full widget and the reason why we're going to have it be a stateful widget is because we are going to actually need to change that image when it finishes downloading so then we have amplify image like that extends state and of our amplified image like that and now we can do this good old create state good old great state like so amplify image state like that like that add the build method to this build method uh it's just called build build there we go and then what do we need when we pass it into the constructor of our amplify image well we would have one widget and a string so we have the placeholder widget um place so let's do [Music] um widget placeholder and string image are let's think it needs to be what an image key image key like that then we update our constructor we'll do this amplify image like this here comes our key remember we were talking about that key earlier then we have this dot placeholder this dot image key we want to also do super pass in that key key do you love me like so now that we have the placeholder and the image key what we need to do is we need to build out this image so the hard part is making sure that it's going to stay the right size um let's see uh do we have some type of ratio no um aspect aspect ratio there we go aspect ratio and this takes in the aspect ratio what is this um it takes in a double so one to one all right so we have an aspect ratio so let's return this and i would assume that aspect ratio has children no child it has child okay and this would be a stack um let me think we may need a size hold on let's go ahead and take a look at that other one cache network image because that will also help us define network image flutter like that because i want to think about like how did they get it to be the same size um image builder see if we could just do hold on what is this image builder cached network image let's see how to use with a placeholder with a progress indicator um [Music] oh hold up what is this cash network image provider oh hold up hold up hold up this might work okay so if we can use this cash network image provider hold on that is pretty juicy hold on i didn't see that cash network image provider yeah hold on i need to find that because you see how so you see how it's taking in this url right here cache network image provider if we can create a custom implementation of this then we'll be gold and sometimes libraries that are more forward thinking we'll do this and that's kind of what i was expecting so let's go ahead and take a look at the repository sounds like it it could act as middleware if we build the actual thingy um yeah it could it definitely could um let's see cached network image something cache network image provider source uh cached network image provider what is this cached oh okay so it is an abstract class um okay let me think cash network image provider i know that we can use this hold on uh currently there are two different ways to show an image on the web with both their own pros and cons so don't care about that an image provider to load images from the network with caching functionality right okay so this is the part that interests me is that it extends this image provider thing creates an object that fetches the image at a given url the argument okay so then let's take a look um what is this hold on so we're passing in all this stuff and then there's a image provider huh i wonder if we could just extend an image provider image provider cache network image provider that's like a really weird thing so like it's an extension on itself what this is weird how does that work um okay hold on let's try something first before we go down this path because if we don't have to we don't have to do everything that is definitely the most ideal okay so let's take a look at this bad boy shall we um okay so i want to extend uh but what's the concrete class see this is the problem this is what's going to drive me crazy this is an abstract class right cash network image provider now where's the concrete class right like where's the actual thing so image provider web io multi-image stream completer maybe it's i o since we want it to just be regular uh class cash network image provider i feel like i'm going crazy um they're using the same name all over the place and this is like kind of bothersome so let's go ahead and try to extend it the way that they did um we may need to do implements but let's go ahead and try to do uh class amplify image provider and this extends image provider um huh sounds like uh oh image provider.load converts a key into an image stream completer and begins fetching the image image provider dot load let me see uh let's see thanks for joining the discord lumbani appreciate that where's the load function i saw it too but i didn't really pay attention to it hold on over here probably uh load um it takes a key and decoder callback image stream completer damn this is confusing me all right i'm going to follow them exactly first and then we'll splinter off so let's go with this um what is this image multi-image stream completer way over my head i think all right let's go ahead and try to implement this first so cache network image provider somehow this implements itself abstract class this extends image provider cached network image provider like that which cache net yeah it just go it just goes ahead and just makes it okay yeah that's uh okay whatever anyways um it looks like we don't need to necessarily extend anything um it doesn't we don't necessarily need to implement anything it just extends this right so then image provider image provider cache network image yeah no problem lemony no problem at all so cache network image provider it okay so then we don't need this because we're not doing anything schmancy oh maybe we do need that okay so then do abstract i don't know we'll do class um concrete image provider extends so this is the concrete class wow it it extends and it implements the same thing what okay extends extends image provider image provider i'm probably not even going to be able to go through with this this is so confusing a cached image provider like that um implements cached like that all right now we just need to find out how image provider dot load image provider dot load is there a fix it can can i get i'll fix it oh okay here we go here we go it's starting to come together maybe we'll see what happens um okay so we have two different things we have obtain key and we have load okay so let's take a look at how this works for them so obtain key synchronous future wow i've never even seen that before uh cached network image provider okay we're going to be flipping back and forth so i need to have a separate tab and that was not it but we'll find it all right cash network image provider and what were we looking for so we were looking for a synchronous future cached network image provider cache what oh man okay let's try let's try to implement it and then see where it gives us a problem i am stumped y'all this is like uh yeah this is like some next level so we are doing that in the obtain key the synchronous future right so let's go ahead and try to do this there we go um what is this i don't know i don't like it but okay uh return same promise future this we'll pass in a cache network image provider like that and that just magically works so i'm gonna leave it right there that works okay cool cool cool all right the next one is um a stream controller and i have no idea what's going on here okay multi-image stream completer oh man this is just like over my head okay so we need to implement or we need to return this right and wow this is uh this is tough chunked events what is that load async so yeah this is way over my head look at work read as bites they're decoding stuff i think i want to i think i wanna give up this is way too much there's no way like okay even if i did learn all this there's no way i'm teaching this to anybody this is like a full a full-on implementation of something that i don't even fully understand all right i think i'm gonna back out i'ma back out of that it was a good try i'm going to go back to a much simpler implement cool cerebral for me anyway [Laughter] yeah same here refix i'm i'm right there with you okay uh this is starting to resemble actually java yeah a lot of similarities um in like the language syntax for sure okay so i think i could i could still accomplish something very similar by myself right um we can keep it super simple and we can use the widgets that are automatically provided to us and that is something that i think that i might be willing to teach depending on the complexity but yeah so what we would do is we'd have some type of placeholder widget right and that should be some type of image we would assume but anyway what we would have is this uh we don't need necessarily need this aspect ratio let's just build it out with the bare minimum and then we'll fix any any bugs that come up as they come up right so we're gonna start off with a stack we're going to go with the children we are going to put the placeholder in the bottom and then um what we need to do is we need to find out uh if we have successfully loaded the image so then we need to like have a load image that um we would have our remote image so let's go ahead and create a function that's going to do that for us we have a widget um image load image like this and let's see i think that if we return null then it's fine so let's see what happens we should be able to just do it load image right here and then if it breaks then i'll and i'll update it um sounds like a plan i was sweating yeah i was sweating too i was like man this is getting way too complex that abstract class almost made me code a punched card a punched card made me code a punched punched card what is that a punched card um okay so let's go ahead and load this image and i'm just gonna start doing um what i could do is i could return a builder context like this and let's see now we need to load the image so let's go ahead and do amplify storage dot um i think we only have the download file available to us we will access the key from this image key so we'll do widget dot image key and the local um let's see let's see let's see uh too old for you really i don't know i feel like i i i would have got it but maybe look like a younger dude in your picture so you you look good for your age at least there's that um all right so we have to download it to a we have to download it to a local file now i need to just figure out like how i want to do that right now it's saying this path i don't know if that's like like actually a real thing so let's go ahead and try that first and i don't think that it is but we can try it yeah i didn't think so well first let's import this right yeah path is not automatically given to us it's not like some magical thing that's just floating out there so what we need to do is we need to create a file path and um a flutter file path um right right file let's see so we want to access a local path we're going to get that local path um got it okay so let's write data to the file read testing okay so let's go ahead and do this find find the correct local path directory path then i think i wonder if i need to okay let's just start off with the simple thing right [Music] we'll throw this in right here like that this application document we need to probably import something like io or something path provider oh man what a bummer all right let's see we need to go to our pubspec dot yaml and where did it go why is docker open that's kind of weird uh path provider [Music] there we go um we'll just do latest save it let's get that stuff oh this picture is like 12 years old oh okay uh check wiki punched card i cannot share links all right uh let me see if i could look up punch card real quick i'm curious now oh yeah i know what this is i mean i just didn't know it was called a punched card i i think in the states we just call it a punch card maybe um i've heard that i didn't know if punched card might be different you know sometimes things are different just depending on little things like an ed on it but yeah i know what that is like uh like you're about to clock into work right all right let's see um let's see path provider like this we returned that do we need to have a new directory so directory dot um uh let's see do we need to add like another directory or if i do if i add a path to the end of it will it automatically work that's the interesting part so um path provider let me think i want to create like a subdirectory right like all my images should be like in this uh in a folder called like cached image right so um way too much going on here but essentially i just want to do a subdirectory let's just do a path provider subdirectory flutter path provider sub directory um okay yeah so i think that they're trying to do what i'm trying to um image directory list uh no no no no no you know what let's just try let's just see what happens and then you know we'll go from there f it fa ff okay let's go ahead and we'll do final path is equal to local path and this is a future string so we have to put async right here maybe let's put async somewhere damn um how do we do this future builder huh all right let's go ahead and try this again future builder goodness oh man context is that correct or is that not correct or what do we need uh snapshot the future itself uh future a local path our yeah local path like that then we have um snapshot should be that path right async dynamic this should be what a string and build context let me see dynamic does that work then okay that does work so it's not it's not so i'm trying to figure out like how the heck do i make this this snapshot the snapshot should be a string because the local path is a string right let's see oh juka thank you you don't have to do that thank you i really appreciate that and the cool pair sign oh yes how's he doing it like that thank you i appreciate that thanks so much made my day awesome uh okay so i'm trying to find this local path but i don't know what this type should be like snapshot snapshot oh this is an async snapshot that's why async snapshot with string like this that's what it is right snapshot snapshot dot has data yeah this is super yeah i'm happy that you're enjoying it i feel i felt like i'm like going kind of slow but like i'm trying to learn this stuff too you know that's the whole entire problem is like i have to learn all this stuff to teach it um but yeah thank you so much always happy when people feel like they're getting some type of value out of these streams they're helpful for somebody uh all right so then i don't need the context async snapshot string that should be fine um what's going on night fury gaming how's your day going uh you know juca just made mine a whole lot better uh okay so if if snapshot dot has data and i forgot my parens okay so else return [Music] no can we do return null i think that should be fine and then um let's also do so now that we have the file path so final path is equal to snapshot dot data this should be a string right the data should be a string there we go um now that we have that path we should be able to do amplify dot storage dot download file we'll pass in the widget dot image key and then the local will be a file with a path then we put it in a subdirectory called cache cached images then we do [Music] in the image key widget dot image key right i think that looks correct to me um yeah this yeah there we go okay so let's say that we're going to be able to put it in this cached images thing like let's say that we're able to just simply create a new directory just by doing a path like that um i kind of doubt it but hey who am i to stop anything but let's go ahead and take a look at what else we need to do so once we have that downloaded we now have the file oh okay we now have the file and then we can create the image from the file got it got it got it all right so final file is equal to this uh we will put the file right here and then what we need to also do oh hemlocka hey kilo sorry i missed your streams i had work to do i'm back though well welcome back that's that's awesome that you're back him luca thanks thanks for coming back uh sounds like you've been busy what have you been working on all right so now that we have that we can also return we can return an image let me see an image from a file and we pass in that file like that there we go and what we want to do is we also want to await and this would have to be async dang still can't do that um how do we do this just projects i had to get done i haven't finished them in months so i decided it was my main opportunity yeah our main priority i have a lot of stuff that i got to do this weekend there's actually going to be a hackathon that i'm going to be joining too so that's going to make it a little bit difficult but hey i'm about it let's see um await so this i assume that it gives us um the results and man let's see how do we do this i could just do this asynchronously i don't necessarily need to return a widget so if i turn this into a void then there's no need to do a future builder and if we just do async like this we would have to get rid of this let's take a look all right so what we're going to do is we're going to drop this whole future builder because it's getting a little bit too complex for my brain and what i want to do is this i'm going to actually just put it in a function and then whenever i get that file back that's when i will essentially that's when i'll decide to update the state final final path is equal to local local path like that we're gonna wait for that then what we'll do is we'll have final file is equal to [Music] um this our file and we have the string which is going to be path then it's going to be cached images then it's going to be uh the image key so [Music] widget dot image key like that then what we need to do is we need to actually save this file up to the state so instead of doing it like this i could wrap it in a set state we'll hang on to a file up here like that and what we can do is we can just do this we can wrap this in a set state like that we can move this up like that then when we we do the load image oh no no no not yet what we have to do is we have to do the the await thing right um final download result is equal to await amplify dot storage dot download file pressing the widget dot image key and then this will be that's why we did that got it the final this this dot file is equal to the file uh file like that then we'll put the file right here and we will also check the download result dot oh it gives us the okay so probably omit one line like this we'll save a line like this and then we'll also make sure that we get the we're only doing it to the result so then what we should be able to do because even if it's null this should actually work i'll do download result dot file like that boom okay i guess i know what i'm doing maybe i don't know it might not even work so i don't know why i said that but it felt good it did feel good okay so now that we will be have we will have saved it to the cached files let's just see if this thing works right um [Music] yeah so if file it's not equal to null then that's when we will do a image.file and we'll pass in the file there we go um in the meantime let's go ahead and strike placeholder from the record and let's see if we could just get the basics working we'll revisit placeholder then later and maybe put a circular circular no circular progress oh let's do a center right center child circular progress indicator like that there we go so then at least we'll be able to see something uh load image when are we calling the load image um [Music] so that's the tricky part right because i don't actually know when to call load image but we can do it in the set state this is not going to be ideal but let's see if we can make everything work this might this might actually work let's find out so we need to go back over to our feed view and post feed right now we have this list title and i don't think that's what i want to do well maybe let's just try to put a title in here and we'll add in our amplify image like that we'll pass in an image key like this we'll just do an empty string for now let me make sure that i have actually we should have the image key i think let me think yeah our state might actually have the image key um oh it's the post the post should have the image key image key let's find out huh no implementation found there i think well that's because we didn't have it in there before i think we might need to do a restart and then let's see what happens oh yes um very nice man you love me i love you uh so how is flutter coming along so far um so i actually like flutter um it's i think it's pretty solid uh it does the job and i like the dart programming language so that's like always a plus right so um yeah like i think that it's pretty good it's just like you know it's like anything else it has its strengths it has its weaknesses and i think that for the most part i've been able to figure a lot of things out relatively quickly so that's been pretty good but i've also been working with flutter for like two years or something like that so you know i do have a little bit of experience with some things and that does obviously help me move along a little bit quicker all right it's still running xcode build and let's see right here okay here we go yeah you know it's running build because the la the stream gets all laggy that's when the stream always gets laggy all right here we go um so we saw something then it just exploded um issues see if there's any issue an expected domain file doesn't exist this should not happen uh okay it just exploded on me hmm let me find out translating platform exception failed um the file doesn't exist yeah it does tell me it doesn't because it does all right so let's see maybe the download options need something before uploading it under public then shouldn't be any problems oh yeah i would like to do a voyage app but i need a server that do some calculation and get me the result what you suggest i know firebase but i don't know how to do an app if i publish the people can't go inside my server um yeah if you're already using firebase then you might be able to get away with their cloud functions depending on what you're trying to do but i don't really understand because the cloud functions are like asynchronous and you can't really get like the result back like there's no end point to the cloud functions they just kind of do do things you know i'm not sure uh it kind of depends on like what the actual functionality is but this could be exploded let's um let me think let me think all right let's go ahead and try to do this in a new view let's go ahead and try to do this but like not in the list and then we'll work from there so widget test load and what are we going to do um i think right now we'll just return we'll return a single amplify store or what is it a image dang how do we do this um amplify image that's what it is amplify image like that the key we can get the key directly and you can do that by just going straight to the source like this so we get this key like that uh image key like that and we'll do [Music] the app bar and then for the body it'll be this test load all right let's reboot it um let's see yes man but if i publish it there is a file that enable the app connect to my firebase server and this could be a problem if someone else can get it or is not possible only for understand but if i publish it um i don't really unders i still don't understand like what do you mean what what are you referring to like what file are you talking about um there should be some type of rules that you're able to set up with firebase where it's like secure let's see okay so we are running into this bug and it's crashing my app and i don't know why alright while we wait i'm gonna plug the discord yet again feel free to join the discord community it's for mobile developers and if you need help that's one good place to go the restart is not working so let's go ahead and stop it all together there we go and we launched this what's going on daniel uh nice tutorial thanks for that i just need to know about debugging in execution time like native ides like xcode or android studio do you know how i can do that in flutter and vs code thanks a lot so i'm not an expert in debugging with android studio or with uh anything that's not xcode essentially but i know that you can set up break points like if you tap over here um i think that's a break point right there so now it should like stop right there um but i'm not actually too familiar with all the different um tools that vs code offers there's also like um something that dart offers and it opens up a whole nother web browser but i'm not like the best person to ask about debug tools especially with vs code okay so this failed let's try this path because i think that that could also be the problem um logcat plug-in i think it's called oh okay logcat is pretty legit okay so this is one that gonzalo recommends and this is kind of funky uh with the animation that just i mean they didn't have to do all that okay yeah this one has 21 000 downloads it looks like it's about three and a half stars um probably be helpful but logcat is just logging stuff right so you get probably more verbose logs but yeah that's one way to go okay so app blew up again and i'm not really sure why it's saying like the the file doesn't exist i'm i'm wondering i'm wondering if it's because i'm doing that path and that's causing it to like explode so now if we do it like this right which is what is recommended in the docs do we still get that error download.png right and then i would have to uh then i would have to figure out like how do i create that other path that i'm actually interested in like how do i create a direct a subdirectory inside of this directory right let's just get one thing working at a time so here we go oh okay so it works okay so the problem was the download path now what i want to do is because i want to be able to put a sub path in here let's see what happens when i switch this back in our feed view do wow all right so then we have what is it called post feed okay okay all right so so that's one problem right like it's constantly loading the image we don't want that but it is doing the thing that we want it to do so a couple of things going on here and let me take a look at this where's our caption our caption is there cool it's working uh robert what's going on kilo the man the myth the legend i'm just i'm just a i'm just a dude working in his office i am not a i'm not a myth or a legend i am a man though i'm a man a little off topic if i want to start learning ios what do you recommend to start with swift ui or ui kit um okay so robert loaded question the entire community debates over this you know they couldn't decide whether they wanted to fight about um you know storyboards or um you know doing stuff programmatically so then they were like hey let's create another thing that we can fight about and we'll have so much fun because now there will be like three different ways to do it and everybody's going to be confused and it's going to be awesome so then they created swift ui so then they were like hey let's fight about it and now everybody's trying to find out hey should i go with swift ui or should i go with ui kit so it really comes down to what are you trying to accomplish right so if you're looking to get a job if you're looking to get employed at a company um i would say medium too large let's see all right first it depends on where you're coming from do do you already know how to program right do you already know how to code in some other language or with swift or whatever right do you know how to code if you know how to code then that kind of also influences my decision on which which way to send you but essentially if you know how to code then you can feel free to i would say feel free to learn swift ui um but also let me back up okay are you looking to get a job if you're looking to get a job at a medium to large size company go with uikit if you are looking to be like um either self-employed freelancing or you're looking to start at a smaller company then you could probably just learn swift ui and that's perfectly fine too um swift ui still heavily depends on ui kit you're not going to be able to get be able to get around learning uh you know ui kit but yeah if you if you really want to go down the swift ui route i don't think that there's any problems doing it i think that you'll have a better chance at getting hired as an employee at a medium to larger company if you have stronger foundation or stronger knowledge in ui kit as opposed to swift ui so i already know how to code oh okay so then yeah you're definitely free if you're just starting out then i would i would highly recommend like even higher recommend ui kit because imperative programming i think is a better foundation to have than to start off your career with a foundation in declarative programming if that makes sense but i don't know anything about ios development right now but yeah like if you want i'm going to plug the discord again but if you want join the discord feel free to ask any more questions and i'd be happy to to point you in a direction but it really depends on where where you're trying to go if you're trying to get hired medium to large company ui kit you're just gonna need to know it um your ui kit's gonna be relevant for at least the next five years um swift ui is definitely becoming much more popular but i also even have uh this this poll up and you can kind of see what the community is saying too so if you take a look at this poll i asked uh like two days ago which frameworks are you actively using for native ios development ui kit like half of the people almost half yeah half of the people because like 7.8 are just looking for results uh half of the people are using ui kit right more than half because they're using both and then swift just swift ui by itself is like maybe like a quarter of the population or something like that but a lot of people are still using the ui kit but i'm not trying to discourage you from learning swift ui either so yeah at the end of the day learn the thing that's going to make you the happiest because um you know there's probably going to be job opportunities for almost everything uh coding related almost right almost everything but um yeah like just do whatever makes you the happiest if you have already a bias towards wanting to learn swift ui even though i'm telling you to learn ui kit learn swift ui don't don't let anybody tell you what to do it's your life you you're the one that gets to live it right so yeah okay so now we got that done right and if anybody else has a question feel free to ask that's why we do these live streams so that you know i can code in front of you you tell me when i mess up which has been actually y'all have helped me a couple of times and i really appreciate it and then i'm also here to answer questions so it's always like an ama format ask me anything just so you know all right so then uh what we can also do is if you know file not equal or is equal to null we could do something like that and then we could let's see because this wasn't working exactly as i imagined it we could probably just do that let's see what that looks like so we do or restart there we go all right so now we have this going um so what i would want to do so that we're not constantly loading right is i would want to because every time that we do that watch i want to show you something i want to show you how many times we're actually downloading this image print downloaded image let's do this again get the restart all right so so far we have three downloaded images right here right now when i go back up we have another downloaded image i don't know if y'all can see that it's like it's right there and this is weird it's like i'm a new i'm a weather caster this is weird right there um oh man uh you're already coding in react native what your first impressions what do you prefer flutter or react native so many questions um so daniel i actually don't like javascript so i don't do react native um i've heard great things there's a huge job market for it but i just i've had a lot of bad experiences with uh javascript and i just don't like that language sorry uh but yeah that's a great it's a great uh you know millions of well not millions but there's a bunch of javascript jobs out there there's a bunch of react native jobs out there if you're looking to get hired react native is probably um a much more lucrative job market but i personally prefer flutter um for happiness reasons okay so now what we want to do is we want to like cash we want to cash right so um let's go ahead and whoa let's go ahead and check uh what we need to do is um we need to get the downloaded file so that's going to be um what a is it well let's just return some type of future right dynamic for right now and then um we will get back a get saved file and we'll have the path which will be a string and now what we need to do is we need to figure out how path provider works when we're trying to get a file let's see path provider i was just on it i don't know why i missed it okay so now sharon um get applications directory yes uh what else can we do with this though i need a little bit extra information um let's see i want to get a file back okay flutter is a good choice for a raspberry pi desktop app not too large thanks um interesting actually flutter is a good choice for a raspberry pi desktop app not too large actually maybe huh never thought about that so i'm kind of curious now this is why i love asking y'all questions because y'all somebody was just telling me not too long ago about um what were they doing oh man i wrote it down i wrote it down to my notes somewhere but yeah it was like um it was like something with python but yeah like this is really cool uh does flutter work on tv os oh i don't think so i never even thought about tv os no i would not i would not think that it works for tv os but let's go ahead and take a look at this download size i think that you could actually do flutter development on a raspberry pi i think the problem with doing it on a raspberry pi is the limited ram right you're only gonna get like four gigs of ram and you would need to also be able to run the emulator but flutter also supports web so you could just do flutter websites yeah that's a really interesting um really interesting question i'm curious now so get started install so there's a linux version right and the disk space is 600 megabytes does not include disk space for ide tool interesting okay so as you can see um 600 megabytes so if you wanted to put it on a raspberry pi let's see flutter test command provide a message package it says ubuntu i don't know if raspbian is close enough to ubuntu to do it check it out i would actually be super interested if you could get back to me on that theo if you end up doing it let me know i would love to hear that that would be that's really interesting what is the best library in flutter for state management block or get x i think the more popular one is block right now um but there is no best right like that's the whole entire thing about programming is that there's a bunch of options and there's a bunch of different ways to solve a problem and um you know you it just depends on the developer and how they choose to solve that problem so if you feel more comfortable with get x then use get x there's nothing wrong with it i don't think that not that i know of i haven't done much research with get x so just you know that keep that in mind but i know that block has been around for a while i know that larger applications are using it i've heard that it scales really well and it can be relatively easy if you kind of follow the videos that i try to teach it as opposed to necessarily jumping into the docs because the docs do make it kind of hard uh what's going on winston hope you are doing well today i am doing great i'm doing awesome how are you doing how's everybody in the chat doing like y'all showing me some love i'm loving the questions um keep them coming feel free to keep them coming if you have a question next what we want to do is we want to get this saved file so now i suppose i suppose this would be a get get saved file and we will get this essentially [Music] oh poop i have a meeting oh man all right i have a meeting time flew today i'm gonna plug the discord chat one more time if you have any more questions feel free to ask them in there i wasn't paying attention to uh i wasn't paying attention to the time so um i got interrupted right here lots of great stuff we're gonna pick up tomorrow um i do this i do these live streams monday through thursday and i do it for about an hour and 45 minutes so if you do an hour 45 minutes minus the time that you have right now that's when i'm gonna be on tomorrow so thanks for for you all joining the stream today go out there and keep going passionately

Channel: Kilo Loco

Views: 1,317

Keywords:

Id: WPhfsCSSM7k

Length: 97min 13sec (5833 seconds)

Published: Wed Apr 07 2021