Create Custom, Reusable Widget in Flutter in Depth Tutorial

[Music] hello guys welcome back to my channel so in today's video we are going to see how you can create custom widgets in flutter so with these custom widgets you can reduce the number of lines in your code so as you can see here in today's example i have three buttons i have take the button as an example because in your app it can be used as a most used widget where you can use as a custom widget to have this type of custom buttons with a single widget okay so what we can do is as you can see here i have a one button with a blue background with some border radius to it here i have a button in where it has a border with no radius here i have a different color background color here i have a different background color as well as the border radius is circular so let's start by creating a custom widget so as you can see here i have this first button where i have a container it has a box decoration material ink well containers these wizards are used to create this button okay so how you can create a custom widget so what we can do is you can simply create such type of widget that you want to use in your app and once you are done you need to simply go and like this and use it as a extract widget okay and you can name it as let's say our custom button okay like this so hit enter and as you can see here below we have a new stateless class widget okay so what we can do is we can simply create a new folder here we can name it as widgets and inside widget we can create a file called custom button okay so like this custom button dot dot hit enter and now what you can do is you can simply cut this thing [Music] and paste it inside of this class okay import the necessary files and as you can see here we need to import our custom button okay so how you can create now a custom button so as you can see what are the properties that are required to be changed so here are different profile properties such as let's say we want a different color different border radius or let's say we want a different text a different text color so how you can do is you can simply go ahead and declare here what you want so let's see what other things that you want for example let's say we want on tap property for our buttons so we can get our void call back and we can name it as on tap okay like this on tap and what are the other functions that we want we want a background color for our button right so let's call it our color [Music] okay so color will be let's say a button color okay what are the we want a border radius so it takes in a double value so let's get our double border radius like this okay so what else that we want is um text and a text color right so what we can do is for same as color will be let's say our text color and for this text we can have our string which is let's say a button text okay so what we can do is now in your constructor don't you can get okay inside the constructor what you can do is you can simply go ahead and get all these parameters okay like this like this dot on tap and now this that we have border radius then this start button color this dot text color and then this dot our text okay so why this red lines is because it should be non level the value should not be null okay so what we can do if you want you can add required parameters like this before our property okay so like this add required so the error will go or what you can do is simply go ahead and add like this before your okay so now what we can do is we also don't want our okay so [Music] let's keep our require parameters to on tab and let's say a button text okay so button text is required okay so we can remove it so now what we can do is we need to simply go ahead and remove this const as we are going to change it so what you can do is now you can go ahead and change here the properties which are background color so for example colors dot blue accent we can only give it a value of let's say a button color like this okay so button color as you can see here and we can add if it's null we can add a colors dot white as a background if you want to make it a non label okay and same goes for here we can add our border radius like this and if it's null we can give our border radius to zero that is we don't want any radius right so in the ontap property what we can do is we can give our own tab that we have declared earlier and instead of our text we can give our button text like this yes you remove this const and inside our text styling of our text we can give our text colors which is text color okay and if it's null let's give it a color of no the default is black only okay so let's just save this thing so as you can see now we have our custom button ready which is stateless widget okay so inside our app what we can do is now we have this custom button okay so let's just change the properties all that just say i can remove it and save our app okay so now you can see i don't have any app here we have these three buttons and if you want to use our custom button that is our reusable widget you can write custom button like this okay and as you can see we have our required parameters which are our on tap and button text okay so for the on tap we will simply give this a function we'll keep it like this and for the button text what we can do is we can give any text that you want for example let's just give like a first button okay so let's just save our app so as you can see here we have our button it does not have any and it has a background color of white and a text in the center okay and here we have our different parameters for example button color and we can give it a color start blue as early let's just save our app and now we have a button with a blue background okay so now we can also give the text color to colors dot white and a border radius of let's just say a 10 okay so let's just say so now you can see we have a button as same as earlier with a blue background and a border radius okay so you can see how clean this thing looks right similarly what we can do is i can simply just oops i can what i can do is i can simply copy it okay so and inside our row we have these two buttons like right so what we can do is i can simply replace this button with our custom button like this okay and what let's just say this is our second button second button okay so we don't want any background color so by default it's white and we want our text color to be let's say a black and we and also we don't want any border radius to it okay so let's just save our app now okay so as you can see here we have a button so how you can give a border we haven't declared any border color right so as you can see here okay so we don't have any border here right so we can declare a border and border dot all and for colors you can simply go ahead and declare same as color border color okay like this add question mark before it also add this in your constructor as a border color okay and give it here as your border color if it's null you can give any color that it will be your default let's just say white will be our default okay so now let's save our app and now inside our app what we can do here is i'll simply go ahead and write give our border color and i'll give it a border color start let's say a red okay so let's just save our app so as you can see here we have a button with a red border white background and a second text is text inside it okay so similarly you can use this to create any type of buttons inside your app so let's change this type of button okay so we can simply replace this container okay we can remove it and we can write custom button like this okay we can give it any on tap property and for the text let's just give it as a last button and we can give it a border radius of 30 to have this rounded type of circular okay so what you can give is a text color of let's say a colors touch okay what we can do is green and the button color will be let's just say colors dot green accent dot shade will be let's say 100 okay so let's just save our app now so as you can see here we have a green button with a green text and a rounded powder story borders to it okay so we can change here as well let's just change here too let's just go ahead and copy this custom button and replace it with this button inside our app okay just paste it we can call it as a new button with let's just say a background color or or the button color will be colors dot black okay so and the border will be colors dot white and the text color will be white as well okay so let's just save this app so as you can see we have a new button which has a black background or let's just give it a radius of 10 as well okay so it has a little bit of border radius to it a black background and a white text to it so this is how you can use custom widgets inside your flutter app look how this clean this thing our looks and also the number of lines is also reduced inside our code okay so this is how you can use custom widgets inside flutter app okay so hope you found this video helpful do like share subscribe to my channel and see you in the next video okay [Music] you

Channel: Dhanraj Nilkanth

Views: 14,793

Keywords: Flutter Tutorial, flutter, flutterdev, fllutter ui, google flutter, 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, dhanraj nilkanth, package of the week, widget of the week, reusable widget flutter

Id: inmqrXcleiI

Length: 15min 6sec (906 seconds)

Published: Fri Oct 29 2021