Flutter Travel UI Tutorial | Apps From Scratch

hey everyone I'm Marcus Inge welcome back to apps from scratch today we're going to be building out the UI of this travel app I found on dribble this UI

has a lot of stacks and position manipulation I think many of you will find interesting to learn and build before we get started I want to let you all know that I have a udemy course

called how to build a local store a trap using flutter and sequel flight throughout the course you will learn how to build it to do a snap that saves data locally on your users devices I'll link

a coupon code to the course in the description and I'd appreciate it if you'd check it out ok let's get started first things first let's walk through the current state of our project we can

see that inside our main dart file we set the title to flutter travel UI where you remove the debug banner and we also added a theme data where we set the primary color accent color and scaffold

background color the primary color is this teal color and the accent color is the lighter background behind it the scaffold background color is the light gray color which is the background of

our application let's look at our pub spec diamo file here we imported the package font awesome flutter and that allows us to use a bunch of new icons within our app we also imported our

assets images by importing the assets directory and then the images directory and these are all images I got online now if we go to our destination model we can see that we have a destination class

which consists of a string image URL city country description and a list of activities activities are what show up here in the second screen once we click on a place

activities consist of an image URL have a name a type a list of start times a rating in a price and throughout the app we're going to be using the three same activities for each destination to save

time but if you were to build this app out you can just make the activities the corresponding activities for each destination let's go back to our destination model and we can see the

activities we're just talking about and then below that we have our list of destinations which are the top destinations in this list view builder and then inside our hotel model we have

the name address and price and we have three hotels that will show up in the exclusive hotels list view builder going back to main dart our home screen is connected to our home screen stateful

widget which is where we'll begin coding the app taking a look at our travel UI we can see that we have a text widget here and it has padding to the left of it a lot of padding on the right side

and vertical padding now we can implement this by going into our scaffold adding a body let's use a safe area to apply automatic padding around our widgets inside our scaffold we're

going to make a ListView because we expect this whole screen here to be scrollable since we're going to be able to scroll to see top destinations and then scroll down more to see exclusive

hotels inside our ListView widget we're going to make a text widget with the text what would you like to find it save and we see that the text renders up

here we can style the text by adding a text style the font size will be thirty point O and the font weight will be bold [Music] next we can add some padding to our text

by going to our text hitting command period and then selecting add padding we're going to change our edge inset subtle to edge in sets only and we're going to add left padding 20 point O and

right padding 120 point O and then to add vertical padding to our list view Oh F do is add padding edge in sets dot symmetric vertical thirty point O let's take another look at our UI we need to

add four buttons that the user can select now when I originally tried to code this I use the tab bar at first but the problem with the tab bar is that it has a set height so when I tried to make

the buttons rounded they ended up looking like rounded rectangles and the other problem was that the tab bar has ink widgets so whenever you click to select the whole entire widget would

fill with the ink of you pressing down on the button when in actuality we only want the circle to have the ink effect so the way I get around this was by creating a row widget and then I

populated the row widget with clickable icons first let's create these icons let's make a list at the top of our homescreen state and that's going to be of type icon data and we'll call that

icons the first icon is going to be a font awesome icon dot plain the second one is going to be a bed and then the third one it looks like a person parachuting but since we don't have that

kind of icon we can just put somebody walking instead and for the 4th icon we can use a bike now let's write a function called build icon and that's gonna take an index and

going to return a widget so let's return a container and this container is going to be the outside circular area of our icon button and we'll set the height to 60 point O and the width will be 60

point O and then we need to set decoration so box decoration the color for now let's make it theme of context dot accent color and that's going to be the lighter light blue color here and

then for border radius because we want it to be a perfect circle we need to have the height or width here and that would be 30 in this case now it's not a child to it an icon and we're going to

use icons index because we're passing in the index and we can access each icon we want the size of the icon will be 25 point oh and the color for now we can set two themed of context primary color

