Flutter UI Design Series | Episode 1 | Flutter UI Design Tutorial

[Music] hey hello friends and welcome to the first episode of the flutter ui design series on retro portal studio in this video we're going to be taking a look at creating these two screens for a real estate app the design inspiration for these screens was taken from a post from ui bucket on instagram the link for the post is in the description below all the images that we're gonna use in this project are taken from unsplash.com the links for all these images can be found in the credits.txt file that you can also find in the project so let's get started okay so right now i'm in a black flutter project in which i have done a bit of a setup you can see that in the lib directory i have this utils folder in this i have these four files so let's first take a look at what each of these files does let's start from constant start dart in this you can see that on the top of this file i have these four constants these constants are for each of the color that we're going to use in the application you can see that we have a color black color gray color white and color dark blue along with this i also have this text theme default this is an instance of class text theme in this i have described separate textiles for each of the heading from 1 to 6 along with body 1 body 2 subtitle 1 and subtitle 2. by describing these text styles in this theme we don't have to write the text style for each of the text view that we add to the application and we can just use the default textiles that we have for the whole application one thing you can notice is that in body text 1 and body text 2 we have this property of height the reason for adding this property is because body text 1 and 2 are going to be used in paragraphs and in paragraphs we want to control the height of each line along with this default theme we also have this small theme that is called text theme small this small theme is just the same theme with small font sizes the reason for adding this theme is to control the font size of the application on smaller devices we'll take a look at how we can choose the text theme according to device size in this main.dart file but first let's take a look at this custom functions file here you can see that our function called format currency which takes in an amount and an optional parameter of decimal count and also you can notice that i'm importing a package called intl.tart i've added the package to the pubspec.yml file and this is really a great package for formatting strings date and time and so on also i have the sample data this sample data is a list of objects and in each object we have properties such as image amount address bedroom and so on and we're going to use this list to replicate the data that we actually get from the apis the next file is this widget underscore functions in this you can see that we have two functions one is add vertical space and the other one is add horizontal space this add vertical space function takes in a height and it returns a size box with that particular height same with the add horizontal space which takes in a width and returns a size box with the same amount of width i have added all these files to make the process of creating ui a bit easy along with these files i also have this assets directory in which i have fonts and images for the fonts i'm using the monsterat font and for the images i have these sample images to use in the application all the assets have also been declared in the pub spec.yaml file so let's take a look at this main.r file in the build function of the my app you can see that i'm getting the physical size of the device by using this window.physicalsize property this window object is coming from the dart ui class that i've imported in the main.dark file and with the help of this we can actually get the physical width of the device in pixels the reason we need this is because in the theme property we're giving it an instance of theme data in the theme data i'm giving the primary color of color white the accent color of color dark blue and for the text theme i'm using this screen width and if the width of the screen is less than 500 i'm using the text theme small or else i'm using text theme default also for the font family i'm using the monster ad fonts by simply using the name that i've described in the pubspec.yml file now that you know how the project is set up let's take a look at creating those screens we'll start with screen on the left and the first thing that we have to create are these icon buttons one thing you can notice is that all the icon buttons on this screen and the other one follow the same design along with the icon button you can see that on the second screen there is house information and in the house information there are different tiles and each of the tile follows almost the same design as that of the icon button from this we can plan is that if we create a separate widget for the icon button we can reuse that in the favorite button and also in the house information so let's create the base of the first screen and this custom icon button widget back in the app the first thing that i'll do now is i'll go to the lib folder and here i'll create a new folder and call it screens in this screens folder i'll create a new file called landingscreen.dart in this landing screen dot r i'll create a new stateless widget and i'll name this landing screen on the top of the file i'll import material.dart and in the build function i'll return a new scaffold for the body of scaffold i'll pass in a container and for the width and height of this container i'll go to the top of the build function and here i'll create a new variable called size and put it equal to mediaquery.offcontext.size we'll add the width and height to the container and for the child of container i'll add a column i'll open the design on one side and now that we have a base for the landing screen let's add this to the main.dart file for the home property you can see that we have the landing page here and i'll replace this with the landing screen now for creating this custom icon button i'll go to the lib folder again and here i'll create a new folder and i'll name this custom and in this custom folder i'll create a new file called border box in the border box i'll import material.dar and i'll create a new stateless widget and i'll name this borderbox in the design of this border box you can see that we have a child and we also have some padding along with these two we also have to give it a width and height so i'll come to the border box and here i'll add the property of child along with child i'll also add a padding which is going to be an instance of edge insets and along with this i'll also add a property of width and height which is going to be of type double now let's create a constructor with all these properties so i'll go to the height and i'll click on alt enter and here i get an option for create constructor for final fields i'll click on this and you can see that now we have a constructor with padding with height and child in all these properties we want the child to be required and i'll move it to the next line once this is done i'll go to the container in the build function and here i'll add the width and height along with this i'll add the decoration property and for this i'll pass in an instance of box decoration you can see that the background color of this icon is white so i'll add the color property for the box decoration and i'll set it to color underscore white this color white is coming from the constants file in the utils folder and for the next property i'll add the border radius for the border radius i'll pass in photoradius dot circular and here i'll pass in the value 15. along with the border radius i'll also pass in the property of border and for the border i'll pass in border.all and here i'll pass in the color of color underscore gray which is again coming from the file of constants and for this color gray i'll change its alpha with a function with alpha and here i'll pass in a value of 40. along with this i'll pass in a width that will be of 2. by the way i'm not guessing the values for these properties because i've already made the project once so that i don't have to hit in trial while recording the video along with this decoration i'll also add a padding property and for the padding you can see that a value is not compulsory for the constructor so what i'll do is i'll add the padding and along with this i'll add a null check with double question mark and if the value of padding is null i'll try a new constant that will be of edge insets and here i'll pass on the value of 8.0 now for the child of the container i'll add the value of child and i'll wrap this child with a new center okay so now we have a custom border box that we can use in both of our screens in this we have a child property and along with this we have a padding property that is going to space this child nicely in the center of the widget and the width and height property will help us to make this border box in whatever shape we want once the app runs you can see that we have a blank screen right here so i'll go to the landing screen and here i'll wrap the scaffold with a safe area now when i save the app you can see that now the app does not cover the area of the status bar in the column i'll add the children property and in this i'll add the first child of a row we need a row here because we want two icon buttons on opposite ends of the screen i'll add the children property of the row and in this i'll add the first child of border box this border box is the widget that we just created in this border box i'll give it a width and height of 50 because we want this to be a square now for the child property i'll add an icon and in the icon i'll use the icon of icons dot menu with this i'll pass in the color property and set its color to color underscore black at this point when i save the app you can see that we have the icon button on top left of the screen i'll copy this portal box and i'll add this as the second child of this world for the second child i'll change the icon to settings but at this point both these icon buttons are aligned to the top left corner of the app for this what we can do is for the row we can add a new property of main access alignment and set it to main access alignment dot space between with this when i save the app you can see that both the icons move to opposite ends of the screen now in the original design you can see that there is a nice space between the icons and the edges of the window for this what we can do is we can come up to the build function and here after the size i'll add a new final variable that will be of type double and i'll name this padding and i'll put this equal to 25 now i'll come down to the row and i'll wrap this with a new padding for the padding i'll replace this edge and set start sets.all and instead of all i'll add symmetrical and for the symmetrical i'll add the horizontal padding and put it equal to padding and because this padding is a variable i cannot use this const keyword the reason i've declared this padding in top of the build function is because you can see in the design we have equal amount of space between the text the icons and all the other widgets on the screen so it will be easy to just use the padding variable instead of typing 25 every time next thing that we need to do is we need to come at the end of the padding and here i'll add the add vertical space function and this add vertical space function is coming from the widget functions in the utils folder for the height i'll use the value of padding and now i'll add the text of city and san francisco first i'll add the text of city using the text widget now for the style property of text we need to add the theme data that we added to the application in the main dot dot file for this i'll go up in the build function and here after the size variable i'll add a new variable that will be of theme data and i'll put this equal to theme.offcontext now i can come down to the text and here i can use themedata.txtheme and for city i'll use the text theme of body2 and at this point if i save the app you can see that the city is in the center of the screen the reason for this is because by default the cross axis alignment of this column is in the center so for this i'll come up in the column and here i'll add the property of cross access alignment and i'll set its value to crossaccessalignment.start also you can notice that there is no space between the icon buttons and the top of the screen to solve this what we can simply do is we can come to the column and here we can add a vertical space and for the vertical space i'll pass in the value of padding now you can see that both the icon buttons have nice spacing around them but the text here is touching the left edge of the screen for this what we can do is we can come down to the text widget and i'll wrap this with a padding and for this we can pass the same value of padding as that of this row so what i'll do is i'll take the edge inserts from here and i'll go to the build function and here i'll create a new final variable and i'll name this side padding and i'll put this equal to edge and sets dot symmetric and give it the horizontal padding now what i can simply do is i can use the side padding as the value for padding for this row i'll add the same padding to the text also and now when i save the app you can see that the text and the icon button are aligned properly now in the same way after the city i'll add the text of san francisco and in this i'm using the text theme of heading 1 and after this i'll add the divider with same amount of padding at this point if i save the app you can see that everything in the screen is perfectly aligned one thing you can notice is that i'm giving the separate padding for each of the widget instead of giving the padding directly to the column widget right here the reason for this is quite simple so let's take a look at the design in this you can see that below the divider there are different filter options and these filter options are scrollable and if we add padding to the whole column the padding will also be applied to the scroll view and then when the user scrolls the content of these filters will cut when they reach the padding so just for the look and feel i have added a separate padding for both the text widgets and this row now let's take a look at creating these filter options for this i'll come below the divider and here i'll add the new widget of single child scroll view for the scroll direction of the single child scroll view i'll pass an axis dot horizontal because we want the filter options to be scrollable along the x-axis now for the child of the scroll view i'll add in a row and for the children property we have to create a design that we can use for each of the item in this filter for this i'll come down below and here i'll create a new stateless widget and i'll call this choice option in this choice option i'll create a single property of text i'll click on text and click on alt enter and now i'll create the constructor for this field in the container i'll create a new decoration property and in this i'll pass in box decoration we need a decoration here because we want to round the corners of this container so first i'll add the border radius property and i'll give it a border radius of 20. then i'll add the color property to this box decoration and i'll set the color to color underscore gray and i'll set the alpha to 25 along with this after the decoration property i'll add a padding property and i'll give this container a horizontal padding of 20 and a vertical padding of 13. next i'll add the child property to this container and for this i'll add the text widget and in this text widget i'll pass in the text that we get in the constructor next i'll pass in a style for this text and for this style i need to get access to the theme data for this i'll come up in the build function and here i'll create a new variable called theme data and put it equal to theme dot off context now i'll come back to the text and here i'll use theme data dot text theme dot headline five now what i'll do is i'll come up to the row and here in this list i'll add four different values for the filter to adjust the spacing i'll take this to the next line and in the end i'll use the map function of the list and i'll rename this e to filter as we map through each item in this list we can simply return a choice option for each choice option we need a value of text and for this we'll simply pass in the value of this filter i'll reformat the code and i'll bring this map to the next line now at the end of the map we want to return a list so what i'll do is i'll use the to list function of the map and now we have all the errors gone so i'll bring up the emulator you can see that we have all the filters on the screen and the list is scrollable but at this point there is no spacing between the filters now we can solve this problem in multiple ways but the best way would be to give left margin to each of the item with this the very first item of the list will be aligned to all the other items on the screen let me show you what i mean so i'll come down to the choice option and here just after the padding i'll add the margin property and for this i'll pass in edge insets and i'll use the only constructor of the edge in sets and here i'll pass it left and give it the value of 25 the reason i give it the value of 25 is to align it to the padding of all the other widgets at this point if i save the app you can see that all the items of the filter have nice spacing between them and the first item is aligned to all the other items on the screen one thing we need to do is we need to add some spacing between the divider and the filters for this i'll come up to the row and above the single child scroll view i'll add a vertical space and give it a value of 10. now the next thing that we need to do is we need to create a list of available house options for this i'll come below single child scroll view and here i'll add a vertical space of 10. now i'll create a new listview.builder and in this we have the property of item builder and in this item builder we need to pass in a function which gets a context and an index in the body of this function we need to return a widget at this point i'll just return a simple text and in this i'll write item for the item count property of the listview.builder i'll pass in redata dot length this re data comes from the sample data in the utils folder and at this point if i save the app you can see that there is nothing on the screen and if i take a look at the run window you can see that there are a bunch of errors basically what's happening is that list view is a scrollable widget and it requires a fixed area to scroll through the items but what's happening here is that we have a column for the whole screen and the column can take infinite height and because list view is the child of the column now the list view does not have a fixed height to control its scrolling behavior well there are many solutions for this but what we'll do here is we'll wrap the list view with an expanded widget what this does is that it gives the remaining space of this column to this list view at this point if i save the app you can see that the text items are visible now i'll wrap the list view with a new padding widget and for the padding i'll give it the same value of side padding now what we need to do is we need to take a look at creating this list view item for this i'll come down in the window and here i'll create a new stateless widget and i'll name this real estate item in this i'll create a new property of item data and we'll also create a constructor alongside and for this the item data is required next in the builds function i'll add a new variable of theme data and in the container i'll add a new child property of column we want a column here because we want the items to be aligned in a vertical fashion so the first item is going to be an image view and that image view has a favorite icon on the top right hand corner for this i'll add the children property of this column and here i'll pass on the first child of stack and here for the first child i'll add image dot asset and now we need to get the path of this image from this image data and we can simply do it like this the next thing that we need to do is we need to add a position widget and this position is to add the favorite icon on top right hand corner of this image so for the position i'll add in the child of border box and this is the widget that we created for the top icons for the border box i'll pass in the child property and here i'll pass an icon for the icon i'll pass in icons not favorite border and for the color of icon i'll pass in color underscore black now just to take a look at it let's bring back the emulator and i'll come back to the list view and here instead of the text i'll pass in real estate item and for the item data i'll pass in redata and to this i'll pass in the index at this point if i save the app you can see that the items do appear but we need to format them according to our design so what i'll do is i'll come to the real estate item and i'll give this position a top and right property for the top i'll pass in 15 and for the right i'll also pass in 15 and also for the border box i'll give it a width of 50 and a height of 50. you can see that the border box icon appears on the top right of the image now what i'll do is i'll wrap the image with a new widget and this widget is going to be clip or wrecked we need this clip or erect to clip our image with a border radius for this i'll add a border radius property to the clip erect and for this i'll pass in a border radius of 25 at this point if i save the app you can see that the design looks good next thing that we need to do is we need to add some space between the items for this what i'll do is i'll add the margin property to this container and for this i'll add a vertical margin of 20. now let's take a look at design for a moment here what we need to do is we need to add a price text and just after that we need to add the address so here we need to add a row to align these items i'll bring back the emulator and just after the stack i'll add a new vertical space and give it a height of 15. next i'll add a row widget and in this row i'll add the children property and here i'll add the text widget and give it the text of item data's amount i'll also write the style property for this text and i'll give it a value of themedata.txtheme.heading1 at this point if i save the app you can see that the amount appears but not in the correct format for this what we can do is we can use the format currency function and for the amounts we can pass in the value of item data amount you can see that the amount is formatted with a comma and a dollar sign is added as the prefix of the amount this format currency function comes from the custom functions in the users folder for the second child of the row i'll add in a text with item data address and i'll give it a style of theme data text theme and a style of body text too in between these texts to add a bit of space i'll add a horizontal space of 10. you can see that both the text widgets are properly aligned just after the row i'll simply add a new vertical space and give it a value of 10 and after this vertical space i have added a new text with the number of bedrooms bathrooms and the total area of the house also i've given you the style of the heading 5 and at this point you can see that the text in the second line appears in the center of the screen for this what we can do is we can come up to the column and here we can add the property of cross access alignment and we can set it to cross access alignment dot start i'll save the app and the screen is almost ready now to create this bottom button i'll come up to the custom folder here and i'll create a new file and i'll name this option button in this file i'll import the material.tar and now i'll create a new stateless widget and i'll name this option button as you can see that in the button we have an icon a text and we need to give this button a particular width for this what i'll do is i'll add three properties to this option button one will be the text the second is icon and the third is the width along with these i'll add a constructor and then the builds function instead of this container i'll return a flat button now for the minimum width of this button i'll pass in width for the color i'll pass in color dark blue and i'll import this color from the constants file to give this flat button with rounded corners what i'll do is i'll use the shape property and here i'll pass in rounded rectangle border and for this i'll pass in a border radius and i'll give it a value of border radius.circular with a radius of 50. next i'll pass in the padding property and i'll give this button a horizontal padding of 20 and a vertical padding of 15. and for the childs of this flat button i need to add in a row so the reason we need to add a row here is because we want the icon and the text to appear along the x-axis so for this row i'll add in the children property and here for the first child i'll add in an icon in this i'll pass in the icon that we get in the constructor and for the color of this icon i'll pass in color underscore white after this icon i'll add some horizontal space and for the third child of this row i'll add a new text with a value of text that we get in the constructor and for the style of this text i'll pass in a text style and for this i'll give it a color of color underscore white now i'll come back to the landing screen to get this button at this particular position we need to wrap the whole screen in a stack and then add this button as the second child of the stack for this what i'll do is i'll come to the top of the landing screen and here i'll select the column and i'll move to the end of the column and from there i'll select the complete column widget now i'll cut this column and instead i'll pass in a stack now for the children property of the stack i'll pass in the first child of this column and for the second child i'll pass in a positioned widget now for the child of the position widget i'll pass in the option button that we just created and in this option button i'll pass in the icon that will be of icons.map rounded for the text i'll pass in map view and for the width i'll pass in size dot width into 0.35 which is equal to 35 percent of the width and at this point if i save the app you can see that the map view appears but it is at the top of the screen and it's taking the full width of the screen to solve this what we can do is we can come to the positions and here i'll add in the bottom property and give the value of 20 and i'll also give this position a value of width and for this i'll pass in with i'll save the app and you can see that the map view moves to the bottom of the screen to fix this issue with the width of the button what we can do is we can wrap the option button with the center widget and now we can move the option button and we can wrap the flat button with a new container and here we can pass in the width property and pass in the width we can also remove the min width from the flat button and now if we save the app you can see the map view appears in the center of the screen at this point if we click on the button there's no ripple effect for this what we can do is we can add a splash color to the flat button and here i'll pass in color underscore white dot with alpha and i'll pass in the value of 55 i'll save the app and now if i click on the button you can see that there is a ripple effect on the flat button with this the first screen of our ui is complete but when i scroll to the list the scrolling is not smooth for this i'll come back to the landing screen and here i'll come down to the list and to the listview.builder i'll add a physics property and i'll pass in bouncing scroll physics i'll pass on the same for the single child scroll view and now if i save the app you can see that when i scroll through the list the scrolling is smooth with a nice bounce effect the same thing happens for the filters on the top and with this the first screen of our ui is complete with this series my goal is to help you in creating beautiful uis in flutter and the best way to learn to create ui is to create it yourself of these two screens i have created the first screen and in this we have created some reusable widgets such as these icon buttons and this bottom map view button with these widgets and the hints from the first screen that we created it will be easy for you to create the second screen yourself code for both the screens will be in the git repository the link for which is in the description below so if you find yourself stuck at any point you can check out the code but first try doing it yourself as this was the first video in the series let me know if you have any suggestions for this series in the comment section below and if you find this video useful make sure to hit the like and subscribe button for more flutter videos coming your way see you next time peace

Channel: RetroPortal Studio

Views: 47,661

Keywords: flutter, flutter tutorial, flutter app, flutter course, flutter tutorial for beginners, flutter tutorial android studio, flutter ui design, flutter ui, flutter ui design tutorial, flutter for beginners, flutter design, flutter app development, flutter mobile app development, flutter android studio, flutter widgets tutorial, flutter widgets explained, flutter design challenge, flutter app tutorial, flutter app design, retroportal studio, ui design tutorial, flutter widgets

Id: Y6xAQVXkhLA

Length: 26min 50sec (1610 seconds)

Published: Sun Oct 04 2020

Reddit Comments

[u/Asmoun41]

amazing content keep up the good work

[u/[deleted]]

Amazing

[u/djerrund]

Will you cover an interesting page transition for these two screens? I know how to use Hero animations to get the photo to move from one page to the other. But after that I'm always confused on how to get the rest of the content to animate in nicely. Would be super cool!