Custom Widgets | FlutterFlow University

let's make a custom widget but custom widgets are a little bit more complicated than functions or actions so I want to take one minute to explain each of the lines of the boilerplate code so you have a good handle on what's going on so let's just give our widget a name first maybe this just generates a box okay so then we're going to go in here to see our boilerplate code and just copy it into the editor okay right away you can see that we have two classes and that's because in flutter there are fundamentally two kinds of widgets stateful and stateless widgets a stateless widget would be one that doesn't change now you can make changes to it but it won't change while you're running the app a state full widget will change or can change and custom widgets in flutter flow are stateful widgets and to create stateful widgets you have two classes the top one is to handle the basic configuration of the widget so you can see things here like height and width and another class to handle the state okay so let's jump into these and see what these do so of course classes are blueprints for the objects that they produce and in this blueprint you'll have the properties and the methods that that object has and here are two of those properties a width property that is a double and a height property and you can see over here that these are required and once we get into building our own custom widget we'll Define more parameters than would be added in here okay so those are our properties also called instance variables or Fields next let's move up to this thing up here and this is called a Constructor or Constructor function because it's just a function and it's the function you call to create or instantiate this object so wherever we put this custom widget when we inspect the code we will see something like this and that's what creates the object which is in this case a widget based on this blueprint but you can see we got some things coming in here and these are parameter lists these parameters get passed in just like other parameters when your object is created so the first thing is a key and in flutter a key is a special parameter that's used to preserve State and differentiate widgets when working with collections or lists and is also used for running tests next we've got our height and width parameters but they have this this appended to it and that's because we're not just passing in the width and height to this new box object but we're setting it equal to that specific Box's width and height property this refers to not this class but to the object that gets instantiated or created by this class next after this colon we are calling this super function this is called an initializer list and what super does is that whenever you have a class that's extended super is calling the Constructor of this this class up here so calling super is like calling this box Constructor and here we're just passing the key over here into our super class so that they're connected this is just how the flutter framework works okay great one last thing we get down to this override right here this is called an annotation it's not actually necessary but it's become a standard practice because what this is indicating is that you are overriding something in this class right here so in this class there is a method a function called create State and we are overriding it here and you add that annotation to indicate that you're doing so intentionally that this isn't a mistake and what are you overriding it with well you're overriding it with this right here well what's that well this is another Constructor function that's what's right down here and you can see that it is returning this box State object now if you see these little underscores here this is just dart's way of making something private private meaning it's only accessible in this file okay so this is returning this state object we see right here which is coming from this class right here and this class needs what's called a generic so we pass in our box class because that's how these classes are linked up okay great so at the end of here this is going to instantiate the object based on this class so what does this class do once again we are overriding something we are overriding this build method from this state class and this build method will return a widget and you can see inside the function body right here we are returning a widget a container and this is important to keep in mind when you're writing custom functions because this is where you will do most of your work you have to return One widget now of course that widget can contain other widgets but at the top level it has to return one so keep in mind this build function has to return One widget and lastly we're passing into this build function this build context which we're calling context here just by convention sometimes it's called CTX it doesn't really matter and build context is an object that has information about where that widget is in the widget tree okay awesome so that's what happens in a custom widget so let's build one and I found this cool library on pubd called animated Tech kit so let's use this so the first thing we're going to need is we're going to need this dependency so we copy this to the clipboard and we can come over here to our Pub speec dependencies and add it in and let's refresh this to add a project great next let's take a look at our example to see what parameters we're going to need so if we scroll down let's just look at a cool usage right here okay yeah that looks like a cool one so you can see we've got a lot of different properties that we could parameter iiz that is make Dynamic by creating parameters that can be passed in but let's just use these ones down here where we have three different texts that rotate through so we're just going to need three texts let's do that so let's add a parameter here and we're just going to call it word one it's going to be a string and word two and word three beautiful now we're ready to replace this boiler plate that we had with the boiler plate that includes our parameters okay so let's come over here here you can see that we've got these new parameters right here so let's copy that to the editor awesome all right so next let's grab the example code so let's back over here and we're just going to grab this whole row copy that and so we come down to our container and we are just going to replace that and immediately see a problem we get some red squiggly lines here and when we look at the message it says that the method animated text kit isn't defined and that's because we actually haven't imported this Library into this file so we need our import statement like these Imports and we can go grab that from pubd so if we just scroll up it'll normally provide the import statement and there it is so copy that and we can paste it here and when we scroll down we can see that those errors went away beautiful so next we want to make this Dynamic with our own words added so instead of awesome optim different let's add in our parameters and we access those by widget Dot and and then we'll get some Auto completion and we can see them there and immediately we get a problem here we're getting some error and when we look at it it says that the argument type A nullable String can't be assigned to the parameter type string oh I see so it's expecting a string but this could be null or a string so we can do a simple null check here so we open this up and do a null check and set it to empty string and now we're good beautiful so then let's duplicate it with our other words awesome so let's save this and to be able to see it we have to compile great so we can come over here to preview our widget and let's expand the width see it more fully and we have three of the same word so hello world by okay great so let's put this into a project and see it in action so we're going to come over to Builder right here and come over here and here's our custom widget let's drop it in and let's give it width and words World beautiful and because we've already compiled this widget we can view it in the Builder and that's building custom widgets in flutter flow

Channel: FlutterFlow

Views: 9,766

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, custom widgets

Id: QUBS0KFfwB4

Length: 8min 37sec (517 seconds)

Published: Mon Oct 02 2023