lets it save and then going down here underneath our padding let's add a size box with the height of 20 point o to add some spacing and then let's first just build an icon and see what it looks like

so we'll do build icon zero and it's safe and we can see that it stretches across the whole screen and the way to fix this is by hitting command period wrapping it in a row widget it save and

then now it tightens up so one way we can do this is by doing build icon a bunch of times like this and then saying one two three and hitting save and then we get

all of our icons but this isn't really that efficient because in the future if we ever added more icons we wouldn't be able to see them so still we'd only have the four icons here because we

hard-coded the indices so instead of having a build icon for each one of these we can actually convert our list of icons to a map so icons as map and then do dot entries and entries is an

iterable of a map entry and it has the index which is the inn and the icon data so now we do dot map and then we get a map entry map and then we want to return the function build icon map key and map

key is the index and lastly we just want to do dot to list to convert it back to a list because row children is a list of widgets now if we hit save we can see

that all of our icons appeared now let's deal with the spacing between our icons we can use main axis alignment main axis alignment dot spaced around and that's going to add even space between the

icons and half the space for leading and half the space for trailing so now they're nicely spaced out and then we want to make the icon selectable because in the picture we have one icon that's

selected and then all the other icons are deselected at the top of our homescreen state we're going to add a state variable called in let's call it selected index and we'll set that equal

to zero let's Hawtree sort the app and now inside our build I con we're going to wrap our container in a gesture detector and on tap we want to set state so set

state selected index and we'll just set that equal to index and now if we hit save and then when we click but let's actually print out the index here so we can see it now if we click here we see 0

1 2 3 and now we have to work on changing the color so for our background color we need to check if selected index is equal to index double equals and if it is then we want to show the accent

color otherwise we want to use a light gray color so we're needs a hex code for this and that's e7 e b ee if we'd say if we see that these three icons the background

change to the d selected color and then now to change the icon color so same thing selected index is equal to index then we want the primary color otherwise we want to use color 0xff b4 c1 c4 and

now that's the same color as these icons and we can select so if you wanted to fully implement this icon row then you can add the logic to change the list view builders here so if you clicked on

like the bed for example maybe it would show you hotels and then if you clicked on the walking person it would show your activities and then if you clicked on the biker then maybe it would show you

different transportation methods but we're not going to implement that for the sake of just creating this UI now our icon selector is done let's start working on our destination carousel we

can see that the destination carousel is made up of a column widget that contains a row and inside the row we have two text widgets or one of them is a button and then the second part of the column

that's a container widget which includes a ListView builder inside so let's start by building out the row which it here down here let's make a column widget first and that's going to have children

inside the children we're going to have a religion and that's going to contain text top destinations and text see all and we can solve the text so for top destinations let's make the font size 22

the font weight can be font-weight:bold and I also noticed that there's some letter spacing on this text so we can add letter spacing 1.5 and that looks pretty good now for CL we can do the

same thing so it's style textile color this time it's gonna be themed out of context dot primary color our font size will be 16 font weight we're gonna make it semi bold so that's font weight W 600

and then the letter spacing will be 1.0 now to add space between these two widgets all we have to do is go into our row add main axis alignment main axis alignment dot space between and that's

going to push them apart now we can add some padding to it to get away from these sides and we'll do edge insights dot symmetric horizontal 20-point Oh to add spacing between our selector and

our destination carousel we can just add a size box between them with a height of 20 point oh and now before we go any further let's remove our column widget by cutting it out and we're gonna make

the widget called destination carousel and inside our live folder let's make a new directory called widgets with a new file called destination underscore carousel dart and that's going to be a

stateless widget destination carousel and make sure to implement material and then I'm just going to paste in the stuff we just cut out and then remove the comma here it save go back to home

screen make sure to import destination carousel and if we had save the destination carousel stays going back to the destination carousel we can add a gesture detector on CL so on top will

print see all it save and now when we click this text widget it's going to print seal and then that would be the button that would probably display all of the destinations to our user now the

