Build a Design System in Flutter | How to build a UI package

one of the core principles of clean code is dry don't repeat yourself this applies to all code written watch the rest of this video and over the next 10 minutes you'll see how you can set up your app's design system to reduce the amount of code window in your application's ui this makes it easier to achieve a consistent design look throughout your application as you expand welcome back to episode 10 of the building a full delivery service series this episode like all the others can be watched on its own but if you want to see how we build the code that we are using in this tutorial make sure to head over to github.com forward slash full stacks forward slash box start in addition to that you can watch the videos starting from the first episode in the playlist i'm linking in the top right corner today we'll be building our design system ui in a separate package this is not required but the reason we are doing this is because we will use the same design system in the other three apps for this product this will make it easier for us to share all of those widgets and styles later on this also gives you a clear separation between your ui and your logic since i'm recording this video literally a few hours after the flutter announcements that i couldn't watch because i was sleeping i'm gonna upgrade to the latest flutter before we start this will make sure that when we create our package we don't have to convert it to null safety afterwards when that update completes we will create our new flutter package to do that we'll type the flutter create command set the template to package and give it a name box ui then we'll navigate into the box ui folder and we'll create an example project then we'll open this up in visual studio code the first thing we'll do is make sure that our example is using the package that we're about to build because that's how we'll know what we are building so open up the pubspic.eml file in the example and you can add box ui using a relative path to navigate back one directory then we want to set up our package so that when we press f5 on the keyboard it runs the example project and not the box ui project to do that we'll go to our debug tab and then we'll click on the create a launch.json file and then we can remove one of these configurations because one of them don't work we'll remove the first one and we'll update the name of this configuration to box ui example actually we'll do box ui playground that's all the setup done now when you press f5 during development of your box ui project you will start up the example app we will showcase all of the widgets that we are about to build let's go over the design system and what it actually is it's a style guide that helps you build consistent ui as you grow your app and add new functionality you get detailed and you get simple design systems in both of them there's a few things that has to be defined in order to qualify as a design system at least for us when we request designs for from a designer number one is describing the text styling used in the design fun family the front which for the title title two title three the headings all of those things we need to know the buttons that are used within the apps how the buttons look how they look in a busy state in the enable state the disabled state and any other state that they might be third thing is the input fields showing all the states input fields usually as leading items and trailing items if it's disabled or not some items can be interacted with all of that needs to be shown once you have those things we can you can start building your design system separately and then just reuse that within your app in this tutorial i will go through building some parts of this so that we need for the ui that we have already built we'll cover the text styles the main button the outline button and the input fields that is enough to align our current code with the designs that we have let's start with the code in the box ui lib folder we'll create a new folder called source that will contain all the package code that we don't want to be visible outside of the package unless we expose it we'll start by creating some shade styles based on the textiles defined in the design system we'll create a new file in source forward slash shade forward slash styles so as you can see on the styles we have the font family we have the weight as well as the size of that font and we'll use exactly these values and we'll just create a few text styles in our shared file we have our heading one text style which has a font size 34 and a font weight of 400. if you don't know what the font weights are if you navigate into the actual definition you'll see 400 is for regular then you get medium semi-bold bold and extra bold this is what we'll use when we set our custom fonts inside the app because that's not required to be set in this package at the moment then you can copy that reading style and create two more heading two and heading three and for adding two we'll do font size 28 and font size 24 for heading 3 with a font weight of 600 for both then we'll create the headline style with a font size of 30 and a font weight of 700. next up is body style sub-editing style and the caption style i don't want to talk through all of this because you can just see it in the written tutorial which is over on fullstacks.com now that we have our styles defined we can build the text widget that we want to use to make use of these styles we'll create a new file inside the source folder inside a new folder called widgets and we'll call that file box text dot dot so a small naming tab for packages if you're building a ui package and you want the autocomplete to be on your side and not fight against you you should prefix all of your class names with a unique identifier that will help the developer know which widgets are available specifically from your package in this case i'm going to append all the class names with box so that when you type box in your code base it'll pop up all of the widgets that's related to our package we'll have one single text widget for all of the text styles and we'll use name constructors to make sure that we are using the correct text style so we'll start off by creating a stateless widget the only thing that this widget will return is a text widget now we can create those two values text will be passed in through the constructor style will be set based on each of the name constructor the first constructor we'll create is for heading 1 we'll set the style for this constructor equal to the heading 1 style then we'll repeat this for the entire set of styles that we have created heading 2 will do the same thing the same for adding three and you get the point i'll just paste in the rest of the code the only one that we will not be adding this for is for the body text and that is because the body can be different colors as it's been shown in the designs for the body constructor we'll create the same named constructor called body this will take in the text as well as a named parameter called color we'll set this to the default body text color which will be our medium gray color which we haven't created yet so i'll just add the variable name in here and we'll create it afterwards another way that we'll set our style is by using the copy with function on this style we also cannot use a const constructor for this so i'll remove the const value that's basically all we need to have a completely styled text widget now we know where we need text we're going to use box text and use one of the name constructors to create our text styling next up we'll create our app colors file that will store all of the colors that we need inside the app this file will go into the shared folder and it's called app colors we'll import the material package and then we'll create our primary color using the hex code 2 2 a4 5d we are using a naming convention using the letter k to indicate that it's a constant and we're using the letter c after the k to indicate that it's a color this way when you type kc in your code base you'll get all of the colors that you can use within that code base then we're going to add three gray colors medium gray light gray and very light gray the medium gray color is eight six eight six eight six the light gray color is e5 e5 e5 and the very light gray color is f2 f2 f2 now we can go back to the box text file and we can import our color file to show how this will work let's open up the example project and we'll add in our example text we just to show what kind of text styling we have in the app we'll go to the main file from the example and clear it out and then we'll set home equal to a new file that will create called exampleview then we'll create the new file called exampleview and this will be a normal stateless widget that has a scaffold in it for the body of the scaffold we'll have a list view with a padding of 25 horizontal and 30 vertical then for the children we'll just add the box text heading 1 and put the value design system this is just so that we can see how it looks and we'll follow this example as we add more functionality into the package as you see this is trying to import the box text widget directly and for packages you want everything to be exposed through your package file so this should be changed to box ui dot dot but because we haven't exported anything the box text is not available so we'll open up the box ui file we can delete the calculator class and then we can export the box text file now if we import the box ui file we should get the box text widget if you run this code now you should see the example view with the first heading style next up we'll build the buttons that we saw in the design system we'll create a new file in the widgets folder called box button and that will be a stateless widget for the box button we'll use the normal constructor and then we'll also have a special constructor for the outline button we'll build this button using a normal animated container so that when the colors change we see it animate and not just jump into place we'll start off with a jester detector and the child of that gesture detector will be an animated container we'll give it a duration of 350 milliseconds we'll set the width to double dot infinity and the height to 48. we'll also set the alignment to center then for the decoration we will set the color equal to the primary color and give it a border radius of 8. and for the child of this widget we will set a body text and we'll set the color of that body takes to white then we'll add the title to be passed into the box button and we'll pass that to the box text dot body and that will basically cover our normal looking button which looks like that now i'm going to add the disabled state for this button we'll add a new boolean called disabled that will be passed into the constructor and we'll have a default value of false the only thing that will change here is when we are disabled we want to show the gray and not the primary button next up we can tackle the busy state of the button which is a circular progress indicator in the place of the title of the button so we'll add a new boolean called busy this will be passed in through the constructor with a default value of false for this we'll check if it is not buzzy and if it's not busy we will return the body text if it is busy we'll return a circular progress indicator we'll give it a value color of white and we'll set the stroke width to 8 that covers our main button and i think we will add the outline button text into the main button as well this will require a bit more code and some conditionals within the ball function to help us achieve this the first thing to notice is that this button has a leading icon a space and then the text afterwards let's build that part first we are going to change the button from a box text into a row that has a leading widget a size box of width 5 and then the text style that has that can take in different font weights and different colors so we'll start by creating a row that has a main exercise of min then we'll pass in a leading widget through the constructor and the first child in this row will be that leading widget if it is not equal to now then if we also have a leading widget we want to add an additional space of five pixels between this and the next child and finally we want to add back our title as a text widget for the style we'll use the body style and the reason we are using this and not the box text body is because we need to modify the font weight as well as the color so next up we will pass in a new boolean called outline and it will have a default value of false to finish up the default styling for the text we will call the copy with function on the body style text style and for the font weight we will check if it is not in outline mode we want it to be bold if it is in outline mode we want to return the font weight of 400 and for the color if it is not in outline mode we want to return white and if it is an outline mode we want to return the primary color the last part to do for the design styling of the outline is to make sure that the box is actually outlined so we need to update our box decoration depending on the outline value if it is not outlined we want to return the exact box decoration we have now and if it is outlined we want to set the color to transparent and we want the border radius to stay eight but for the border we will add a border dot all and use the primary color as the color and a width of one then we can go ahead and export this button from the box ui file the last thing we're going to build is our input field there's a state where it has just a normal input field with a gray background and a darker gray border then we have a state where you can add a singular widget on the right which has some touch input as you can see you would be able to tap the password i or you can tap the cancel button in this case so all the trailing widgets will have a touch input and the leading widget will just be added with some padding in front of the text we'll build out the input widget before we build out our example to showcase all of these widgets so i'll create a new file called box input widget we'll import material and create a stateless widget called box input field we'll add a final controller value that's passed into the constructor and we'll pass that to the text field that will return from the build function for the style we'll set our textile height equal to 1 and then we'll start with our decoration we'll provide a input decoration with hidden text placeholder which will pass in through the constructor as well then we'll set our content padding to symmetric insets which has vertical padding of 15 and horizontal padding of 20. we'll set fold to true and the fall color to kc very light gray color to style the border on a text field you need to supply all four borders to the decoration because we need to do that we're going to create a singular circular border and then for each of the borders we'll just copy with and change the color of the border so above the constructor in the class we will add a new final value called circular border this will be an outline input border and the border radius will be set to eight then for each of the borders we will start with the normal border which will be the circular border and we'll copy with a border side that has a color of casey like gray color then i'm going to go ahead and duplicate this value three times then you can update the names to be error border focus border and enabled border for the error border we're going to set the color to colors dot red for the focused border we will use the kc primary color and for the enabled border we will set kc light gray color as well that gives us our normal input field state the next thing we need to do is add our leading widget this will be a nullable widget called leading and we'll pass this in through the constructor then we'll do the same for the trailing widget and we know that the trailing buttons or icons needs to be tappable so we're going to pass in a function called trailing depth the last thing we also want to pass in is a boolean to indicate if this is a password field or not to make use of the password we're going to pass the boolean to the property obscure text on the text field to make use of the trailing widget we're going to supply that to our input decoration prefix icon property for the suffix we will wrap the trailing widget with a gesture detector and we'll pass the untapped function the trailing depth function and if the trailing is null we don't want to send it into a chassis detector we actually just want to pass null to the suffix icon and that is all of these styling and widgets done for the basic things that we wanted to build let's showcase this in the example view so the the last thing we have to do in the box ui package is to export the input field as well one additional thing that i wanted to do is to also copy over all of our ui helpers from the current customer box boxed out application that includes the things for the vertical spacing that i would like to use when i build these example views that we are about to build so you can open up the custom app from the boxed art project you can open up the ui helpers file cut out everything in this file and i will use it in the box ui project we will also export this ui helpers and we'll make use of this in the customer app and remove all of the code in the customer app that we have i'm also going to export the app color so that we have the colors available in the custom app as well you can open up the example view we'll start by adding a vertical space small with a divider and another vertical space small under the current heading then we're gonna expand on a list called button widgets we'll create a new property that returns a list of widgets called button widgets inside of this list i am going to add a title i'm going to add a space and then i'm going to add some body text to describe the button type i don't think this is very reverting content to go through so i'm not going to go through every single line of code that i'm going to add now it is all in the repo you can go look at it there but to save time and sanity for all of us i'm just going to copy in what i have in the written tutorial so that it's quicker because we've already built the widgets this is just showcasing the widgets and i see now that we actually forgot to create the outline widget constructor this is quite a simple constructor we're going to have a required title being passed in we'll pass in an untap function and also pass in a leading widget i also forgot to add the untapped function to the box button itself so it would never have been able to be tapped here we go the constructor called outline will take in a title ontap and a leading widget we know that the outline button has an icon before it shows the title so we pass in that leading widget if we don't it will still send to the icon because we will negate the padding for that title i'm going to run the example view so that you can see how this looks when it runs the rest of the example view you can copy out from the written tutorial it's not that important you've built the widgets you can use it however you want to use it this is just how we showcase our packages when we build a package internally for client application i'm going to do the same thing for the titles there you can see the titles that we have available in the app and then i'm going to do the exact same thing for the input fields and there you can see that we have multiple input fields one with leading one has a password you see those icons lighting up with the wrong color but that is because it uses the actual primary color which we should pass down in the example view but that is basically it that is how you keep your ui in a package this is going to be the way we'll be developing going forward once we have completed the basic functionality we will be developing these widgets first and then using that to build the actual functionality of the app thank you guys for watching if you enjoyed this video please leave a like or subscribe if you want to chat head over to the slack i'll add a link in the description and we can talk and discuss more flutter things over there i'll see you guys next week bye

Channel: FilledStacks

Views: 29,468

Keywords: flutter, flutter package tutorial, flutter package, package tutorial, flutter design, good ui, flutter ui, firebase, flutter 2.2, new flutter ui

Id: aRhhUJWHWJY

Length: 24min 7sec (1447 seconds)

Published: Mon May 24 2021