FLUTTER WIDGETS: THE BASICS

Okay, so previously, we discussed the basics of FLUTTER. Today, we’re taking on something different but still about flutter, flutter widgets. By now, we should already know that flutter is both an SDK which builds an app as well as a dart framework that offers a rich set of classes and widgets which can be used to build our flutter app.

Everything on flutter is a widget and flutter is all about widgets. Widgets can be referred to as the core building blocks used to build the User Interface (UI) for flutter apps. The UI is composed from a set of built-in widgets which can be put together as a personal custom widget and can read usable UI component which is to be used in evolving the UI.

STATELESS AND STATEFUL WIDGETS

Both widgets are written as StatelessWidget and StatefulWidget respectively.

Stateless Widgets are used to create a widget where you render something to the UI and you can pass data to them, the data can change externally. The UI of the stateless widget gets re-rendered when the input data changes. The stateless widget has a build network that builds a widget tree and is able to accept extra data; It only calls build() if it’s created for the first time or for extra data which it receives .

Stateful Widgets are all about returning widgets where you can render the UI and receive input data which can change externally. There’s an internal state which can be changed from within the widget which will also need to be rendered. It gets re-rendered when the input data or local state changes.

Commonly used widgets include:

• Text — A widget used to simply simply text on the screen.
• Image — For displaying images.
• Icon — For displaying Flutter’s built in Material and Cupertino icons.
• Container — The div of Flutter UI. It's a convenience widget that allows you to add padding, alignment, backgrounds, force sizes on widgets, and boatloads of other things. It also takes up 0px space when empty, which comes in handy.
• TextInput — To handle user feedback.
• Row, Column — These are widgets that display a list of children in horizontal or vertical directions. They follow flex-box rules for layout, if you’re coming from the web and know CSS.
• Stack — A stack displays a list of children on top of one and other. This functions much like the ‘position’ property in CSS.
• Scaffold — This is the root of every page in your app, which gives your app a basic layout structure. It makes it easy to implement bottom navigations, appBars, back buttons, etc.

WIDGET LIFECYCLE

Stateless widgets

• Stack — A stack displays a list of children on top of one and other. This functions much like the ‘position’ property in CSS.
• Constructor Function
• build()function: It can be called multiple times whenever the external data changes

Stateful widgets

• Constructor function is also available here.
• initstate() :runs before the build() runs
• build()
• setState()
• didUpdateWidget()

So these are a few widget basics. There are still a lot more things to be learned about; you could always refer to this for more info about flutter widgets.

SOURCES:

Maximilian Schwarzmüller on udemy.com

https://flutterbyexample.com/flutter-widgets/