next part of this is to build out our ListView builder and our ListView builder consists of a container widget first because we need to create a fixed height for LSU builder so let's do that

now a column widget and right under our padding here we're going to create a new container with a height of 300 and so it's easier to see let's make the color

colors dot blue it save and this is where our ListView builder is going to be now let's make a child ListView be item count we're going to make that equal to destinations dot length and we

get destinations from our destination model dart and if we return a text widget for now so we can say destinations index dot city hit save and so that we're missing a static target

and we can fix that by just hot restarting the app the destinations are in a vertical list view right now and just like the UI we want it to be a horizontal with you so all I have to do

is add a scroll Direction access corazon ttle it's saved and we see that the names are now on the same line the destination cell consists of a container what they specified with

and then the child of that container is going to be a stack where the image appear is going to be on top of this container here because we can see that the image is floating on top of the

container so let's start by building out the bottom container here which has the activities so let's make a destination destination is equal to destinations index and for now we can remove the text

widget and we'll return a container with a width of 210 and then we're going to have our stack widget and then another container inside so child stack children we're gonna make a container with the

height of 120 point oh and a width of 200 point oh and so you guys can see these are wide a color so colors dot white and then we'll also add a color to our outer containers of colors dot red

and then we need to add margins so margin edge in sets dot all ten point out and these are all of our destination cards the next part of this is rounding our container widget on the inside so

we're going to add a decoration to this container it's gonna have box decoration with a border radius border radius dot circular ten point oh and then make sure you bring the color inside the box

decoration it's safe and now I have our rounded corners and then inside of this container we're gonna have two text widgets one is going to be the number of activities and the other one is going to

be the destination description and we'll have child it's going to be in a column widget children text destination dot activities dot length activities and then the

second one it's just destination dot description it's saved and now it appears now to left align them we can go into a column widget here access cross axis alignment cross axis alignment dot

start and it brings the text over to the left side now we can style our text style textile will make the font size twenty 2.0 the font weight will make that W six hundred so semi bolt and then

the letter spacing will be one point to it save and then for the textile for the description will just change the color so textile color colors gray and referring to the UI here we can see that

the column widget is stuck to the bottom and we can achieve that by just adding main axis alignment here main axis alignment dot and and that's gonna bring it all the way to the bottom B as the

top for the main axis alignment which is vertical that's the start up here and the bottom is the end so it's save and it brings it down and all I have to do is ID padding now so go to the column

widget add padding edge in sets and we can do edge in sets at all ten point oh and that's looking good let's focus on creating the image widget year with rounded corners it also seems

to have a shadow and then this is also in a stack because we're putting text on top of the image but first we'll just start by making the image so let's go back up a bit and we can see that we

have our stack here so after our container widget we're going to want to add a container decoration with box decoration the color will make it white and then border radius for the rounded

corners that'll be circular 20 point o and then box shadow we need to put that in an array box shadow the color will be color is black 26 the offset will be offset

zero point zero two point O so the offset stays on the x-axis and then it moves down by two on the y-axis and then lastly we just need the blur radius which we will set to 6.0 now if we hit

save and go back here we can see that it expands all the way down and we'll deal with that in a second once we set the height of the image the box shadow here is being rounded by the border radius

and now we need to create the child and that's going to be a stack with children and we want to make an image with height 180 point O and a width of 180 point O and the image will be an image asset

destination dot image URL fit box fit cover and that'll expand it to the item with it save and now we can see that the images are 180 by 180 and everything is aligned to the top left right now so we

can just quickly fix that by going up to the highest level stack which is over here and then accessing alignment alignment dot top center hit save and then everything shifted to the

center and now to deal with the rounded corners on the image we need to add something called a clip or rect widget so let's wrap the image and clip are wrecked

and all I have to do is add border radius border radius not circular 20 point oh it's saved and now we have our images with the light shadow behind it and before we go any further let's move

