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]