Flutter UI Tutorial - Designing Modern College Dashboard UI Design App

hello guys how are you today my name is Abdullah Evan from elisha and welcome back to my youtube channel so today's video we are going to learn how do we create or how do we design dashboard UI design in our flat top project so let's get started [Applause] first of all I want to say sorry for my English is not good so if the word I use are incorrect please help me to point out first thing first we need to create new flutter project or we can open our existing flutter project so right now I create new flutter project and we named a flutter project as Dysport UI app and just press next next again alright so this is our flutter project and for the very first as useful we have something like default code so firstly we need to delete this test directory and we need to delete all code inside our main door that and because we want to create from scratch so we say 5 min and we want to run our app so inside this run app we say my app and we need to create stateless widget we name it as my app so we need to return Metro app and inside this metal app we say the back so jacquard mode we say false and again home we say home screen so we need to create new home screen right-click inside our lib directory that file and we say home screen and inside this with a stateful widget and we name it as home screen and as usual we need to call our Metro and we back to main total again and we need to import our home screen alright and let's run our app alright so this is our app and our test kind of like black screen or plain screen alright so because we use corner and when we use container and when we don't set head or weight it will be entire screen so we need to remove our container and we say scare fall which and when we restart it will be white screen right now and inside this careful widget we can add many properties one of them is a bar button application bar and much more so right now we want to focus on body and for our body let's say we want to use stack widget because we want to add some it's relative with another widget let's say we want to add image widget pillow of our text widget and others so before that we need to create or we need to import our assets file which is image phone and much more so to do that we need to right-click on top level of our flutter project and we create new directory and rename it assets and inside this assets folder we create new directory again we name it as fonts and one more we create new directory we name it as images alright so you can download all the assets file link in the description below so the first is fun just copy and paste inside our assets folder press here and right now we see our phone and the second assets is a big run copy paste inside our images alright so the next step is we need to go to our perspective ml and we can scroll to see the documentation how do we add assets to our project so right here we can see assets and we say this is assets and what we need to select here is our directory which is assets slash in this slash top underscore hitter all right and we scroll to the bottom and we see fun family fun again and look at this I think we need to copy this and I think we pass right here and uncomment this and I think we need to make it look like this I think family indentation inside our ml file it's so important so carefully so I think so we can call our fun track here the first is I think assets slash phones slash one side and [Music] regular dot EDF and we see and for the family we say one Sarat regular and just pop get alright so process finish with exit code zero so I think we need to add another family with family and we say one Sarah medium and for the phones we say as such funds and we say Monserrat medium dot EDF and just pop get again alright we say process finish with at with exit code zero it's mean that we have thankfully and we can call our assets file in our project so inside our stacked widget we can use let's say we can call properties which is children and entered our children we use some widget inside ed the first widget is container and for our container we set the height to be 64 sixty-four I think we need to make it to be 30% of our screen so we need to create new variable we name it a size and we set it to be maybe a quarry and we say size so instead this head we say size dot head and times to 0.3 which is it will be 30 percent of our entire head screen and below that we say tile and for the tile we use not child I think a decoration and for the decoration we say pock decoration and it's a despot decoration we can use image and we say image decoration or decoration image all right and I'm set this decoration image we say image and with assets image because we want to use image from assets folder so we say like your assets / images / top either dot PNG and just hot reload and we see our image but we see I think it's wet so to do that inside our decoration image we say alignment and we make it to be top center top center and just hot reload and boom alright and the next step is we want to add another widget which is right here is user image and on the right side is our user name and user ID so to do that pillow of our container which again we say column because we want to add some widget so instead of a column the first widget is a container so we say children and with container and inside our container we say or we set the height to be sick Steve for and for the child we say ro and again with children and inside this row we want to add some widget on the right side we want to use text widget and on the left side we want to use circle avatar and for the background image we call network image and we say we need to use random user so I think like this just copy image address and press right here and just hot reload and we see and I think we want to set the radius to be 32 and hot reload it's bigger than before all right on the right side we want to add text widget so it's column because we want to use some widget and the first widget is text widget and we selects a ternary car and the second widget text again and with user ID it's kind of like a dummy all right look like this but I think this is very very bad because our let us devise our current device have not so to do that we need to wrap our column widget right here and we need to wrap this column Richard with safe area and when we press this hot reload and it will be on the safe area we need to wrap column widget again and we need to wrap with padding and we set it to 16 all right I think it's more beautiful and again for our Richard we say I think right here we say cross axis alignment we set it to start all right for our column widget we see main axis alignment and we set it to be Center all right so it's Center and for the cross occurs alignment we set it to be start alright look like this so I think we need to some margin so we use a size book and for the width we set it to 16 and hot reload and we have some margin all right so I think we need to make our text widget to be more beautiful so we can use style and for the textile we can say let's say the first is fun family and we use monserrate medium and hot reload note things appear so we can see on top spiky mo so we see we need to copy this and paste right here and I think we need to restart our app alright still not working so let's do another let's say color alright make it bigger so we say font size set it to 20 all right so I have fixed the problem so after I stop the app and restart it will be fixed a rack so let's jump to another step so the next step is we want to add some cut view which is we want to use something like crib or grid view so inside our column widget and pillow of our container we say create view and we use grid view town and for the cross access can we set it to 2 & 4 another properties is the first is - is spacing with a 210 cross axis passing set it to 10 and for primary we set it to false and for the children we use cout and inside this card which we want to use or we want to set as we G factor or SVG image so we need to add new dependences to our flutter project that is flatter SVG and just press installing and copying this and we put two under studio and we go to pub spec mo again and I think right here we pass flat our SVG pub cut again and still working and we see as it cost zero it's mean that we have successfully imported flat SVG and I think we need to call rack here we need to call flat or SVG and inside our cut we can call SVG which is till and we for the tile we set it to column and we say children and with SVG picture that let work because we want to use SVG pictures from internet so this is the link and copy inside dead and I drew lot so it won't see anything so I think we need to wrap this widget with expanded and add reload and we see and we see buttom Auto flow blah blah blah and inside this SVG picture we can say for the width or for the head reset it to 128 all right look like this and I think we can give margin I think right here so we need to go to our ID container and below this head we say marching and it's inset only button we set it to something like 20 all right look like this pillow of our SVG icon we want to add text widget and with personal data and hot reload and we see look like this and we go to our column and we said alignment which is cross axis alignment or I think main axis line one we set it to Center and now our SVG icon and our text widget Center horizontally all right and I think we want to make our text widget to be more beautiful so we need to create new variable and we can set like fun family and much more but before get inside our cut widget we can use elevation and we set it to before look like this so we need to create new variable and and let's say we set it style and we say for textile and we say let's ake our textile and we assign with textile where is okay and inside that we say fun family and with I think regular and now we can call our style inside our cut with chip with a style card textile and hot reload and now we see and the next step is we can sign the size 14 and for the color we set it to color RGB oh and that's 63 6363 and set it one and huddle it again all right clock like this and the last step is we can make it to be around it so we go to cut again and we can set shape and let's say border and I think around each rectangle water and inside that we say border radius and we say border radius circular we set it to be eight and look like this so the next step is we can duplicate this cut widget five times so I think right here duplicate so we have four two again Iraq and let's sing this and let's sing icon and let's saying as we dealing or SVG resource all right look like this and we can customize this card with you and we can customize our grid view we can make it three item horizontally and much more so I think that's enough my video today and if you have any questions or comment add it to an under comment fill and if you want to download source code link in the description below thank you so much and see you again on the next video

Channel: Abdul Aziz Ahwan

Views: 73,323

Keywords: education, programming, ui, design, tutoial, c#, java, vbnet, visual, studio, abdul, aziz, ahwan, unnes, indonesia, pekalongan, programmers, flutter, developer, android studio, dashboard, modern

Id: IqFP7jY_enc

Length: 19min 25sec (1165 seconds)

Published: Tue May 05 2020