the container behind the image down and all we have to do is add a widget called positioned and then we can access bottom and this is the distance the container widget is going to be from the bottom of

the stack and one set up to 15 point Oh hit save and now it looks pretty good and compared to this we have the small edge right here that's showing and the image looks like it's floating above the

container to finish off the image stack let's add the text so going back down to our stack that contains the image here we're going to create a column widget and that widget is going to have two

text widgets the first one being destination dot city and the second one is destination country and we can see that the image here overflowed but it'll fix itself once we're done with the

stack here so let's style these widgets style textile color a color white font size 24 0.0 the font weight will make it font weight w 600 and then the letter spacing

will be 1.2 and now for the country all we have to do is change the color color color white and then we have Italy right there and looking back at this we also need to add an icon right next to the

country so we can wrap this text widget here and that's the destination country with a row widget and just put in an icon font awesome icons dot location arrow with the size of 10 point oh and a

color of white and then a lot of sized box with a width of 5 point I would add some spacing between them it save and now it's nicely spaced and then to make everything left aligned just like we did

before we access cross axis alignment cross axis alignment dot start and then we have to deal with the positioning of the text widgets let's go to our column here and then wrap it in a position twit

and it'll make it left endpoint oh and then we'll make it bottom ten point out and now compared to the UI here it's looking pretty exact the last thing we have to do here is just change the

colors of our containers so now we don't need to have blue anymore we can remove that and then we don't need the red showing here it saved and we have our destination carousel

taking another look at our UI we can work on our exclusive hotel carousel and since we don't know exactly what that looks like we can just make it the same as top

destinations and make some minor tweaks so let's make a new widget cold hotel carousel dart and that's going to be a stateless widget just like our destination carousel hotel carousel

import material save and then let's just rip out the destination carousel here and copy it so copy the column and paste that in right here and for now we just make sure to import all the different

packages and now if we go back to our home screen let's add another size box and then import Hotel carousel it's saved and now we have the hotel carousel showing and now we have to tweak it so

first let's change the text up there so instead of nations we will call it exclusive hotels and then to change these we can go down to our container which contains these

stacks for our image we don't want to have the text here anymore so let's just take out the positions widget here now hit save and the text is gone and we can remove the stack widget and

then let's work on the activities here or before that let's change the destination image URL to a hotel image URL and that requires us to change the ListView builders destination here we're

gonna make it hotel hotel equals hotels sub-index it save and then make sure to import hotel in that case we can remove the destination model and we don't need the fun awesome flutter package anymore

change this to hotel is not like what we want to put here instead of activities is the name of the hotel then the address of the hotel and then we put the price of the hotel so let's remove this

and put hotel name the second one will be hotel address and then we'll add a sized box between them 2.0 it's save and we're getting the unimplemented handling error so just how restart and now the

hotel show up and then the last thing we need is another sized box here with a height of 2.0 and a text widget which is the hotel price so it'll put a dollar sign in we have to

escape it with a backslash and then we can put Hotel dot price per night and we'll style that textile font size of eighteen point O and a font weight font weight W 600 which is semi bold and

that's looking pretty good we can Center the text instead by changing the cross axis alignment cross axis alignment Center and hitting save or we can just cover this line entirely because by

default the cross axis alignment of a column is centered and to change up the look of this some more we can make the width of our containers different so instead of having a width of 210 let's

change it to a width of 240 and we can see that the space expanded a bit now let's change our container here to 240 and then we the image with down here to 220 and that

makes it easier to distinguish the hotels from the top destinations and that's our hotel carousel the last thing we have to do for our home screen is add a bottom navigation bar so we need to

add a bottom navigation bar with three items a search icon some kind of icon which we're probably gonna make pizza because everybody likes pizza and the last one is a circle avatar so

now if we go to home screen underneath safe area we can make a bottom navigation bar bottom navigation bar and we're gonna have a current index value which means we need to make another

variable called current tab and then we have items where the items are going to be of type bottom navigation bar item bottom navigation bar item the first one will be an icon so icon icons dot search

