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

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

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

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

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

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

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

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

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

fontsize 24 point Oh font-weight will

make that bold and then I thought some

let's try 1 point 5 that's a bit too far

so we can do 1 point 2 and that looks

and if we look back at the UI photo we

can see that the selected index has a

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

so it save you know have our images

appearing our chat tops under name

that's going to be in a column widget

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

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

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

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

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

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

that's looking really good we need to

add some spacing between the time and

the new label size box height 5.0 and

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

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

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

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

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

and we have our search icon change that

to the more horizontal and then back in

our home screen let's grab the styling

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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