Flutter - How I create beautiful UIs - Basics Tutorial

hello friends and not fans yet i will show you in this video how to create this simple and sleek but beautiful ui and flutter and we will start from the basics so let's start i've created a new platter project and deleted everything in my main dot dot file so we can start from zero first we have to add a new void main function and we have to add run at my app and to get rid of this error we have to import our material dot and we have to add new status widget and call it my app my app widget will return a material app it will have a home of home screen and we have to add a new station switcher and call it home screen and our home screen will scaffold scaffold body and body will contain a container so and if we now press f5 to start our app this will take a while when you start your app the first time it needs to install the app on your virtual device and can take up to 70 seconds or even some minutes if you're interested in my virtual device design i have link and right here just click on the information icon and i will explain you how to make your android device look like mine so my flutter application is loaded now and the next thing we want to get rid of is this debug so really simple and straightforward just go in our material app and right show how to complete more work maybe behind our home screen and here we go debug show check mode banner and set this to force so our banner is done next thing is we want to get rid of our bar at the top and our virtual buttons at the bottom so we have to write system chrome dot set enable system ui overlays and give it an empty array now if we reload our app we will get an error this error will get because we have to initialize all flutter bindings so we can just copy this line which will initialize all our flatter boundaries oh like this and reload our app again and now you can see we have a completely white screen to work with next step is to get our background you want the background from light orange to a deep purple so you can generate a set two colors at the top here one is the main color which will be color dot deep purple and you can duplicate it change this oh second second color and second color will be just orange so the next step is to [Music] get our background this is this container and we can write just a width of double dot infinity because we want the whole width of our container and the height of the container should be double dot height oh double dot infinity to get the full height of our screen the forwards are awesome next thing to add decoration box to duration at the gradient linear gradient colors colors array costs more than one color and we will add our second color because we want the top our second color our main color so and as you can see we get two problems one problem is we go from left to right and another is this white padding first fix the left right problem by just writing begin oh not here uh there begin line and start top center and and line mint dot open and dot bottom center so go from the top to the bottom next thing is this is the dark one much lighter so right with alpha 100 and now it's from the light orange to our dark butter the next problem is this white padding box at the bottom this is because we have disabled our virtual buttons one solution would be to just go under our scaffold and write resize to avoid bottom padding and set it to false so it's disabled but in our case because we use the bottom navigation bar we don't need this because as soon as you add the bottom navigation bar this heading is done so we can go here and add our bottom navigation bar bottom navigation bar oh button navigation bar and you don't want the item you want just bottom notification about this and then you can add items items array of bottom navigation bar item bottom navigation button that's an icon so i can icons dot favorite and title of t for their purpose texts okay text type t and you can duplicate this two times and you see we have three bottom bar items to navigate so next thing is to change our favorite icon because we want only one favorite icon the second one should be a shuffle and third one should be [Music] q music so then we should change our titles to s f because it should always be different the next thing is to set our background color it's pretty easy just make color and if you look closely you can see here the dark line it's because our bottom navigation bar has an elevation so just elevation zero and it's gone now next thing is to change our icon size something like 33 so it's a little bit bigger then we want to hide title so we can write show selected labels and make it false same for show oh and selected labels type this next thing is the item color so we can select the item color and change this to colors.white so our first one is white and our unselected item color should be white as well but not hundred percent opacity more like 38 percent light perforation so the bottom navigation bar is already finished the next step is our ad bar so we will write apple apple and our app will have a leading icon button icon button icon icon and icons dot arrow back ios then it will have an on press of nothing because we don't want it to add anything when we press on it so now we see our back background of our ad bar this is one color so we have to change our background color to second color dot with alpha 100 get same color background of the wrong position you want it here and now you can see our apple has an elevation too so we have to set our elevation to zero and that's it the next thing is to add our search icon so the left side is reading icon it's only one and on the right side we have our actions which can be as much as you want or as much as we'll fit on the screen so we can copy our icon button paste it here and change our arrow back ios to search and the search item is really small so we can change the size to something like 33 okay 32 sorry same as the bottom bar and now it's almost done the next thing i want to do is to clean up our ab structure a little bit this will not be a tutorial on how to structure your app but let's clean it up a little bit so let's get on our bottom navigation bar and get on refactor extract widget and name it custom platform so we can delete the constructor because we won't need it in this tutorial the next step is to extract our app bar but you will see we will get an error pretty soon custom apple and this is because our custom fba has to be off type app bar and not the status widget so now we will have no errors here but as soon as we save we will get a problem down up here because our apple is just plain blue to solve this problem we first have to delete everything of this and name this the custom mapper and we have to call our super what this will do one this is too much so and well what this will do is to call our app bar standard apple and just add this properties or widget or whatever to our standard so let's clean up a little bit next step we could do is clean up our background which as well we call it custom background delete our constructor as well but in this time we will need the constructor because our background will have a container or the content in it so we will write final widget name content you'll see we get an error but you can create constructor for fun fields and delete the key key as well because we don't need this in our tutorial and now we have our content and we can go down here to a child content and whatever content we will pass in here will show in our child so next step is to add our content sort of content container and this container oh yes okay this container will have the decoration box decoration color color white and border radius of border radius dot circular 50 so we will have a white container for our content to show on the borders the next step we can do now is to take our container and extract it so content call this content container we delete our constructor here as well save and you can see everything is fine in our home screen widget is pretty structured and easy to read the next thing is to write our content container so the name of our app to start this we will add child column because we want multiple items or widgets under each other so with column list widget and the first one will be circle avatar let's give this radius 200 and a background color of second color set up down to 50 so it's a little bit lighter we will come back to this because we want to add our slider around it but we will do this later because we have to add a new custom package to download and to add to achieve this so first we have our placeholder like this and we'll come back to it later next step is to add our text this will be a rich text because we want to have multiple text items together so we have the text and this text is inner space oh sorry first of course we have to add text spam and in this text pane with the text this space um our inner space then the next thing you want children or in our case we only one child text spam and this is grey list and we have one text span [Music] of text and this text is oh first we have to change our color of course so here just write style text style of color main color so now you can see we have our rich text with our inner space and the span of live graphic view the next thing is to get our light grid to the new line like this and to change our text line to text align dot center because we want to click center now we can style our text a little bit so go here style text style and our text will be a font size of 0.5 a font weight [Music] font oh 100 or font weight of 700 and the letter spacing of two like this oh like this next part will be our forward backward and pause button so this will be row so let's just add a row here children and our children will be an icon button [Music] icon icons dot arrow back ios on press will be empty our color you can change the color here or color will be main color 100 like this back arrow you can duplicate this and change back to forward like this so then the next step is have a circle avatar radius 25 this background color of our second color dot with ever let's try something like 150. it looks pretty decent and our second outer oh not here here child and this giant will be an icon i can not pause like this [Music] now change for color colors dot white okay and the next step is in our row you want to align it main axis alignment main axis alignment space evenly like this so the next part will be our volume up and down row so we can just take this complete row copy it this and change our icons first so look at this and this will be boiling mute and this one will be volume up yes our circle avatar gets deleted because we want slider and not a circle again so we have to add slider slider with some value of let's say 100 the min value 10 and the next value of 200 on change this will be empty like this with our slider the next thing we have to change this scene color of it so attack slider grab some widget and name this slider c slider thing data file data property of slider sim dot off context dot copy with and what it does is it takes a standard slider scene but change everything that we write in it so we don't have to write a completely new scene but we can change whatever we want and what do we want to change we want to change our active track color to main color so our active track is purple now then we want to change our thumb color to main color so some color is purple too and then we want to change our inactive drag color to main color dot in this alpha and again it's something like 100 purple this one is finished the next thing we have to do is to go up here into a column and change the main axis alignment to main axis alignment space evenly so this will space around here one thing we want to add is in our container and we want to add the heading of edge since it's all 25 so just will etch a little bit in the next thing is to get our slider around the circuit avatar it's pretty easy and straightforward all we have to do is to go in our pubspec.java file and add a new dependency it's called sleek circular slider and the version number is 1.1.0 so let's save it and what we have to do now is first to comment this out anything is sleek oh sleek circular slider okay and you need to import your sleep circular slider.fire if it doesn't happen automatically so and then we have to change something here first thing we have to set our appearance so how we want to look like it's a circular circular slider appearance and we need to size and we want to set our size responsive so we take the whole screen size and multiply it by 0.85 so we get 85 percent of our whole screen size our start angle would be minus 90 and our angle range will be 360. okay our customers of the line custom slider with size 10 and progress so the next thing is custom colors because you want different colors not standard so cut them slider colors progress bar color main color and our dot color is main color as well if you don't need which properties you have can just hover over the widget you want to know and here you see our progress bar colors and our dot column so the next thing is um here we have a min oh i'm getting an arrow because i'm one like this and a min of zero max of 360. okay 360 and an initial value of 90. so you can save this now and we can restart our app it's very important to completely end and restart your app when you add something new to your prospector yama fire because the hot blue flash won't work for this so this will take some time again and now we have our slider of course we don't want our 90 percent in the slider but we want to show our circle avatar again so to do this we have to write in a widget which will have value we don't need but you could show the value like this in a widget whatever you want so in our case we will return our circuit avatar like this okay should get oh and now our radius should be responsive as well so media don't really really thought of context dot size dot twist multiplied by 0.35 so the radius you have to double so we have 0.7 0.7 it's good to have some space here but for this we have to wrap our circle avatar in the center widget safe and then we have our perfectly aligned slider around our circle avatar this was the first part please comment or ask whatever you want and stay tuned to the second part

Channel: Steven Dz

Views: 2,491

Keywords: Flutter, Speed Coding, UI, Navigation, BottomBar, Tutorial, Beautiful UI, Basics

Id: 8eOpWTU-coI

Length: 32min 46sec (1966 seconds)

Published: Mon May 11 2020