almost set the size to 30 and then let's add a current tab right now so if you go to the top here and then right underneath selected index will add current tab and that's gonna let us keep

track of which tab is selected it's saved and then we get this error because we need to have at least two items in the bottom navigation bar so let's just copy paste this and then we're gonna get

another error which is about the bond and navigation bar item not having a title so all bottom navigation bars must have a title which means we can put an empty text widget here for both of these

it save and then we see that we have icons but they're pushed up a lot because we have an empty text widget and the way to avoid this is by just adding a sized box dot shrink so if we make

this one shrink we see that this search icon moved down but this one is still a bit raised because the text widget is empty here and in this case we also want to add the size box shrink and that'll

make it so the icons are not pushed up let's change this to local pizza [Music] and now I need to have one more for the circle avatar so let's copy this paste

and all we have to do is change the icon because our icons is a widget which means that can take in a circle avatar make the radius 15 plano the background image will have a network image and I

grabbed mine off of Google save and then I have my image here now when I click on these they don't change color which means that we need to add a set state because right now we're not changing the

current tab value whenever we click a new tab so on tap we're gonna want a set state because we want the widget tree to re-render whenever we tap the current tab is equal to and on top gives us an

integer value which is the value of the index and we'll set that to value save and now if I click it changes and I click the last one it doesn't change but the other ones are unselected so that's

fine and that's our bottom navigation bar we're now ready to move on to the destination screen so let's make a new file called destination screen in our screens directory and that's going to be

a stateful widget destination screen and it's going to take in a destination destination and that's going to be final we need to create a constructor destination screen this destination and

then we need to import material it save and then right here let's just return a scaffold for now so when we click on a destination here we want to go to the screen and the way we can do that is by

going to our destination carousel and adding a gesture detector on our container widget that we returned gesturedetector on top and we're going to do navigator dot push context and the

routes going to be material page route builder destination screen and that takes in destination and we just send destination through let's save and now when we click Venice it segues to the

new screen our destination screen we want to add an image and we also want to have a ListView builder under that we see that this image is a stack because we have

text on top of our image so let's start with that we can make a body and it's going to be a column because the top is the stack and the bottom is the ListView columns and have children the first

child will be a stack children and we'll make the container with a height media query of dot size dot width so that's the width of the screen and then we're going to make decoration box decoration

border radius border radius circular thirty point O and then we need our box shadow which will be in an array color color stop block 26 offset offset zero point zero two point O and the blur

radius will be 6.0 and this is where the image is going to be so we add a child and one our image that's going to be image asset image widget destination dot image URL and a widget destination is

the destination that we pass through when we segue to the screen now if we hit save the image appears and in order to make it fill the whole height we can do fit box fit cover it save and to get

the rounded edges we can add a clip our wrecked widget border-radius and let's just copy this border-radius right here save and now we have the nice effect where we have the

container with the shadow to make it look like the images floating the UI has a back button on the top and then two buttons here so the way we're going to make that is by creating a row widget

and that roll widget is going to have an icon button here which is the back button and then we're going to have another roll widget here to contain the two other icon buttons and then on the

outer rajat we're gonna do space between to push them apart we're in our stack underneath container we can create a row widget or make an icon button icon icon icons dot back arrow hit save and we see

that the arrow appears up here let's change the size of the icon to 30 point Oh color color stop black and then we need to add unpressed which we'll just do navigator dot pop it save and to push

the arrow down we can add some padding to the row edge insights dot symmetric horizontal ten point oh and vertical we'll make it forty point oh and now the arrows down here so if we click that

arrow it pops the screen away you know it works for all of our screens now let's add the other two icons so we need to add a search icon and a filter or sort icon and like we said before we're

going to want to make a row widget again and that's gonna have children and the two children are also going to be icon buttons so we can copy/paste our existing one twice hit save and then

