Division – Style Your Flutter Widgets Without Confusion (Flutter Tutorial)

in flatter everything is a widget you can freely compose them and create your own which is awesome however there are certain inconsistencies and lacking features that make styling and positioning widgets a pain what's more it's pretty tough to extract the style of a widget what if you want to reuse just the padding and border radius on multiple different widgets well you're just out of luck unless you use a package called division which allows you to do just that extract styles and make styling and enjoyable endeavor by streamlining certain processes well welcome to resale coder where you are getting prepared for real app development by building better faster more stable app so subscribe and hit the bell if you want to grow your coding skills and also if you do not know already yet an amazing flutter conference is gonna be taking place in January the next year 2020 in Warsaw Poland and people from Google will be there I will be there and it's gonna be packed with presentations and it's going to be a lot of fun you will meet up with the community of flutter so check out the link from the description to learn more or you can also go to flutter Europe dot deaf let's just imagine that the hypothetical designer has already designed a beautiful UI component which will be used for displaying messages to the user and apart from this looking like this which is a green box with rounded corners it also has animation and ripple effect this is what's in the spec and we might be thinking that great we can recreate this just using the standard flutter widgets very easily but is that correct we shall see in this tutorial and actually we're going to see how the vision can help us achieve this goal much more easily and also be sure to check out the written tutorial from the link in the description where you can also find all of the code in this video links to the libraries and overall go through this lesson at your own pace so let's start with implementing this widget using the standard flutter way of doing things which is just creating a bunch of widgets and calling it a day so let's just separate this code into separate thing which will be a message display classic stateless widget so let's create stateless message display classic and we're just going to put this to be the body of the scaffold so very simple stuff message display classic let's just instantiate that inside the build method what do we want to do well if we take a look at the design we can see that we wanna probably have it centered because it's right in the center of the screen and it's going to be a container and let's just not deal with the animation for now we're going to get to that later but for now let's just make it a centered container with a nice color and also rounded corners so we are already returning container so let's just make it centered so wrapped with the widget Center widget now we have that and what we're going to do next is that probably this container should hold child which will be a text so text and let's just say Lauren lorem ipsum dolor sit amet alright and with that it's probably a good idea to also run the app to see how it looks like currently of course is just going to look like a plain simple text okay so this is how it looks like now which is pretty boring so let's add some styling to this we are inside a container so we can add some decoration to this container that's how it's done by default in flutter so let's just say decoration and we are going to add box decoration and we can set the cowl and as you could see in the design the color should be a green color so colors that green and let's say shade 800 and then also border-radius because we want to have rounded corners we're going to set that to be border and on board for the radius that's circular and let's say that it should be 8 pixels round so now how it looks like it looks something like this not really great we're going to take care of the text styling later but let's just add some padding to this widget so again the way that you add padding to the text of course because we will not be having the padding from the inside of the container so we have to pad the child of the container to have an inside padding you just wrap this text widget this child inside of padding widget so add padding and let's just say not 8.0 but we're gonna have 16 all right now it looks something like this it's starting to take shape and let's just now style the text because it should not be this black text it should be bold italic and it should be big just like in the example app right over here we should have something looking like this so let's do that right now in our app we're building so to add a style to a text you generally use a text style and this text style takes in a color so that white and let's also make it take a font size and we want to make it 30 so it's going to be a bit bigger and it looks something like this much better but let's also make it bold so the way you do that is found weight and don't worry we are going to get to division in just a bit this is just so that you can appreciate what the vision can do for us because really styling for wedges this way is a bit of a pain so font weight that bold and finally the last thing basically we're gonna do is font style which will be font style dot italic so let's take a look at how it looks like currently looking pretty great but the thing is we want it to be a bit slimmer we do not want to take it up take up the whole width of the scaffold so the way we can do that is by limiting the width of the container of course you can also do it dynamically but we're just going to set the width to be a hard-coded 350 logical pixels for the container so let's see how it looks like right now and we can see that those two versions are are almost identical but the version which the designer provided us can also be animated which our version currently can now be and also even if it's not animated you can see that it has this elevation effect and also the ripple effect is over there but this elevation is here this shadow and our version does not have any shadow currently and we're not even speaking about the animation which is not present at all so you cannot really add an elevation to a container you can add elevation to material which is like a cart or a raised button elevation but container and widgets which do not really have anything to do with material design by default in flatter cannot have an elevation property sure we could set a shadow actually on the decoration probably box shadow and set the shadow but that's not really an elevation because rotini shadows is a bit tougher than working with elevations so we are probably out of luck because we cannot add an elevation easily and also we are lacking the ripple effect we are lacking rotation animation and all of that so it would be pretty tough to implement all of the things which are currently in the design with the default way of doing things and even now you can see that this code is a bit of a mess because for some things for example if we want to Center this container we have to wrap it inside the center widget but to provide a color to this container we provide a color to the Box decoration of this widget and to provide a width to this widget we provided directly to the container so for some things we wrap the widget in another widget for some things we provide properties or values that directly to the widget and for some other things we provided to bugs decoration now to the widget directly so this is really messy and this is something that the vision sets out to solve because the vision will help us with these kinds of issues and also with the vision we can add elevation and also animation very easily to all kinds of widgets not just material once so first let's add division to our pub spec that yamo and also be sure to use the same version I am using here because there might be some changes in the future versions of division so just so that we are on the same page we're using the version 0.8 point to and also you can get this pop spec diamo file and this division version and also all of the code which we have written up until now from the written tutorial to which you can get from the link in the video description before we try to absolutely replicate what we've been given by the designer let's just try to replicate what we currently have in the app using division so let's create another stateless widget we're going to call it message display division so STL message display division and in this widget which we should probably put outside of the previous widget of course inside this widget we are going to again have a container but the way that you style things is division is a lot different so at the top we wanted to Center this container but with division we are now going to grab the container inside the center widget instead we are going to provide the style and the only thing which is gonna be wrapping this container widget will be a widget called parent so let's wrap this with a new widget parent and this parent comes from the package division and that's really the only which is which is gonna be wrapping the container and now what we can do once we have the child is that we are going to also provide a style and this is establish is coming from division and it's going to be of type parent style and now on this parent style we can provide all kinds of values which we want this container to have and as you can see the vision is really inheriting the good stuff from CSS because in CSS everything is contained inside CSS classes or Styles basically because you can also have not just classes but elements and so on but basically everything is contained inside a style in CSS and the vision tries to accomplish the same thing so it does that pretty well even at this stage because it's not yet fully stable but even now you can see that the vision is really doing some great stuff because we can Center our container now by wrapping it inside the center but we can specify alignment that Center right additionally what we've done is that we have provided a padding so let's add padding and we're going to say all 16 you can of course provide bottom horizontal left right up vertical but we want to have padding on all of the sides with the value of 16 and then let's also make it look the same as the container is looking like when we were implemented it straight in the flatter way of doing things so we're gonna have a width of 350 it could not be simpler with the visions with 350 then we also want to have this with the background color so background of course two dots because we want to use the cascading operator background that you can set blur or even image the way you wanna set the colors simply it's going to be colors that green and let's make it shade 800 again and finally it should have a border radius again it's just a simple property on the style and the board radius should be from all corners and with the radius of 8 logical pixels so let's take a look at how it looks like now we're going to specify this message display the vision to be displayed as the body of the scaffold and with that we can now open up the emulator and we can see that it definitely has the proper width it has rounded corners but since it currently doesn't contain any text it just expands to the whole height of the screen so let's fix that by adding some text to this container so we can add a child even to this container and we could make it a text but there is a better way to do things with division because it has a custom wrapper of the default text widget which comes directly from the flatter framework instead what we wanna use is at the XD widget which really is just a wrapper of the default text and we want to add the actual text of again is going to be a lot an episome dolor sit amet so let's just paste that over here and now the way you style a txt widget is very much similar to how you style a parent widget which contains some child the child of the text is actually the text itself of course and you also can provide a style and instead of it being a parent style it's now going to be a txt style and we can just provide all kinds of values directly to this txt style so by default you provide some long-winded names like for example font weight is font-weight:bold but the txt style can really ease things for us out because as you will see right now we can provide that this text should be bold by simply calling bolt and that's it now this text will be bold we do not need to deal with the font weight that Bolden said the fun way with the named parameter of the constructor now we do not need to do anyone anything like that we can just specify the Balt function to be called on the textile and we are gonna be good to go but of course in addition to it being polled we also want this text to be white so we can just simply test set the text color to be colors that white and then also we are going to of course with a cascading operator don't forget about that we also want to set the font size to be 30 and finally actually not finally apart from this being bold we also want it to be italic and now finally we're going to have to set that the text will be aligned to the start because whereas the default text widget has the text aligned to the start by default the divisions txt widget aligns the text to be centered by default so we wanna align manually to the start so it's going to be either aligned to the right or to the left depending on the kind of language you are using in your app if it's written right to left or left left right so text line and let's say start all right and now it's going to look precisely like we want it to look like we cannot even see the difference between the version which we are implementing the floodway and the version which we are implementing with the vision it's looking exactly the same and in addition to making styling incredibly simple by mitigating the decision process of whether or not we should wrap the widget inside the center widget or whether or not we should provide it as a constructor parameter like for example the width apart from simplifying this process the vision also simplifies extracting the actual styles into some variables probably static final variables in some utility classes because when you wrap something in the center and in a adding and then you provide width as a parameter extracting this kind of style is pretty tough you probably just have to extract the whole widget and call it a day but with the vision you can extract the Styles very easily and you can leave the widgets alone basically because the widgets are just simple building blocks like a container and everything is which has some meaning to the styling is inside the style not inside the widget tree right it's actually going to be translated to the widget tree by division but as the code which we write goes everything is contained inside the styles so what we are going to do is that we are now going to extract this style for the container so let's just cut it out and we're going to put it inside a container style you should probably put it inside a static final somewhere outside this message display the vision widget but since we are only inside a tutorial let's just keep it simple we are just going to put it as a local variable of this message display division widget so final container style and let's plug this code over here now we can specify container style to be the style of the container of course so container style and we're going to do the same thing with txt style so let's cut it out final text style or let's just say textile and it's gonna be equal to what we've just cut out and now let's specify the textile and we are good to go even after we had restored the app it's going to look precisely like it looked b4 but as you can see what we have accomplished by now is nothing spectacular surely the code is looking much more clean and then before just look at this now we have inside the widget tree it is a parent container and a text and the styles are all extracted you can imagine them being extracted inside a separate class so you cannot even see them here so you are looking at something like this which is just purely awesomely clean code and also if we're gonna learn how to write your flutter apps using clean architecture and test-driven development really build maintainable and readable apps check out the tutorial series from the cart in the corner but as I say currently we have only something looking like this and we want to make it look like this with the elevation and with the ripple effect and also with the rotation animation all of that good stuff so what we want to add first is the things which are static so those are elevation and also the ripple effect and those things to add them is pretty straightforward so we're just going to hop into the container style and after border-radius let's just specify elevation to be 3 by default we can do that even on a container if we were using the default container there is nothing like elevation over here we cannot just add it so that's something that division adds for us and in addition to that we also wanna enable the ripple effect so enable will be true so let's see how it looks like right now after we had restart so it's looking not like this but like this so elevation is definitely in there and we have two hot restart just because we have extracted this style to be outside of the build function of course otherwise you do not have to hot restore you can just have reload business as usual and as you can see we also want to have animation with rotation so let's set up things which will enable us to do animation right now to enable automatic animation it's as simple as same animate on the style and then you specify as you can see in the documentation you specify a duration and then also optionally a curve all of these parameters are optional because they are set by default to be 500 milliseconds and also curves linear but what we wanna do is to set the animation duration to be only 100 milliseconds so one tenth of a second and curves that decelerate and with that we've just enabled animation but since we are gonna be rotating the widget something like this we can also specify in which units we want to rotate so that can be done inside a parent starts constructor where we can set angle format and it can be years cycles degree or radians I think that degrees are the easiest to work with because that's what everybody knows straight off the top of their head so we can specify angle format degrees and now whatever rotation we provide it's going to be in degrees and with that we have just enabled animation but we are not really animating anything so the real question is how do we actually animate some stuff on the screen well of course with set state and with updating the desired values because really flutter is all about this build method and when you call set state you change some property and you also have enabled automatic animation really flatter and the vision will take care of the enemy for us and all we have to do is to just change a few values and all of them will be animated automatically so that's really awesome first though let's handle the taps because without handling taps we cannot have the animation which would only be triggered whenever the user presses the actual message display thing which we have just built so to handle taps you would usually wrap your widgets inside the gesture detector but instead of that with the vision we can set up a gesture class instead very much like we have a style for the parent widget there is also a gesture for the parent widget and we're going to specify gestures either on gesture class or you can also use the shorthand G that's the same thing we're just going to use the full name gesture class to keep it readable and now what we can do is to just provide on tap down and inside this function which takes in the parameter which we can just simply ignore because it provides with tap down details but we really do not need them inside this function we can set state but for that we of course need to be inside a state full edge it at first so what's do is that we're going to convert message display conversion to be a state full widget and we also need to have some sort of a state which we are going to update and we just need to know whether or not the widget is currently being tapped so boo is being tapped by default it's gonna be false and now we can just simply set the state of is being tapped so set state is being tapped to be true whenever the user taps down on the widget and then we can just copy whatever we've written here and all we want to do is to change to be on tap up it's being tap will be false then and just to be safe we are also going to specify on tap cancel and also it's going to be false then so now whenever the user taps down and taps up or cancels the tab by system it's going to update is being tapped field of our stateful widget but how do we actually translate this updated value into an actual animation so we have already enabled automatic animation by calling animate and also if you want to learn more about basic stuff of how to animate widgets in flutter you can check out my separate tutorial from the cart in the corner but with the vision it's going to be very similar to how we do things default ly but also it's going to be a lot simpler at the same time so the way we can do animation after we have enabled it in the vision is that we of course need to update some values inside the build method and then this animation will be handled for us by division and by flutter automatically so now you might be thinking that to update values inside a build function and react to this is being tapped field being changed we need to get rid of this extracted container style and we again need to put this whole container style right into the actual build method right to update it well that's one option and surely we could do that and we could then do something like if is being tapped with a ternary operator then we're going to set the elevation to be then if it's not being tapped the elevation will be surely we could do something like that and actually let's see if it's going to work so of course once we switch to our proper app it's not really working yet that's probably because we need to hot restart so let's hit ctrl shift and f5 200 start and now when we tap it hopefully you can see it even on YouTube now it actually works the elevation is changing we can see more of a shadow behind and below the widget but we definitely do not want to lose out on the separation of styles and error code inside our app so we definitely do not want to paste the whole parent style again into the build method instead what we want to do is to leave it as we had it before so we will not keep it extracted like this so now style will be gotten from container style and what we want to do is to just change this single property of the container style the elevation and the way we can do that is by cloning the style and now on this clone style we can change some properties so for example elevation just like we changed it before is now going to be changed only on the cloned style not on the actual style itself and now apart from elevation we also want to scale this widget so scale will be if is being tapped we want to set it to be 1.1 otherwise it's just going to be simply 1 and finally we want to rotate this widget in angles because we specified that we are using angles or in degrees of course not angles what am I talking about in degrees because the angle format is degree of course you can also set the radians so let's come down again and we are going to specify that the angle will be if is being tapped minus 10 our price is going to be zero and with that we can now heart restart just to be sure it will work and now when we tap this it's going to be rotated elevation will be greater and also we can see the ripple effect of course and it's going to scale up a bit so now what we've done is that we have implemented the design precisely to be up to spec because there are really no differences between what we've gotten from the designer at the beginning of course this would not be building flutter but in some designer app but those are just details let's now focus on that of course and we've built precisely this kind of a widget with the vision and as you can see the code is still readable there are no stupid centers and pairings and wrapping of widgets there is nothing like that there are just styles which we can update they're being automatically animated gestures are handled nicely you can of course also extract this gesture class into some separate variable into a separate place so it's also now going to take up any space inside a widget and the vision really allows us to build clean widgets by separating the style from the widget to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the description and also go to flutter that education link is also in the description to get the top curated flutter news and resources and add improving your app development career I curate those resources personally and also over there at fluttered an education you can also subscribe to my mailing list to get those news and resources which are really going to push you forward and make you grow as a flower developer to get them delivered weekly to your mail inbox so now you know that division is a library aimed at simplifying the process of styling and flower and it borrows the good parts of CSS where everything needed is the inside style for styling regular widget there is the parent rapper and for styling text there is the text rapper and overall this package is already helping us even though it's not yet even stable so it really helps flower developers a lot and I cannot wait to see how it evolves once it gets into more stable versions if you do not want to miss more tutorials like this definitely subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here on reso coder I am determined to provide you with the best app development tutorials and resources out there if this video helps you give it a like and also share with our developers who are surely going to benefit from knowing how to style which it's in a better way to leave a comment if you have anything to say and see you in the next video [Music]

Channel: Reso Coder

Views: 20,959

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter widgets, flutter styling widgets, flutter styles, flutter division, flutter ui design, flutter ui tutorial, flutter ui design tutorial, flutter design, flutter design ui, flutter design tutorial

Id: kcq8AbVyMbk

Length: 36min 2sec (2162 seconds)

Published: Thu Nov 14 2019