Flutter Chat UI Tutorial | Apps From Scratch

hey everyone this is Marcus Inge welcome to a new highly requested series on my channel called apps from scratch where I show you how to build apps from the ground up in today's video we're going to be building out the UI of this awesome chat app I found on dribble I chose it because it has a unique design and looks like a lot of fun to build it also has a variety of widgets that are great for flutter developers to learn how to create and with that I hope you enjoy the video and let's get started before they start coding let's walk through the file structure of our project I created a folder called models inside our Lib directory that contains two files called message model dart and user model dart tat apps usually consist of users and messages so our first model is a user model because we need to have a way to identify the users who send messages and the user class has an integer ID a string name and a string image URL and if we go to our message model we can see that our messages consists of a sender which is of type user a time which is of type string but usually it would be of type day time or a firebase timestamp in production Apps depending on how you code it but we're going to make it a string to make it easier to code the UI and then string text which is the contents of the message a Boyan for is light and a boolean for unread because inside the UI of the app we're able to like messages and also see which chats are unread down here I created a current user which is us and we have the ID of 0 the name current user and then our image URL is assets images and then nice to chose one of the images here so Greg JPEG and I got all these images from a site called random user dot me which I'll link in the description so you guys can download the images there too back in our message model I also created the other users so Greg James John Olivia Sam Sophia and Steven and we all have different integer IDs and then I made a list of favorite contacts and inputted five different users that we just created above and we can see these users would be in our favorite contacts section and then beneath this is our recent chats so the chats that show up here these are just examples of what a recent chat message would look like and then below this we have our example messages in the chat string and we're going to be using the same example messages for the chat screen because we're focusing on the UI and this streamlines the process of creating the application and if we go to our pub spec dot yeah mol file all I changed was the part here about assets so I uncommented assets and uncommented this and just made it assets / images / and that allows us to import the images directory inside assets here so we can use all these images in our app and now if we go to our main dart file I added a home screen which is a stateful widget that contains a scaffold now let's edit the theme of our hat so let's change primary swatch to primary color and we're gonna make the color red and then we're also going to have an accent color which is going to be color and then 0x FF f EF 9 EB and that's this color over here like a very light yellow color and we'll change the title of the app to flutter chat UI and then to get rid of the debug banner in the top right we can just add debug show Chuck banner and sup at the false now let's take a look at our app we can see that we have an app bar up here and then we have a selection widget here down here we have a container that contains a widget that has favorite contacts and down here we have another container with each of these have rounded corners and inside here we have list tiles so here's a list view this is also a list view and this is a list view so let's start by first building out the app bar so we're going to say app bar app bar title we'll make that a text widget chat's hit save let's increase the font size by adding a style textile font size and we'll make it 28 and we'll add some font weight font-weight:bold and now to add a leading button and instead of making it this back arrow let's actually just make it a menu button and then we can change the icon size by doing icon size 30 point oh let's change the color to white and then to update the color we have to add the on pressed function and it safe and down here we can see that we have some elevation and if we look at our chat UI there's no elevation on the app bar here it's all seamless and we can get rid of the elevation by accessing the elevation property of the app bar and set that to zero point zero now let's add the action widgets which is the right side of the app bar and we can just copy in the icon button we wrote up here save and we have the menu there well it change the icon menu to a search icon and that's our app bar done looking at this image I can see that this is a column widget here so we can start by it's making a column widget inside our body let me say column children and then to make this category selector we need to create a container first and specify a height so we can say height 90 and we'll add a color so it's easier for us to see and right here that's going to be our category selector next up we need to create a list view and we need to write the different categories we're going to have so let's actually extract this widget here and make a new widget called category selector so I'm going to cut this and write category selector and then inside our libs folder I'm going to make a new folder called widgets and inside widgets I'm going to make category underscore selector dark here I'm going to make a state for it because we need to maintain state inside this widget so category selector I'm going to hover over this to import material dark and then replace container with our container and it's saved go back to homescreen and import the category selector and we see that it still appears here so now we need to maintain state we need to create a variable inside our category select our state called selective index and we'll set that to zero so in selected index equals zero and then we need to make a list of our categories so final list string categories is equal to messages online groups and the last one we can make it requests and it's save and now inside our container we can make a child ListView builder and our ListView builder is going to have an item count in an item builder the item count is equal to the categories dot link and categories is the categories we just created and we're going to return for now let's just return the text widgets so categories and then index and we'll see what shows up and we can see that in our simulator we have messages online groups and requests so that's working correctly but we wanted to scroll horizontally just like in the photo so we'll go back to our ListView builder and change the school direction to access horizontal and it's safe and now they've lined up horizontally next let's add some padding to our text widgets so we can a command period on Mac and click padding and then our padding we're gonna make it edge in sets dot symmetric horizontal make it 20 pixels and vertically and make it 30 did it save and now they're spaced out pretty well and we can see that messages is aligned with the menu bar because we made it 20 pixels from the left and the right and left style our categories index so style textile let's start with color for now we'll just make it color stop white [Music] fontsize 24 point Oh font-weight will make that bold and then I thought some letter-spacing let's try 1 point 5 that's a bit too far so we can do 1 point 2 and that looks pretty good and if we look back at the UI photo we can see that the selected index has a different color than all of our unselected indexes so if we go to our color property here we can check if the index which is being passed in from our item builder is equal to our selected index and if it is then we'll have color style white and if not we'll use color stop white 60 and it's save now we can see that the selected index is white and the other ones are a little lighter so if we click it doesn't change because we need to add the on tap method to our text widgets and we can do this by hovering over a padding wrapping it with a new widget called a gesture detector and then adding the on top method and inside will say set state selected index is equal to index and now if we hit save and click around we can see that the category is changing and we're maintaining state because this is a stateful widget and last but not least let's change the color of this container to red and because we set the primary color of our app to red we can just do theme of context not primary color and it's safe and now it's red so we're all done with our category selector so let's go back to our home screen next up work on getting this container here with the rounded top left and top right edges and it's going to expand to the bottom of the screen so we want to make a container with the decoration of box decoration the color that's going to be themed of context accent color which is what we set before and that's the lightest yellow color and then let's just add a height property for now before we add expanded so we can see it let's make it 500 and in the simulator we can see the light yellow color here and down here it's white because the container is not expanding all the way to the bottom right now so inside our box decoration let's continue and we can edit the borders by going to border radius border radius only the top left will be radius circular 30 point oh and then the top right the radius that's circular 30 point oh and it's safe and we can see that there's a slight curve on the top left and top right corners and now to make the container expand to the bottom of our chata let's remove the height and then all we have to do is wrap our container new widget and make it expanded and now we can see that it expands to the whole entire height of our app but the corners here when they're rounded we can see that there's white and inside the app we see that the corners are right here so all we have to do is go to our scaffold change the background color to theme of context dot primary color and it's safe and now we can clearly see the rounded corners next up let's start building our favorite contacts widget so we don't need to make a background for this as it's going to be sitting on top of our light yellow background here we need to make is a column widget and then inside that column widget there's going to be a row for favorite contacts and this horizontal icon and then the bottom portion of the column would be a horizontal ListView containing columns of a circle avatar and a text widget so now let's make a child of our container and we're gonna make the column first column children and then our row so our row is going to contain the text widget favorite contacts and then the horizontal more icon unpress to this button it's saved and now we have the beginning of our favorite contacts widget and before we go any further let's actually cut this out and we'll put this into its own widget called a favorite contact start we'll make a new widget inside widgets called favorite contacts door and this can be a stateless widget because we don't need to keep state at all so a favorite contacts remember to import material and then just paste in the row we cut out [Music] now if we hit save we need to type in favorite contacts here and import it now reappeared so now we're going to be working in favorite contacts dark let's start styling our text widget here so as usual textile color colors blue gray make the font size 18 point O and the font weight will be pulled and we'll have letter spacing 1.0 the icon button that's going to have an icon size of 30 point O and the colors will be blue grey just select the text widget and then for a row widget to make the favorite contacts and the horizontal button stay on both sides we need to access the row property main axis alignment main axis alignment dot space between and that's going to separate them next let's create a padding widget around our row and this one is going to be symmetric horizontal 20 point O and we'll deal with vertical in a second because we need to wrap the padding widget ear in a column since we're creating the row here and then the ListView underneath so now the second part of our column we need to specify a height for our container so set the height to 120 and we'll set the color to blue so it's easier to see and the child will be a ListView builder the item count is going to be favorites dot length and favorites we get from our message model which is inside our message model dark where I just defined all the data that we're going to use so it's our list of users Sam Steven Olivier John and Greg back in our favorite contacts we're going to first make the text widget so favorites index and dot name we see all the names here we need to change the scroll direction access horizontal and then let's add padding to the list view builder so edge in sets not only left ten point oh and that makes it so when we scroll there's a little bit of padding here now let's build the circle avatar with the text underneath so wrap the text widget in a column widget we're going to make a circle avatar with a radius of thirty five point O and then the background image is going to be an asset image favorites index which is the user and then image URL I had saved and now I get all the favors and then we want to add some space between the sarcophagi are in the text here so we can just throw in any sized box with a height of 6.0 lets style the text so textile color color stop blue gray font size will be 16 point O and then font weight let's make that W 600 so semi bold I did save and we can get rid of the blue color here now it's add some adding between each of the users so let's wrap our a column and I'm padding widget and we can do edge and sets that all hey let's make it ten we can scroll and now to add some more padding to the whole entire column widget because we want to push this down since favorite contacts and the horizontal icon is way too close to the top we can just wrap the column with edge in sets symmetric vertical ten point oh and that's looking pretty good the reason we put the horizontal padding for the row widget instead of putting the horizontal padding up here is because if we had the horizontal padding inside the top level so let me just show you guys so that's 20 when you try to scroll this ListView this gets cut off on the side and we don't want that to happen we wanted to actually scroll all the way through the screen and that's why we don't have the horizontal padding there but we instead we put our padding inside our ListView builder where we say padding agents that's only left 10-point oh and that's why the users are able to scroll from each side of the screen without getting cut off by the container and let's just add back our 20-point padding there and our favorite contact is looking good so we're all done in the favorite contacts dart file for now let's go back to our home screen let's take a look at the chai you I again so from this image we can see that we have a container here a white container with the same rounded top left and top right edges and then inside of this is a list view that contains list tiles but in our case we're going to be creating our own list tiles since we'll be able to do more customization since we also need to have a new text label here and then we can see that there's a light red here and it's stuck against the left side of the screen and these have rounded corners here okay so let's start by making that so as usual I'll make the container we'll give it an arbitrary height for now so we can see it color it colors blue now let's make the decoration and we can just copy this up here or so copy the whole box decoration a sudden and we'll change the theme of context accent color to just colors not white and we can see the rounded corners there now to make it expand all the way to the bottom all we have to do is throw the expanded widget on this expand it get rid of the height save and now it expands all the way to the bottom next let's make our ListView builder here so inside our container we have a child ListView builder item count this time it's going to be chats dot link and we'll import chats from our message model and then we'll just return text chats dot our chats index dot center dot and we have the names here now just like before let's cut this out and we're gonna be making a recent chats which show inside widgets and make a new file called recent recent chats dark that's going to be stateless recent chats import material dark and then we can remove this container and just paste in what we just wrote it make sure you guys import the chats here so import message model it's saved and then back in home term we need to import recent chats and we can remove the message model that dart package from this page [Music] now let's start by just building on our basic recent chat tile we can see that this consists of a row widget and inside the row with it we have the circle avatar then we have a column widget which contains two text widgets and then another column widget which contains the text widget for the time and then in some cases will contain a text widget that says new so let's wrap our text widget in a row and instead of writing chats index all the time let's instead make a variable that's final we'll make it called chat equals chats index and that's just type message and now we can say chat dots under that name let's make our circle avatar so circle avatar radius 30 5.0 and the background image will be chat or will be asset image chat sender image URL so it save you know have our images appearing our chat tops under name that's going to be in a column widget [Music] and the other piece of that is chat dots under or chat dot text and then it's saved there and then to make this left justified oh f do is access our column widget inside we need to go to cross axis alignment cross axis alignment start and that I'll line it to the left taking a look at our Caillou I again and what we're actually going to do is wrap this circle avatar in this column widget and in a row widget here and then wrap everything in another religion and I'll show you guys why in a second so let's first go to our row agent and just wrap it in a row and now in our second row we can make the column that has children [Music] text chat time and the other piece of text is going to say new so the reason we do this is because if this piece of text here is shortened then let's say everything was still wrapped in one row widget by shortening this piece of text here the 5:30 p.m. a new would actually be bound to this religion and come over here but by putting in two separate row widgets we can use the property inside outer religion main axis alignment main axis alignment dot space between and it'll push it away so that way no matter how big or how long this piece of text is this 530 the timestamp in the new will always stay right aligned just like we want it and just to show you guys again if we comment that out the 5:30 p.m. a new it's bound to the first religion but by adding that in we push it out so let's start styling our custom list I'll let's take a look at our chili again we see that this is a lighter gray that looks like a blue gray this is also blue grace or a light and then we have the container for new so chat Dev Center named textile color in fact colors gray font size 15 point O and the font weight on that's going to be bold it save then let's add a similar style to the chat text here it's save on that will change the color to blue berry and the font way looks a bit too bold so let's make that W 600 next let's add some overflow to this text so it gets cut off so we can do overflow text-overflow:ellipsis and it's not being cut off right now because we need to specify a width for this content so we can wrap the text widget in a container and then title with here so we can just do a media query of context dot size dot with and multiply it by point 45 and now we can see that the text is now overflowing we can add a sized box here height 5.0 and then appear let's add another size box with height 10 point oh [Music] no not height width because we want the size box to be between our circle avatar and our a column so we're adding with here now when we try to scroll up we can see that we have rounded corners on the top left and top right but when we scroll up the text actually doesn't get clipped off and an easy fix this is by wrapping our ListView builder in a new widget called clip or erect and then we're adding border radius only top left and top right now if we save that and then we scroll we can see the text and the images on the left and right get cut off accordingly now looking at our image let's make these containers here so we need to wrap our tiles in a container and then add margin to the right side so strap the row in a container and this container is going to have margin edge in sets only top 5.0 bottom 5.0 and we'll make the right 20 pixels and it's safe and that's looking pretty good now to add some padding to the container edge insects taught symmetric horizontal 20 point oh and vertical ten point oh and now all the photos are aligned with each other because they're all 20 pixels from the left and now to change the color we can go into the decoration of our container box decoration we'll add the color 0x FF FF e f e it's save and now they're all the unread message color we can change that by well let's first deal with the border radius so a border radius border radius only top right that's raised that's circular and we'll use 20 point oh and the bottom rights the same thing but just seems the top to bottom now to fix the chat color all we have to do is access our chat message and check if it's unread so dot unread if it is then we're going to be using the unread color that we just made and then otherwise its colors not white and now we can clearly see which chat messages are unread based on their color so let's go back to styling our tiles so now chat time style of textile color it colors gray font size 15 point oh and make it font-weight:bold and then 4 new so first let's wrap it in a container and this container widget it's going to have a width of 40 and a height of 20 and then because the chat you I hear the new is rounded corners the container has rounded corners we need to make decoration box decoration border radius border radius circular 30-point oh and then we'll add color so we can see it so color theme of context primary color and that's right now to center align the text we can access the alignment property and then just use alignment Center and now our new text is centered inside our container we can change the textile here so color a colors not white make the font size 12 point oh and then we can change the font weight to bold [Music] that's looking really good we need to add some spacing between the time and the new label size box height 5.0 and that's to do the trick and then to get rid of the new label on regular chats that have already been read we can just add the a ternary operator here so chat dot on red question mark and then we can just put text empty textbox so this is checking if the chats on red if it's on red then we display the label if not then we just have an empty text box and you may be wondering if we can use a size box widget here and just use the shrink property but in this case if we do that then the time just down to the middle so depending on what you want if you want to have it all uniform aligned to the top you can use the text empty text widget and we'll shift it up and if not you can just use the size box string but we're going to use the empty text widget to keep it all uniform so now if we compare this to our tattoo I hear it's looking pretty good pretty spot-on so now we're ready to move on to our chat screen now let's make a new screen in our screens folder called chats or chat screen dark that'll be a state full widget called chat screen and import material dark we will return a scaffold and our chat screen is going to take in a final user called user this user now if you're building an actual production application where you had chat rooms and stuff user consider passing in the user you'd most likely pass in your chat room ID and then based on your chatroom ID you'd populate the messages but for the sake of this video we're going to pass in the user so we can change the hotbar title to the user's name that we're chatting with so we go back to recent chats we're going to wrap our container in a new widget called gesture detector and then on top we're gonna make that navigate the navigator dot push context route material page route builder chat screen we need to import chat screen and we'll pass in user chat dot sender and again normally you'd pass in the chatroom ID but we're going to pass in the chat that Center to make the UI easier to build so now if we click James it brings us to the new screen same thing with clicking any of these tiles and also implement the Segway for the favorite contacts so clicking on these we want to segue to the chat too so let's just copy the on tap function here go to our favorite contacts widget and then wrap our padding here wrap with new widget gesturedetector and then paste our on top there and remember to import everything and the user on this case would just be favorites index now we'd save and click these also psych way and now we're ready to work on our test screen so let's take a look at our chat screen again we have an app bar up here with the name of the user we're chatting with and then a icon for the more button horizontal and then instead of putting notifications here we're just gonna use a back button because putting notification here doesn't really make sense since you need to know to go back so now app bar app bar title that's going to be widget user name and wrap that in a text widget and then John appears let's go back to our home screen and just grab one of these let's go just grab the action section here and paste that in here and we have our search icon change that to the more horizontal and then back in our home screen let's grab the styling for our title and that's looking pretty good so looking at this we have the background as a red background and then we're putting the container on top just like we did in this screen and then making it white and then at the bottom we're going to have our text field to send messages and let's go to the elevation on the app bar really quick so elevation equals zero point zero and then the scaffold the background color that's going to be themed of context dot primary color and it's safe so now let's add the container here your body container declaration box decoration call our color stop white order radius border radius only I'm going to do top left and top right so a radius circular 30-point oh and then top right that's going to be radius that's circular 30 point oh two and looking at this we have a another child widget inside the container and that's going to be a column so the first part of the column is going to be a ListView where we can scroll up and down for messages and the second part is going to be the composer to send messages so let's make a child column just going to widget children let's make our ListView builder so ListView builder it's going to have item count messages length and import message model here and then for text now we can just say messages index dot text and it's safe that should be appearing oh but it's not appearing because we put our list view builder inside the column and we need to specify the height of the list view builder so let's actually remove our column widget here and then wrap the container in a column widget it's saved and then we can wrap this and expand it because we wanted to reach the bottom and now our text shows up and then to fix the text clipping off the site just like we did before we can go to ListView builder wrap that with a new widget clip our rect and then just copy this instead save there we see that the text stops clipping or not clipping so now it's getting clipped and it's not showing off the side now without some padding to our list view builder so a padding edge in sets not only top 15 point Oh save that and then say final message message is equal to messages index and then instead of doing return text and the message text let's actually write a function called build message and that's going to take in the message and also take in a boolean called is me and will write fool is me equals message Thunder dot Heidi and we're checking if the message sender ID is equal to the current user to ID and if you guys recall inside our message our message model we define our current user which is us with the idea of zero and then we're chatting with all these people with different IDs so all of these messages here we're saying are from James and James has an ID of two which is not equal to zero so that's how we're gonna differentiate which messages show up on the side and have a like button and then our messages showing up on the right side now let's go back to our chat screen and then we can write our build message function build message message message and pool is me and we'll start this off by returning a container file for now we can just say a message dot text should save on that and then for the container we'll just change the color to the color of the other user for now so with color 0x go back to our recent chats we can just copy that from here now the color changed and let's start by adding some margin just split them up so margins dot only top 8.0 bottom 8.0 and then left that's going to be 80 point oh and that's how it should look like for us because on this side these are error messages and we show up on the right side so to add the other users messages on the Left we can say is me and if it's not me I'm going to the edge and sets that homely top is 8.0 bottom 8.0 and then the right side will be e 2.0 to keep it consistent [Music] then it's safe now we see our messages are split up so now is me and then for here we're going to say themed out of context and then we're going to choose the accent color else we use the color of red now I thought some padding so padding edge in sets not symmetric horizontal 20 5.0 and vertical 15 point oh that looks like good spacing now if we make the box decorations because we want rounded corners for the other user on the top right and bottom right and then we want top left and bottom left for us so decoration box decoration border radius and you guys should be masters at this by now so a border radius dot only top left radius that circular 15 point oh and then bottom left radius that's circular 15 point oh and it's safe we need to bring the color down into the decoration and we see that the top left and bottom left corners are rounded now but we want to split that up based on is me so if it is me then we want the top left and bottom left corners around it otherwise we want the top right and the bottom right corners rounded so let's change these two left's two rights it's safe and now our corners are rounded correctly looking back at the chat app we see that we need a column and then we have a text widget up here and then the text widget we already made so the child that's going to be a column text message dot time it's save and then to make it left justified we just access cross axis alignment cross axis alignment that start let's add some spacing between this so a size box height new 5.0 we can go for 8.0 now let's add some styling to the text style textile color colors blue gray font size 16 point Oh font weight font weight W 600 then hit save now let's copy the style here and put on the message text looks good now you might have noticed that the chat messages are out of order we have it coming for 2:00 p.m. to 5:30 p.m. and the way you fix this is by adding reverse and true and what this also does is it's going to reverse the messages and then stick them to the bottom of the screen so now it's reversed and just like a normal chat app our messages are at the bottom and then when we click the keyboard later on or click the text field and the keyboard pops up the olicity is going to rise with us so that no messages get blocked by the keyboard and that's what reverse lets us do so make sure you guys include this that's really important now let's add the heart icon for Harding the other person's messages and it looks like it's a real widget so we have the first part of the row which is the container and then the second part is the heart so going back up to our build message function let's wrap our container widget in a row it's safe and we're getting some margin errors there it's going off the screen but let's just add our icon button first so let's copy this icon button and let's put it right after the container and it's safe so right now the icon button is off the screen and the way we can fix this is by actually adding a width to our container here so we can say with media query of context sighs that width times 0.75 and then we need to get rid of the margin on the other person's messages because right now we have a margin of Haidee to the right so let's remove this here I'd save and if we take another look at our icon button the color is white so let's change that to black and we see that the icons there so first let's deal with the icon colors and shapes so if the message that is liked then we want to show the icon icons dot favorite otherwise we'd show the border and then want the color to be just like so if the color is liked then we want to use themed of context dot primary color otherwise we're just going to use colors blue gray and it's safe and that looks good now for our messages the reason we're getting this area is because the icon button is showing up for our messages when it shouldn't be showing up there so all I have to do is do is me and check or check if it's not me and if it's not me then we can return a sized box shrink and it's safe but now by doing that size box not shrink even though it's a shrunken size box we get this little gap here and we can see that it is from the size box as if we had a text widget and it's type like one character and hit save the text widget shows up right here so the way around this is actually to not use a ternary operator right here instead we're going to take our whole entire container widget here cut it out outside of our return let's make final container message and then set it equal to our whole entire container in widget and then right above return row we're gonna check if the message is from me and if it's from me then we just return the message and that's the whole container here and it save and then for the roller right here if it's not us then we need to return the message and when the icon button and now we have the other person's message with the like button and we have our message and there's no gap here since we're not even touching this icon button if it's our message and yeah so we're pretty much done with our chat screen except the last part of it is to add our message composer down here so let's do that now let's scroll down to our build message here and then underneath our expanded widget B as we wrapped it in a column let's add a function called build message composer then going back up here great build message composer it it save we need to return something so for now we'll just return the text widget say hello we see that it shows up down there so if we take a look at our chat app again we see that we pretty much nailed the chat UI here with the heart and the liking and then down here we want to make a text field so we're not going to make it exactly like this but we'll make it similar so first we're going to return the container padding edge inset symmetric horizontal 8.0 make the height of it 7d color colors not weight and then the child of this is going to be a row inside the row we want to have an icon button so I'll just write a new one so icon button icon icon icons that photo I concise we make a 25-point oh the color will be themed of context top primary color and our unpressed now we have our photo icon showing there and then on the other side we also want an icon button to send so let's just copy that and then icon send and now they're showing up next to each other but in between these two icons we want to add a text field widget that we can type into so expanded text field trial text field decoration input decoration or say hint message or a hint text send a message what's it save and we can see that we have a text field now and I don't actually like having this red line here so to get rid of that red line we can just do input decoration dot collapsed and it's safe and that makes the red line disappear and then to auto capitalize the message when you start typing because right now if we click and we type its lowercase o f du is going to a text field add text capitalization and then text capitalization dot sentences and that'll capitalize the first word or a first character of the first word and we can have unchanged and then inside unchanged that's going to be the string value so in this case if you're building out the chat app you'd have a variable that's called message and you just update the variable like set state or something we're not even sub state you can just say message equals value so let's erase this now if we click the message here we see the keyboard comes up our text was capitalized we have the photo icon here the send icon there and none of the messages here were blocked because it was raised and the last thing we have to do is make it so when you tap the screen the keyboard drops down because it doesn't really make sense for us to hit done every single time and that's very simple to fix all I have to do is wrap our column widget the new widget and use a gesture detector on tap focus scope dot of context unfocus once it save on that and now if we click you can click anywhere here and it'll minimize the keyboard your chat screen is looking pretty good so if we go back we have a roll chat app here we can click the stateful widget here to change it click any of these messages and it brings us to the chat screen and then we have our nice border radiuses on all of our different containers and it looks great thank you guys so much for watching remember to leave a like in the video subscribe to my channel and to start the repository and get hooked if you guys are interested in actually building out this entire chat app you guys should check out my flutter firebase in serum series which I'll also put in the description of this video and throughout that series you're going to be learning how to use firebase how to create users create accounts and then based on what you learn there you'd be able to build your own chat app and you can even use this UI if you wanted to let me know if you guys liked this kind of video and if you have any app suggestions for me to build leave it down in the comments below or contact me on Twitter and I'll see you guys in the next one [Music] you [Music]

Channel: Marcus Ng

Views: 411,892

Rating: 4.9815168 out of 5

Keywords: flutter chat ui tutorial, flutter beginner tutorial, flutter chat ui, flutter chat tutorial, flutter chat, flutter chat design, flutter chat app, how to build a chat app, chat ui tutorial, flutter ui, flutter ui ux, advanced flutter, beginner flutter, how to build flutter chat, flutter beginner course, flutter ui course, flutter for beginners, app from scratch, fireship, kalle hallden, whatsapp, one day flutter build, app development, programming, tutorial, mobile, dart, firebase

Id: h-igXZCCrrc

Length: 63min 57sec (3837 seconds)

Published: Thu Oct 17 2019

Reddit Comments

[u/lvinci]

I love your videos Marcus they are really helpful