they appear right here so we can make the first one icons dot search and the second one will be a font awesome icon dot sort amount down and we'll make the fun awesome 120 5.0 because it's a bit

big and now to push it away to make the arrow on the left side and then make the other two icons pushed on the right side all we have to do is add main axis alignment to our first row and put dot

space between and that's looking pretty accurate now let's add an animation to our app so when we go back and then click into the destination we should want the image to actually expand into

the next screen and the way we do this is by adding a hero widget so let's go to our destination carousel and let's wrap our image widget so the clip are erect right here with a hero and we'll

set the tag and that's the identifier of our image widget and that's how we know how to animate the widget to the next screen and we'll set that to destination dot image URL because these are unique

IDs let's hit save and now on our destination screen we're going to want to do the same thing for our image so wrap the clip our rekt with a new widget hero and then instead of using the

destination URL we're gonna use widget destination image URL save that and when I click out of this we see that the photo minimized in to our destination image click it

it grows into the our stack works for all of these and it's a really nice animation on the simulator it looks a bit slow but when you run it in release it works perfectly fine now

taking another look at the UI here we have the city the country and then an icon here so let's first start by creating this and we can easily do that by just going back to our destination

carousel and copying what we wrote before so let's just take our column widget here and then in our destination screen we can go underneath our padding right here and add this in here and

change the destinations to widget dot destination let's hit save and it shows up up here we can move it down is by wrapping it with a position to which it positioned

and will do left 20 point O and then bottom 20 point O then we can increase the font size so for the destination city we make it 35 and then our text on the bottom we can make it 20 point O so

it's not a font size property and let's increase the size of our icon here now the only thing we're missing is the icon down here and just like how he positioned the column here all we have

to do is make another position budget so positioned we're gonna make it from the right 20 point o the bottom 20 point O the child will be an icon icons dot location on color color stop white will

make it color cell weight 70 and the size will be 25 point O it save and that's where the icon is and I notice that the country here is a little bit gray so we can also make this white 70

weight 70 and then the location R will also be white 70 and that looks a bit more accurate for the next part of the screen we want to create a list view so we can see that we have a list view here

where when you put all the activities underneath our stack we're gonna make a list view builder the item count will be widget destination dot activities dot length and then for now we can just

return text widget destination dot activities index dot name once it save and we'll get an error because we didn't specify a height for our ListView builder

and we don't have a fixed height that we want the listview builder to be so we can just make it expand to the rest of the screen by wrapping it in and expanded widget it's save and then we

see our activities now let's work on designing these tiles we can see that each one of these activities is a stack because we have an image floating above the Container widget here so it's

similar to what we did for our top destinations carousel but it's different in the sense that the image is now on the side now let's return a stack instead of a text widget stack and then

we want to grab the activity and that's just widget destination dot activities index and import activity work on building the container that's underneath the image so our stock is

going to have children container it's going to have margin edge in sets dot from left top right bottom from the left we're gonna make it forty point O because it's farther away from the left

than it is from the right the top we can set that to 5.0 the right we'll make it twenty point O because it's half the distance from the left and the bottom will be 5.0 you'll make the height one

seventy the width will be double dot infinity so it expands to the full size of the container decoration box decoration color will be color stop white and then the border radius that

will just be circular twenty unless it save on that and we can see that the cards appeared now I want to make the text appear so what text we need to show we need the name the type the rating and

then the start times and then on this side we need to have the price of the tour so it looks like that this is a column widget the top right here is a row and then down here we can write a

custom function to actually create the number of starts based on the rating and for this we'll make our own containers to show these start times inside our container will have the child widget and

we'll make a column the first widget is going to be a row because that's the name and the price it's alright text activity name text activity dot price and we can add the dollar sign it save

and we have that appearing now for the row we can add main axis alignment main axis alignment dot space between two separate them in the cross axis alignment will be cross axis alignment

dot start now for the rest of these we can add the other text widget and that'll be text activity type the next one will be the rating so we're gonna write a function called build rating

