Custom, Reusable Widgets in Flutter

welcome back to wild dev everyone today we're gonna be going over custom reusable widgets in flutter and how you can use them to reduce the size of the code in your project let's get into it so as you can see here i've already shelled out a base project with a bunch of different widgets we have a sign up page we have a sign in page and if we go to these we have some text form fields we have buttons um and just some simple navigation now what we're going to be doing is we're going to be creating a custom widget that we can place into this page the purpose of this custom widget that we're going to be building is to factor out a bunch of code that's found on multiple pages so for this example i'm going to specifically be focusing on a custom button widget that i'm going to be creating and so we're going to use it for sign in and we're going to use it for sign up and realistically you're probably going to use the same button in various other areas of your application styling is going to stay pretty much the same and the main focus of this custom widget is going to be on padding and sizing and coloring so it's a lot of styling type of stuff that we're going to be customizing here now you can apply these same principles to anything you'd like if you have an idea for you know a bar chart or a pie graph or some particular list view item type you can create a custom widget in the exact same manner in which we're going to create this one but i'm going to use a simple button to illustrate the point and make it easy to understand and grasp so the first thing i'm going to do is i'm going to import package material so it's package flutter slash material the dart and i'm gonna create a class called custom button and this is gonna be a state less widget and as you can see here it's throwing an error right now and that's because we're currently not returning anything inside our widget build override so i'm going to go ahead and create that instead of throwing an error we're just going to say return container for the time being okay the next thing we're going to do is we're going to establish what inputs the user is going to give so the only thing that's going to be different between the different views in this case because the rest of the styling is going to be fairly consistent is going to be the input text so let's go ahead and add that that's going to be a string and we'll call it input text and then we're going to do const custom button this dot input text okay and so now this is already going to be kind of functioning how you would imagine other widgets to function um other widgets and what i mean by that is that you know when we call a widget they have different properties that we can access and use so let's go ahead and find where we use a button on one of the pages let's scroll down password okay here we go so this whole thing right here is what we're essentially going to be copying so i'm going to cut that i just want to mark where i'm going to be using it and we're going to go back here paste and in place of sign up we're going to say input text okay now let's see what else we have here we could take in a custom width if we'd like to as well so if you know we want to give the user uh the ability to um give a certain um or let's just use height for example uh we'll say height this dot height and then for height we could say height then if we go to where we're going to be implementing it you can see here that it wants us to let's import first and we're going to say height is going to be 44 and input text is going to be let's see we're on the register page so it's going to be sign up okay so you can see here you know similar to other widgets we have these different values that we can plug into it and that's how that connection works you create a staple widget a stateless widget or it could be stateful depending on what you want to do with that widget you establish the values that you want to allow the user to input you create your initializer for that and then you build your widget so when we call on it what it's going to do is it's going to return what's ever in here in this case it's returning a container widget with a bunch of different operations inside okay so the next thing that we're going to do is let's go ahead and give this a hot restart and we're going to see if the sign up button looks correct so we're first going to sign in so we can check to see what it originally looked like so it looked like this so if we did this properly we should see pretty much this exact same layout for the sign up button but with the word sign up instead and there you go the next thing i'm going to do is i'm going to add this exact same thing to our login page so i'm going to copy our custom button i'm going to open up our login.dart page find the sign in container and you can see here this is lines 25 through 41 so 16 lines 16 lines being replaced with four now so we've saved ourselves 12 lines in each file that we put this and so you can see here it dramatically cleans up the tree the widget tree and typically i do not recommend doing custom widgets or even you know factoring out a widget because let's be honest there's not a whole lot that's custom about this particular widget other than you know we've got a heightened text and that sort of thing it's pretty much just you know a widget tree that we pulled out that we've factored out but there's a very good chance that your widgets are going to get more customizable and you might want to use them in various places i personally do not recommend factoring out or creating a custom widget unless you use it in two or more different places ideally three or more otherwise you're just spending a lot and a lot of time trying to refactor code constantly and not getting much done with your project if you've got the time by all means do it but i recommend waiting until you have about two to three or more uses within your project for that particular set of widgets so the last thing we want to do all we need to do is just change this to sign in give it a hot restart let's go check in the sign in page still there still looking good sign up still looking good and there you have it we have now created our own custom widget we factored out a bunch of code saved ourselves a lot of time and this is the basis for creating custom widgets and reusable widgets that you can use in your project you can expand this and go way more beyond with this i've used some pretty complex custom widgets in my own code at times but that would take a long time to demo and go through so i wanted to keep it very simple for you guys just to see how it works and basically you know it's the same as any other view you know we created a new class you know we have inputs we have an object a widget that's returned and it displays something on the screen it's simple as that if you found this video useful make sure you click that like button to subscribe to the channel for weekly flare contents and i'll catch you guys next time

Channel: Bleyl Dev

Views: 17,152

Keywords: flutter, flutterdev, fllutter ui, google flutter, flutter vs react native, custom widgets, flutter custom widgets, flutter widgets, widgets, reusable widgets, bleyldev, bleyl dev, programming, how to, learn to, code, learn to code, learn flutter, learn dart, dart tutorial, flutter tutorial

Id: yNN8NthQIu4

Length: 8min 38sec (518 seconds)

Published: Thu Apr 22 2021