Building your first Flutter Widget

 Today, I'm getting to show you ways Flutter's widget composition will assist you quickly build out beautiful native iOS and Android apps from one codebase. Widgets are the building block of any app built with Flutter, and their functionality spans from providing a framework for your entire app, just like the scaffold widget, to accepting input, because the text field does, or maybe animating an ink splash.

Every widget has its own particular purpose. And you, the developer, build your app through composition, putting individual widgets together until they add up to an excellent interface. Let me offer you an example. So you're an engineer at a store that builds mobile apps for other companies. And at some point, your biggest client involves the office and says, we've to speak about an action button on our shopping app.

The look just isn't working. we'd like something that basically seems like our brand. As a Flutter developer, you'll say, no problem. Have a seat and I'll pull up the code. All right. So here's your client's app. And if we concentrate, you'll see this default-looking floating action button. There's nothing wrong with the fundamentals, but you'll see why the client might want

something a touch more custom. And here's the code that produces the UI you only saw. It's written within the Dart programing language,

which is what Flutter uses. there's the MyHomePage class up at the highest.

And here's the bit we're curious about, the floating action button.

Let's create a replacement file and define a replacement widget to use rather than the default. We'll call it FancyButton.

Let's import a few of the essential Flutter packages. There is the inspiration and therefore the material package that's got plenty of widgets in it.

And I'll define FancyButton as an extension of the stateless widget. I'm getting to jump the small print of the stateless widget for now.

The important thing, as far as we're concerned, is that stateless widgets do not have mutable properties or a state which will change.

You just construct one and it's good to travel. Speaking of properties, let's give the button a callback for when it's pressed. And we'll need a constructor to inject the callback. So let me add that. If you're a new Dart, you'll not have seen this during a constructor before.

It just means the constructor should have a parameter that matches the property and handles the assignment for you. I also can put braces around the parameter to form an optional named parameter.

You'll see how this works when this gets invoked. And use the specified annotation to form sure it is often passed in. and there is one method I want to implement here, which is build. this is often called by Flutter, and it's basically how of asking your widget, hey, who are your children?

What widgets are below you within the hierarchy? I've just got a placeholder null in here in order that I can return to my home page.

Let's get the new file imported, then I'll come down here and replace the default button with my widget. you'll see the name parameter for compressed. I'll provide it an equivalent method that the opposite button was firing.