stars and that'll taking the activity rating and we'll write that in just the second so we'll comment it out for now underneath that we're gonna have a sized box with a height of ten point O and

then we're gonna have a row widget that contains these two containers so we'll create a row children container will make the with seventy point O the decoration will be a box decoration with

the color theme of context dot accent color and that's the lighter blue color the border radius will be circular ten point O the child will be text activity dot start time and we'll use index zero

for this one for every single activity I put to start times so we're going to be indexing for zero and one and now if we hit save we can see that the start time showed up here and we can

Center that by just adding alignment alignment dot Center and then again for the second one let's copy-paste that and change the zero to one here and we want to add some space between it so just

like usual where size box with a width of ten point O it hit save and now since we have mostly the text done we can start styling it so lets style the text for the name and the tour activity name

will be style font size 18 point and we'll make the font weight semi bulb so font weight that's w 600 and hit save and now for the activity price we're gonna make that style textile font size

20 2.0 and the font weight will be font weight w 600 it save and i just realize that we're missing the per pax here so we need to wrap the text of the activity price in a column widget and then

underneath that we can just make another text widget and we'll call it per pax and I need font size because the default is 14-point oh we just change the color to

colors gray that's looking pretty good for the price now going down to our activity type all we have to do is style textile and we'll set the color to gray to left align all

the widgets we can go to our column which are right here cross axis alignment cross axis alignment dot start and that's going to move everything to the left side and then for the main axis

alignment we want it to be centered so all we have to do is type in main axis alignment main axis alignment dot Center and that's going to Center this vertically so he had save it shifted

down now to add some padding to our column widget will make it edge in sets dot from ltr' P and this time make it 100 point over from the left twenty point O from the top the right will be

twenty point O and the bottom will be twenty point O and it save and we see that we're getting some overflow area and the way we can fix that is by just wrapping our activity name field in a

container and we can restrict how long we want the text to run on for so let's just grab the text here wrap it in a container widget set the width to one twenty point O hit save and then I don't

like how it rocks so much here so I'm only going to restrict it to two lines and the way I can do that is by just adding a max lines to the text and setting it to two and then this one

right here was walking tour in gondola ride text-overflow:ellipsis and then we see the dot dot there now before we forget let's add our rating source so uncomment

this and then we're going to write a new function now called build rating stars and that's going to take an INT rating and we want this function to return a text widget so if string stars is equal

to an empty string and we're just going to make a for loop so for int I is equal to 0 if I is less than rating then we're going to increment I by 1 and then we're going to add stars plus equals and then

inside the quotes we're just going to add a star emoji and now if we hit save and then remember to return text stars we now have our stars appearing and I'd like it if my stars had space between

them so I'm to add one space right here and then if you want to get rid of the extra whitespace you can just do stars dot trim and that's new trim off any leading or trailing whitespace and it's

safe and now all we have to do is add an image right here let's scroll back down now right off for this container which is this container widget we're going to add the

image URL we're going to add the image so a clip are wrecked border-radius because we want to clip the image to have rounded borders circular 20-point oh and the image will have a width of

110 image asset image activity dot image URL it save and we see that the images are here now but we want it to fit the width and cover the entire widget so we just need to add fit box fit cover and

then also add positioned around clip are rekt so then our image knows how much to expand so it's wrapped clip are wrecked in positioned from the left we'll make it 20 point O from the top we'll make it

15 point O and from the bottom we'll make it 15 point O hit save and now we have our images now the one last thing we can do is go to our ListView builder here and add some padding because right

now I don't like how there's so much space between the image up here and our activities so we can just throw padding into our ListView builder edge in sets only and we can set the top to 10 point

oh now if we scroll down we can also add padding to the bottom too so we can make it bottom we'll try a 15 point oh and it's safe and now if we scroll we have some more padding on the bottom and we

have a little bit of padding on top and compared to the actual travel UI this is looking pretty good one thing we can add is some padding around our text widgets here to make the

