Flutter: New Post UI for Social Media App

hold on discard okay so this is connected right it's not connected let's see all right can can you guys hear me it looks like you might be able to hear me rio saved the day if you can hear me just know that rio saved the day if not rio has yet to save the day but rio is responsible for saving the day yes rio did it only problem is that i can't really see these comments oh no all right okay now and i can see the comments i don't know there was like all kinds of things going on okay so what i was saying in sean jay sorry if i've mispronounced your name i'm always gonna apologize if i can't read your name i'm sorry uh but uh sean jay says hi rio freaking won the day he saved us we're here billy where you can hear me now so that's awesome what i was saying was that i had an alright weekend it was my daughter's birthday on uh well it was my daughter's birthday on like thursday but we celebrated on saturday i had a little party that was pretty cool really liked it um and that was awesome then on sunday we had easter plans um and we're supposed to go to my parents house but something came up um so we ended up not going but everything turned out all right so all is all as well and i was saying like i had a pretty all right i had a pretty alright um i had a pretty alright weekend how did you all like how was your weekend did you have a good weekend i'm hoping that you all had a good weekend i actually have not really even touched my computer since um since friday um thanks scaler or sclera sorry i'm illiterate uh oh thanks rio yeah uh it was my daughter's birthday on last thursday and um yeah she received a lot of birthday wishes so thank you again for the birthday wishes and thank you dennis are you sitting or standing up i'm standing i don't i don't know how's to show that i'm standing every time somebody asked me that like i one time i jumped but like that doesn't really show that i'm standing i am standing up i could go all the way playing cod warzone um i was playing cod but not warzone um i also bought like um a elgato thing to stream but it's not working so i have to like figure that out but yeah i was playing a little bit um here and there i play like probably like an hour i try to get an hour in whenever i can um man we have so many unsaved changes isn't that so bad i'm supposed to be doing you know best practices and all these things in front of you right oh gosh all right looks like we added uh feed stuff all right so rio says i have touched my computer but my computer didn't respond yikes that's scary uh what do you think about get x and why do you use block instead of get x so i haven't tried get x um i helped somebody that was using it looks interesting um most of this stuff is pretty much the same uh pretty much the same like idea but i haven't tried it i haven't done i haven't done any research on get x but the reason why i chose block was because it seemed like i've been hearing about block for several years now like um you know i kind of started touching flutter when it uh when it came out like uh version 1.0 and even then they were like talking about block i think and it's been around for a while i know that it's supposed to scale really well for large projects and also when um andrea coding with andrea the the he he like really knows his flutter stuff um he did a poll and i saw that a lot of people are still using um block so it was either i was either gonna choose block or river pod so i went with block you should try it's much easier than block i think block is over is like over typing actually block can be as simple as you need it to be and i kind of demonstrated that in a video uh where i talk about blocking qubit it can be really easy to do it's the problem is is that people don't teach it in an easy to use way and um it's actually it actually can be pretty easy but yeah i'm definitely going to check it out eventually hello from brazil bro thank you for coming in in uh chucky that's kind of an interesting avatar i like it though yo kilo how are you and how is your day going today is going all right you know i woke up to dms in the in the discord um you know uh people need help so that's that's what i'm here to do i'm here to help you out um plug my discord right here but yeah i think i helped that person and i was able to um get them going and um you know it's it's really interesting because like that's like that's that's my job right it's like to help y'all be able to be successful and what's going on like music from india indonesia what's going on um yeah it's just like i woke up and when i'm able to help somebody out like right off like kick off my day with helping somebody out like the day already wasn't wasted right because i saved somebody like some time you know they probably would have figured it out eventually but maybe i saved them like an hour or maybe a couple hours who knows and i also left off my weekend that way as well like on friday i was able to um help somebody out like one of my friends she was like in in a bind with her code and um you know i was able to help her out too so that was like pretty cool um there's probably a couple more things that we need to do there but yeah good stuff it's always nice when i can help somebody out just knowing that i save them a little bit of time because that's the whole entire point of what i do is like you know i don't want to be the only one that's doing well or successful or something like that i want to be able to help y'all be successful too coding changed my life let's change everybody else's life too oh gonzalo's back uh what's up man and hi all to the chat gonzalo the real one came back i love all my peeps that come back you know that's that's loyalty loyalty and i treat loyalty like royalty oh i have to drop some bars on all right let's kick let's kick this simulator off shall we oh with the shades coming in looking real cool i like it all right do we have our simulator up and running my vs code like decided to disappear so now i had to re-add it back into the doc which is kind of weird if i have time between job and watch you i will come back every time oh making me feel special thank you well i appreciate you being here gonzalo all right let's go ahead and run the simulator already let's go let's go let's go shall we all right so we already got that new post view right but i couldn't decide on what it's supposed to look like kilo can you show what you have made in this project till now um i kind of can let's see where is my simulator there we go actually you know what we haven't even added a logout button have we actually we have in the profile because the profile should be shown our logout button because it is us and that's one of the things that we covered so it's just like a really basic simple simple social media app i've been working on this for way too long it should have been out a long time ago but i've been super busy with work and i just can't seem to finish it but what we are doing right now is we're working on the social feed because we already got we got the authentication flow right you're able to sign up log in things like that once you sign in you should be able to have two different tabs you know you have you know the the home feed and then you have the profile and then the profile just shows the information about yourself and then obviously you can update your profile see this is what we have so far bam profile goes here oh but we don't have we don't have all the stuff in here okay so that's that's a bug that we need to fix but i need to be able to log out and then be able to go back but yeah this is um what we have so far and not much else hi kilo loco is there any issue with flutter 2.0.3 since you are still on 2.0 nope just don't always update i mean you know uh i only get the the the notification that you need to update whenever i run something from the terminal like flood or something and i don't usually run flutter things from the terminal so i don't catch all the latest updates but no i'm sure that there's everything's probably better on 2.0.3 uh can you teach other storage can you teach other storage and let me storage and other firebase stuff how to use uh probably won't be touching firebase too much um i know that there's a lot of content out there but like i work for aws and amplify and like there's still a lot of stuff that i haven't even covered there so i probably will cover something with firebase in the future um but first i need to like get all the content out with us with um amplify first but yeah um do you have a video about how the flutter file structure no um i actually don't really have a file structure that's really well like as you can see here look at all these oh look at that look at all this like if you're if you're saying like oh do i have a recommended way of like making your file structure better i don't right i just try to group things that are you know related together and then like right now i'm in the session right we're signed in so we're in session and i'm working on the feed part so then i go right here and the feed and then we just have all this stuff so um oh you guys can barely see what i'm even referring to but like i don't really have like a whole lot going on with files um you could i could put out a video but there's a million different ways that you could put your files and no one way is going to be right oh thanks for trying out uh amplify gonzalo um if y'all wanna learn more about amplify here's a link uh it's where i'm at all the time so you know if you actually need help then i can actually probably jump on a call and help you i've done it before i'm not saying that i will i'm just saying that i've jumped on calls before just to help somebody get unblocked because they couldn't figure something out so if i have time i usually try to do at least one of those a week uh kilo the chat feed is getting overlaid on the file structure yeah don't worry about the file structure it's just like there's nothing special to it like just i just group things together like if it says feed like for example i have a file structure right here so you can see it right so what i was saying is like you see how everything has feed in this folder and just throw it in a in a folder right profile all these things just throw it in a folder i mean that's one way to like group all these things together right like i don't have a specific way of doing it but like if everything's going to be essentially for that specific screen then just put it in a folder and it's a little bit cleaner but yeah i'm not huge on file structures um let's see new post view oh does this even open does it open oh it doesn't even open okay so then we need to go back over to to the feed block probably maybe the feed view and open um new post action button and we're gonna need to display that okay all right uh hello bro i really like your explanations keep it going thank you yeah definitely plan on uh keeping it going we're gonna be covering flutter native ios and native android uh does aws amplify db have string contains string contains functionality oh contains uh okay um [Music] i think so it has it has a search but i think i'd actually have to look it up i haven't i've been done that before i don't know if it has um have to look it up yeah let's find out together so usually i recommend starting out with datastore but let's see when we want to manipulate data um yeah string contains so you would do it like let's see if they even have an example all right let me show you because it decided to close on me where is my data repo there it is okay so if we wanted to do like a query on a post um let's see can we add where in here uh query predicate oh no not query predicate uh it's where uh let's see we want to get a post and let's just say the caption dot contains some string like that so you do it like that so that's i guess it does have it i haven't used it but yeah i guess it does have it that's pretty cool which one do you prefer when you're separating a widget pudding it a stateless widget or a function that returns a widget or putting um yeah like i don't really understand i don't really understand why why some people do um have like the separate widgets like because what i would normally see so to answer your question who is it that asks that sclere to answer your question i prefer to just do the function right that returns the widget that's how i prefer to do it there's no problem with creating a completely separate stateless widget right but i just don't see what like what what the benefit is because you can do all the same things and if you're gonna just like have it be prefixed with the underscore so that it's private to this file anyways like i don't i don't understand like where the benefit is maybe that you're like not one layer nested but i think you could go either way um yeah like i don't i don't know i just prefer the function because it's like functionality that's specifically to this feed view creating another object i don't know just seems like a lot of i think there's even more boilerplate that you have to add in there too you know you have to have the build and everything so yeah i just feel like it might be a little bit extra who knows okay let's go ahead and get our bottom our bottom sheet showing right whenever we tap this button it should you know come up um and actually it's not even a bottom sheet it's a modal right widget um show show new post view and we could just put it right here like that and let's see and this is actually not going to return a widget it's going to be a function so then we have to find out how to do show um let's see show model bottom sheet i think we could probably do it like no do we want to do a model bottom sheet i don't know show modal probably probably just show model letter show modal right show dialogue no that's not what we want so then maybe we should just go to the next screen which would mean that where are we in our session navigator no in our app navigator session navigation bar session navigation bar okay and then we would need to have like a feed um like some type of navigation so home home and we'll just do a feed navigation effort f at feed navigation i've read some flutter docs and i see that they're using the three ways everywhere i don't know which one should we prefer for what so whatever okay wait i didn't know i don't know what the third way that you're referring to is claire hold on okay which one do you prefer when you're separating a widget putting it a stateless widget or a function that returns a widget or putting widget to a variable oh i didn't think about that um okay that's an interesting question yeah so unfortunately what happens at like bigger companies and what happens in here is like when you have a lot of diff when you have a lot of people writing documentation everybody has like a preferred style so that's what you're seeing probably happening in the docs i actually don't read the docs unless i'm looking for a specific a specific thing and i don't like pay attention to that stuff so but like what you said is like a really good point so you actually see it in a variable too and i'll tell you why i won't do it in the variable um so you could probably do it like this this is what you're seeing widget get um i don't know uh other widget i'll just do some some widget and then you have this like return container something like that right so this is fine right like you could do it like this but like i feel like it doesn't it's not consistent with what you're doing right so like if i wanted if i wanted this sum widget to be you know the title then i would put some widget right here which that will work but the problem is is that it's it's missing like the call right like every everywhere that you go when you create like a new object a child object you have like the constructor or the call or whatever you want to call it but like you have those parentheses everywhere so that's one reason why i would not do it this way it's just like the inconsistency within the syntax i wouldn't do it like that um the other ways like i said should be fine at least they're consistent because you're still doing the the parentheses the variable method it'll work it's just like it's inconsistent though you know that's the only reason why i would say like meh i don't really like that there are many important companies migrating their apps to flutter like newbank and ifood has the phenomenon started to happen in your country um you know i don't really keep tabs on the job market for flutter but i know that it's growing um who did i hear is using it i know that a lot of car companies are actually using it so i don't know if they're using it for their dashboard in their cars or if they're using it for just the apps but i know that car companies are starting to pick up on it it seems like those those are the companies that like to pick it up the most uh feed navigate navigation [Music] extends stateless and we need a build method like so um oh in brazil that's where it's happening yeah like i don't know i haven't like i said i haven't really um kept track of everything but i know that you know flutter is growing for sure allergies even flutter developers don't know which one is the best that's why they use that three ways yeah just like state management widget separation should have a debate yeah i mean that's the funny thing about being a developer is like you can develop you can debate like everything everybody believes their way is right everybody has a like you know their own way of thinking including me right like i just said like oh i don't i don't like that way but it doesn't mean that it's wrong it's just like that's why i wouldn't use it is because i feel like it's inconsistent right like but for somebody like it makes total sense and there's nothing wrong with that route results route did pop result all right uh yeah the debate as a developer it's like people think that debating is like part of their job title i mean i guess it kind of is right like you you you're looking for the most optimal solution but it's just funny people will talk about and debate the languages people will talk about on debate like i don't know anything it's funny frameworks stuff like that all right we're gonna have two material pages whoopsies all right come on container for right now because i can't think material page container and all right so then what we'll want to do is the first one will be the feed view view like so the second one will be new post view like so it seems about right we can go back over to our session navigation bar and we can drop this bad boy in there into the widgets feed navigation oh by the way do you have a video about the dart language i actually don't i'm curious like so like i don't generally like those videos you know videos about just the language by itself but like a lot of people seem to find them very like attractive in a way i guess um like they tend to do really well and i was just thinking like well i don't like that type of thing but that doesn't mean that other people don't like that type of thing so i'm like curious like what would you want to see in like a video just like it would have to be one video right and it's probably gonna be like 10 minutes so like what what would you want to see in a video about dart like i'm just kind of curious is it just like how to do all the basics here's how you create a variable a constant final here's how you would do uh i don't know create a function um here's cool cool things cascade you know control flow things like that kind of curious glare what you mean skills i can debate very hard that i can change your mind yeah debate about being able to change your mind what's going on uday coming back for some more thank you again welcome back like i said i love when y'all come back makes me feel warm inside it makes me feel like i'm doing something i feel special all right so let's let's go back okay well let's first save this oh might have blown up did it blow up it did blow up look at that all right so what we need to do is jump over here and the reason why it's blowing up is because this is not ready yet okay so then what we need to do is also have um a feed navigation block cubit feed navigation qubit yeah new file feed navigation well that's not how you spell navigation navigation [Music] cubit dot dart all right so in our feed navigation cube i don't know why i can't spell today oh my god what happened to my fingers you don't touch the keyboard in like three days and what happens you don't even know how to type anymore okay so we need um what type of state is this going to be um we could create a we could create a state right phenom feed navigation state and then we have what is it what do we have we have case is it case let's see so we have the um feed and we have new post and yeah yeah okay whatever all right feed navigation state like that then we do our we do our constructor feed navigation qubit like this super feed navigation state and it's going to be the feed like that there we go um but every hr asks some dumb questions that almost no one uses like reversing a binary tree in dart while flutter ui shows login screen who's asking you to reverse a binary tree in dart oh man okay so i had like i had talked about this on a podcast and then i also had like a tweet that preceded that podcast too and what i was saying is like the the industry the entire tech industry and its its technical interview is super broken right because they want you to like know how to reverse a binary tree like when are you ever going to do that but they want you to be able to do this by memory like who who's memorizing these things nobody no i know who the people that are trying to get a job and that's it like the people that work at the company are not they don't know how to reverse the binary trade i can almost guarantee it anyways what i was saying is like in an interview you should be able to go on to google or whatever search engine stack overflow if you want me to reverse a binary tree you better believe that the first thing that i write on on the top of my code editor is going to be an import statement because i'm about to import some type of binary tree framework to do that because i'm not about to rewrite something that's been rewritten a million times and then i'm going to make a mistake and then mess it up and that's how you know i'm the one right for the job as opposed to trying to do it from memory like an idiot only an idiot would try to do something for memory like that because who you're gonna you're just gonna you're gonna make a mistake that's all there is to it you're going to make a mistake why would you make a mistake and then your your app's gonna have bugs so instead of being an idiot thinking that you know it all which is a terrible thing right nobody wants a know-it-all on their team go with the person that hey they realize hey i don't have this in my in my head which you shouldn't i'm going to go to google and find the best working solution and hey guess what that's the best thing to do because the thing that you import has been you know tested by thousands of other developers or whatever the number is and i bet you that they're not going to make the same mistake that you probably would have made by just doing it off the top of your head in such a short time so you take that to the to the interviewer and you tell them to shove it navigation 2.0 you better believe it do you use abstract class or implements keyword or typedef keyword are these really important to learn oh okay so like those are the things that you would want to learn um no problems claire um yeah like if you wanted to learn those concepts like abstract class or implements and type definite oh man um yeah these are three different things so implements i actually i've actually only used that maybe one yeah i actually don't know how to use implements it's used like with mixins and stuff like that and i actually don't know how to use it off the top of my head see because why would you keep that information in your head when you just do a quick google search right i generally use abstract class um i don't know how you would check because you're gonna get a pro like okay so for example right you're gonna be getting something that's a profile event right with your block so this is the profile situation so we're going to have a block it's going to take a profile event and then i'm able to check it with the is keyword right event is this and this only works because all the events are going to be of type profile block um however if i was if i was to use i don't even know how like it would work with implements i don't know what the difference is so i can't really answer to that but i thought implements was used with mixins and i don't really understand mixins because i only used it once like a long time ago so yeah like i don't know i'd have to look into it and then type def is just type def what is that i forgot what that is too see i don't have all the answers in my head why would you expect me to have all the answers in the interview 45 minute interview with the most optimized solution yeah right all right let's go ahead and implement this cubit so first we're going to do um show feed and that's going to be easy enough right it's just going to be emit um feed navigation and that's going to be feed and then [Music] why are you complaining oh because i don't have the little parentheses like that there we go show new post emit and feed navigation state new post and i just realized that we're gonna need to have a profile as well so profile void show profile for user and then this is going to be i don't know if i'm going to be passing the user the id so i'll just put a a user id right here just for now and this will implement a pro emit feed navigation state profile like that oops okay so now the fact that we need to pass in some type of user id shows that we can't use it enum so this is one thing that i really like about swift right with swift you can have an associated type with your enum phenomenal especially for cases like this so in a place where i might need the user id i could just pass in user id right here and i'd be like it'd be like something like this and this is really awesome because then you're able to pass an argument whenever you pass it in here and then what you would do is like you just do it like this or actually this would just be a string i think like that and then what you're able to do right here is you'd pass user id right here so then when you're actually observing these different these different states you can still access the user id now that's one of the coolest things about swift is their ability how they handle enums you want to do the same thing in dart or most programming languages then that's when you start needing to use abstract class and feed navigation state here we go and we'll have a class and the first one is feed extends the navigation state like that we have new post extends feed navigation state like that and then finally we have the one that actually forced us to have this which is the profile extends feed navigation state like that this one actually has an argument which is going to be a string so final string user id maybe might be a user may need to change that we'll find out and from here we need a construction constructor so profile um profile that this dot user id like that um so that means that they're not that important the only important is that if it's works don't touch it yeah i say if it works then it works i mean obviously you want to figure out what the difference is and how you can optimize things right but yeah like that's kind of my thought all right so at least these are smaller names now and here we go profile user id user id there we go you missed the g letter on the abstract class you wrote viewed on the on the abstract class i don't think we need a g right feed navigation state feed new post profile i think we're okay sclera are you are you trolling me can't tell all right so now we should have a block builder return block builder oh actually we need a provider damn so we can actually let's see where should we do the provider we could just do the provider here it's fine block provider oh divide her like create context and it's going to create our block uh our navigation feed our feed navigation cubit like that there we go grab that be like wow like that like that and that and that and save it and then wrap this in the block builder refactor put it in here block builder feed navigation cubit bead navigation state and then this will be state like that save it does this little refactor thing right and what we can do is the feed will be the base so then let me think um should always it should always be showing the feed and then after that is going to show how did i do this let's go ahead and take a look at our auth navigator how do we do the cascade we have it directly all right or the spread operator like this like that like that works boom so now we're always going to show the feed and then [Music] we're only going to show this so if if a state let's see if state is new post then do that and if state is let's see profile material page and we'll do the profile view like that and then we'll also put right here if state is profile how do we do this i wonder if i could do this is equal to false there we go all right okay wait what did i miss you're saying that i didn't catch anything or i didn't catch that he didn't cut that you missed the g letter on the abstract class you wrote i'm confused what are you talking about all right what's the difference between equal and is are they the same thing so it's similar but it's not the same thing um and first of all equal the the equal that you have that is an assignment operator that means that you're setting the value to something right a single equals is a is the assignment operator right so then the more the the more logical question is what's the difference between is and double equal right and they're kind of the same like they're still kind of the the ideology behind it is very similar but they're not the same thing right and the reason why they're not the same is because like you have state is it's asking is this of a type of profile right whereas state is an instance of something and profile is a class right so we're asking is this state of type profile right now the state is an actual instance of something which means that it has character object or it has like character it has characteristics about it and it has like an actual like memory address and things like that and this profile is just a type of thing right so the difference between is and the double equals is like saying we're asking is this state is it um profile is it of type profile which it isn't which it shouldn't be right and um or like okay is it a profile and then this would be false so then it's essentially saying is false equal to false or is true equal to false you you know and that's when it's going to um essentially run the logic in here so that wasn't like a good explanation but essentially you're asking is it of type this and that's going to be true or false and the the double equals is checking are the two values the same so is like this is going to either result in true or false and then that's when it's going to be checking are those values the same as this so yeah yeah this is not more readable um i know that it's not more readable but i felt like you could you couldn't do it anyway so it doesn't really matter but yeah i generally don't like doing the um the bang expression the prefix with a with a bang because i yeah i feel like it's not readable it's something that i gloss over to so yeah please make video on back end also ui is easy part we need to understand the dirty part of the back end well i mean it is kind of covering the back end because i'm not focusing on ui i'm focusing on actually getting implementation working and i'm using amplify to do that so if you want to take a look at how the back end is set up you would have to go to like the repositories and how i interact with it which this feed do we even have oh well we need the data repository which let's find that data data repository like that so i set up my backend um with amplify but yeah i mean i'm not just making ui because i don't actually enjoy making ui i enjoy doing like logic stuff uh put that check in parentheses and then put yeah yeah but then that looks really ugly and looks like i'm i don't know coding in some pascal or something like that yeah i could do this right but boy is that nasty so this is actually a little bit more readable state is profile equal to false then do that all right so if we save this we go back over here everything looks gravy we're loving it now when i hit my button what i want to do is i want to open up this screen which means we need to add this new post state and we have the block provider up here when we open up that feed navigation so what will happen is we should be able to access it from our feed view and it should be as simple you know watch out for when they say it should be simple it ain't gonna be simple um block or no hold on uh let's see let's see let's see yeah we're going to need to return a we do the block builder return i suppose we could just get the context right context g all right um context dot read um what was it called feed navigation cubit and then we are going to show new post like kablam yep that should work context like so save it we tap on it bam it changes uh let's see can you write back in in python and use flutter to call the endpoints um probably not gonna do that i don't enjoy flutter i don't enjoy python enough to actually want to learn how to do a back end if i was going to show you how to write your own back end it would probably it would probably be in swift maybe you're in kotlin or dart but definitely not going to be in python sorry i haven't seen anyone you who uses cooper's tino theme everyone uses material theme um i used it over here [Music] i mean it's just like a lot of work like why would you want to have so many different widgets in your ui like i think you should only be using cupertino when it makes sense and i actually used it in a spot where it made sense so over here when you show your your bottom sheet in your profile i'll go back over here and oh of course i'm not signed in so but anyways like when you try to edit your profile it shows like a action sheet right and what it would do is it would um it would show the action sheet ui based off of what platform it is and you can see right here that i'm using like the platform is ios in which case i'm using the the cupertino modal pop-up and that's when i'm using the cupertino action sheet but everywhere else everywhere else is just going to have a regular bottom action sheet but yeah like i only use cupertino like i would only use cupertino on the spots where it makes sense but i actually do like the way that um all the all the design looks like with material like the shadows and the floating action buttons and stuff like that um oh we have a couple of people joining the chat uh should i follow should i follow the following sequence the develop to develop any flutter application the data layer business layer the presentation layer follow whatever you want honestly um i think people spend too much time dealing with like what what architecture to use and like they don't actually build stuff so i would say just choose something and start building something um what's going on ahmet and i know i butchered that i'm so sorry but hello uh you you could use is bang rather than couldn't you i don't know i've never even heard of that that'd be interesting where did i put that that would be interesting to say the least i feel like that would not vibrate in my brain but let's find out looks like it might i've never seen this is i actually don't like this because the exclamation point in swift and now i think even in dart but also in kotlin um the exclamation point is like force and wrapping so like that doesn't that's like when you're dealing with like an optional value like a nullable uh yeah like an optional value i think it's still or a nullable value whatever you want to call it and then you want to say like i guarantee that there's a value here and that's when you use the exclamation point if anything it should have been this right like like is but like i don't know that's cool that you can do that but i don't like it personally i feel like it's not along the same lines of consistency with the whole entire use of the bang operation to negate to negate something but that's really cool thanks mohammed for showing me that um what's going on coder uh i am trying to learn flutter and i take udemy course for for dr angela yeah um i heard that she does some really great stuff everyone uses material theme but they're changing but they're changing the theme they're making a unique theme that both android and ios can use uh let's see let's see then you watch kilauka's video uh don't you kill her then you watch killa looks yeah um you know the the hashtag 30 days of flutter you know series is assuming that you have like very basic programming knowledge but no knowledge of flutter itself so you can always watch that and probably get some some more tips and learn a couple of things inside of there too alright so we got this going right um now we just need to make it look snazzy so how did i want to do this um i think i want to have like a giant picture in the middle or some this is where i got stuck last time and i can't seem to find let's see a new post view all right so we have the text field we don't necessarily want the text field right at the top what we actually want and let's also put this in a safe area alright so widget um this is going to be my new post page and turn a column children and what kind of children do we want in here so we probably need to have like an image right here and then like a caption right here and then a post button right there so let's go ahead and see if we can get a sized box right um size box height is going to be i don't know what let's just say 300. and then the child of the size box is going to be an icon or it's going to be a center center icon per child icon icons oh man i missed it icons and then um picture a photo there we go [Music] there we go so that should put this well let's let's go and replace it shall we new post page there we go i wonder can we stretch out the icon it should be pretty big anyway oh and size box does it you can't have a color on it right yeah you can't have a color on it that's fine and then down here we need to have a text field um it's going to be a multi-line text field let's see um what's going on dua uh while you're making an app do you make one more layout for the tablets you can change icon size an icon size oh okay but i want it to be like a flexible icon size do you make one more layout for the tablets no right now i'm just focusing on on like the phone sizes i guess uh you can put size on the icon property type size while you're in the icon like that let's see but i want it to be like stretched like uh i wanted to like fill the entire the entire thing you know what i mean like i want it to be like all the way over here right but that'll work for right now i guess pretty cool go ahead and go with it classy 250. oh let's see do they have a different one i feel like it should be sharp oh oh almost not photo album they just have photo sharp they do have it oh man see that's why i love flutter oh my god like i was thinking like oh well it's rounded it should be sharp it has a icon called photo sharp like by default isn't that like oh my gosh that's amazing they go through the use cases that are so common and they're like hey you know what we're gonna give this to you and i'm like hey thank you this could actually be a icon button right and then we could do like this this this like that and then we can do on pressed do something uh why does it look like that let's see oh what the heck um yeah sharp is better oh like a banner yeah uh does expanded widget work here let's find out but also i want to use it as a i want to use it as um a button too right so like when i change that like everything started to break um come on are you saved or are you not saved what's going on here are you broken are you saved are you working yeah you're working okay wow that's weird i guess you're not supposed to use a button like that okay so then the alternative would be adding a tap gesture uh gesture tap gesture recognizer like that on what's going on here uh gesture recognizer tap what how do you do this again all right eff it let's just keep going let's go with ui oh my gosh this is just so annoying uh gesture detector that's what it is gesture gesture detector oh my god all the different naming conventions across all the different things sclera coming in for the for the win um on tap oh my oh hi all right let's see yup boom and it works cool uh let's see uh please you make setup tour i don't really uh not really understanding the question uh docs um what's going on uh jaquez uh you should check chat more frequently yeah i should oh my bad uh you you may use inkwell or gesture detector yeah gesture detector seem to work what do you think about the developer who uses vim as a vs as a as a code editor um i think that's pretty hard to do um but like i could totally see the benefit to it right like i use them a little bit like when you're just doing like what do you have to do oh for like the pod for like the pod file right like when i'm doing native ios what i'll do is like like i'll do something like vim pod file and then like i'll go in here and and i'll like change the 13 to or i'll change like the the number to like 13 or something like that or um you know you could jump down to like row 9 or 10 or something like that it's it's pretty cool um i really like them but i haven't learned all the different things and um yeah like using it as a whole editor that's like man like you you're probably really quick because if you're using it as an editor that means that you probably know like all the different commands to be super quick and yeah you could be really quick and vim only thing i don't like about it is that the syntax highlighting is kind of weird when you get it working in there um but yeah like more power to the people replace 250 with uh constraint biggest height kilo it's better in my opinion oh okay where's constraint constraint biggest height is it constraints maybe gonzalo where am i getting the constraints from where do you get yeah where do you get the constraint property oh but it's not a builder sorry my bad oh you're saying like if i was in a builder oh well let's see what happens if i put in a block builder does it also return block builder does that also have constraints uh context state and something right here this yeah um i don't want to put it in like a regular builder i don't feel like it's needed really i will put in a block builder eventually most likely but yeah i need constraint to be defined yeah no worries no worries no worries okay so we got it to this point which is all right it's fine i guess um may make changes along the way most likely will right just make sure that that number is going up right okay so now we can tap on this we can add in a image and then we also need to be able to enter in caption so that's next and let's go ahead and do it like i don't want to do this widget and this will be our image like that and we'll just put all this stuff in here so that we can have it a little bit cleaner and then also like handle the individual state and stuff like that when we get there but yes image so for right now and then now we can have the text field which is going to be widget um caption like that and we'll return a text field like this and the text field is going to have uh lines max lines is null um let's see decoration input decoration dot collapsed like this hint text enter a caption like that all right so we have the caption right here and then we're going to need to have like something that manages all the state within it right um what's going on ready so enter a caption right there and now you received a hundred messages today with restream chat ooh we did it i don't know i don't know why it has this little notification i don't know if you guys can see it uh but yeah pretty cool all right did you try to extract an app bar from scaffold seems hard to do it as long as you don't use a function that returns a app bar i couldn't do putting it in a stateless widget yeah i did that uh sklare uh we did it um yeah i did that where did i do that at where did i do that uh we have the app bar this was on the profile view this is watch i'll show you how to do it cause claire you have been saving my butt today so it only makes sense that i try to help you all right so the little workaround hack thing that i ended up doing was if you try to return the the block builder like the app bar abstraction of the blo uh like as a function and then um you just want to return the widget right because you know stuff like this right so essentially what i had to do was i had to wrap it in a preferred size but the preferred size obviously needs that preferred size so then it needs a um it needs at least the height right that's the whole entire thing and you want to have a dynamic height because you don't know which device you're going to be on so what i did was i created an instance of an app bar just any random app bar got its preferred size got its height and then passed it in right there to the preferred size and then you can have the child be like the the block builder and then be returning the app bar like that so that's kind of um that's kind of what i went with um i don't know if that is you know the way that you want to go but that's one way to make it work or else if you try to follow this whole entire pattern where there's a block builder in each of these functions then you know it breaks right there and i try to find i think i try to look in their documentation and of course they didn't do anything like that so that's like the other thing that was like that's that's why i got so mad about the docs that were in um that were for the the block library is just like it's either let's build a counter or let's do something super phenomenal but like let's use all these other different uh libraries like you know um like equatable or um i don't know like fields like you had to use a whole entire different package just to manage text fields i don't know like i feel like you should just build with your one thing first and then you can show how to implement like different different things later but yeah for the constraints you need this layout builder outside the eye layout builder layout builder outside the icon yeah i don't want to do a layout builder right because like the easiest thing like literally the easiest thing where are we uh new post view like the easiest thing would be to just take in the build context not builder build context right take the context run a media query and then pass that as the size right so then i could do like um i'll just do it right here i guess context or media query of context size with and then like if i save that i think this will work i need to pass in the contacts right here do i not have a contacts um okay we'll pass in the contacts right here build contacts right all this stuff is going to be wrapped so it doesn't really matter but so then well i mean that's still not exactly right but like i could just do something like this right so i don't know like like there's a couple of ways to do it but i just don't i don't think it's that important to like spend that much time on it oh that's probably the problem right and then we'll do right here too i think that there's probably some padding on the icon itself and that's why it doesn't go all the way to the edges but yeah something like that uh let's just leave it might as well leave it we already want we already got this far i'll leave it for right now so enter a caption we also want to have padding on the side so let's let's go ahead and wrap this in a safe area right safe area child like that save it does it not include the sides okay so safe area left let's see edge insets edge minimum edge insets dot um symmetric and we'll say horizontal and we'll do like 20. like that and also like that so now we have that there we go and let's see actually i do want to i want to remove all this sorry keep bouncing back and forth can't make up my mind today sized box center this was 250 i think 250 don't need context here don't need context here there we go all right uh many thanks for the answer that i asked i gotta go keep it up thanks claire thanks for joining really appreciate it why not make it a stateless widget whether you oh you're talking about the functions i just prefer to do functions i asked too he just prefers it this way yeah okay i just think stateless handles the widget lifecycle better and for something like an image it would be better and passing down the context to every other widget can get um yeah so i'm not going to be passing the the context to every single widget what we're going to do is we're going to be having the block builder in each of these widgets so then it's going to be like return block builder like this and then we'll have like the column inside there and stuff like that but i actually gotta run i will catch all of you later if you want to continue the discussion then make sure you check out my discord and if you have any additional questions you can ask them there but feel free to join the the community ask your questions or if you can i'd really appreciate it help out somebody there i wake up i check that thing every morning i'm probably going to check it right now um and it's just like a really cool place for mobile developers uh to hang out that those of you that like you know native ios native android and flutter it's a place for you so feel free to check out the discord i'm going to take off right now thanks for your time go out there keep coding passionately foreign

Channel: Kilo Loco

Views: 1,427

Keywords:

Id: Rgw8k6MuEuY

Length: 89min 26sec (5366 seconds)

Published: Mon Apr 05 2021