containers wider so let's go down to our containers here add padding edge in sets dot all 5.0 and that's looking much better and this is spot on and that's our destination page so we can click any

of these and I'll show the activities and we have the animation we also created the selector to select the icon and down here we have the hotels in there bottom navigation bar that's all

for this video thank you guys so much for watching remember to Like comment subscribe and to share the video with your friends if you found it helpful I also will include the source code to the

whole entire app in the description if you guys want to check that out and start the repo on github and lastly if you guys enjoyed the video make sure you check out my you to me course where I

show you how to build a local storage app using flutter and sequel flight and I'll see you in the next one [Music]

» UDEMY: The Complete Flutter UI Masterclass Coupon

» UDEMY: Flutter and SQFLite Coupon

Welcome to my Flutter Apps from Scratch tutorial series where you will learn Flutter and create amazing apps using Dart. In this video, you will build the layout of a travel UI and learn about stacks and position manipulation.

» Clone this repo to follow along

» Timestamps
00:00:00 Introduction
00:00:36 File Structure Walkthrough
00:02:42 Home Screen
00:04:17 Selectable Icon Row
00:11:55 Destination Carousel
00:28:20 Hotel Carousel
00:32:56 Bottom Navigation Bar
00:36:44 Navigating to the Destination Screen
00:38:34 Destination Screen
00:43:46 Hero Animation
00:45:20 Destination Screen Image Stack
00:47:50 Activity List View
00:57:41 Ratings
00:59:00 Display Activity Image
01:01:05 Activity Tile Tweaks

» Remember to like, subscribe, share this video, and star the repo on Github 🙂

» Resources
Source Code: https://github.com/MarcusNg/flutter_travel_ui
Design: https://dribbble.com/shots/6510521-Travel-App-for-booking-unique-experience

» Studying for coding interviews?
Use promo code “marcus” for a discount!

» Flutter Firebase Instagram Series

» Socials
GitHub: https://github.com/MarcusNg
Twitter: https://twitter.com/MarcusLNg

» My Gear*
Logitech Master MX 2S Wireless Mouse: https://amzn.to/35BZoYy
AirPods 2: https://amzn.to/2MdpJVb
Apple Magic Keyboard: https://amzn.to/2nCXqpu
Blue Yeti USB Microphone: https://amzn.to/32cs6wM
JBL Charge 3 Bluetooth Speaker: https://amzn.to/2IZuxeT

*Affiliate links

» Outro Music
Harmony – Joakim Karud (https://www.youtube.com/channel/UCVBUm9ccjHy0utvlChyrPHA)

#Flutter #FlutterTutorial #AppsFromScratch

    advanced flutter app development app from scratch apps from scratch basic flutter game tutorial beginner flutter card chat ui tutorial dart dart ui firebase fireship first flutter game first mobile game flutter flutter advanced tutorial flutter api tutorial flutter app from scratch flutter apps from scratch flutter beginner app flutter beginner course flutter beginner game flutter beginner tutorial flutter chat flutter chat app flutter chat design flutter chat tutorial flutter chat ui flutter chat ui tutorial flutter data pagination flutter flame flutter for beginners flutter full app flutter game app flutter game dev flutter game development flutter game tutorial flutter games flutter gaming flutter get request flutter mobile game flutter paginate data flutter save highscore flutter save score flutter shared preferences flutter simple api flutter spawn enemies flutter stack flutter travel app flutter travel app tutorial flutter travel design flutter travel ui flutter travel ui tutorial flutter ui flutter ui course flutter ui tutorial flutter ui ux flutter video flutter video player flutter video streaming flutter youtube api flutter youtube clone flutter youtube design flutter youtube tutorial flutter youtube ui game development gamedev how to build a chat app how to build a travel app how to build flutter chat kalle hallden listtile listview mobile mobile development mobile game development one day flutter build one day flutter builds programming travel app tutorial tutorial whatsapp