Welcome to the week-1 of our every Wednesday Flutter Newbie To Community Hero talk.
This week let’s have a look on Flutter widgets.
You should have the Flutter SDK installed on your device as that is the very first thing you’d need to do to get started with Flutter. If you don’t, here’s a how to install from the Flutter Official Website. We’ll be running most of our codes on Dartpad.
In this week’s episode you’ll learn about:
What a Flutter widget is?
Type of widgets in Flutter.
An example app to showcase Flutter widgets.
What is a widget in Flutter?
Widgets in Flutter are individual but separated/distinct block of an app’s UI containing configurations and states that changes.
See a widget as your individual home furnitures and appliances. Some of these objects are configured(tightly fixed) to a certain place in your living room having states(like the TV, fans). That’s exactly how it feels for Flutter drawing/rendering widgets on an app’s UI.
In other words, A widget is a model for displaying your app state. On the technical aspect, think of a flutter widgets as a function of UI. Given a state, the build() method of a widget constructs the widget UI.
Flutter’s declarative nature makes it super easy to build a UI with widgets. Meaning flutter does a lot of things for you under the hood(We’ll visit these things later).
Type of widgets in Flutter
* Stateless Widgets
The StatelessWidget as it tell from it name, Stateless, meaning it has no state present in it. You can’t change the state or properties of a StatelessWidget once it is built.
* Stateful Widgets
Stateful widgets preserve state, which is useful when parts of your UI need to change dynamically.
For example, one good time to use a stateful widget is when a user taps a Favourite button to toggle a simple Boolean value on and off. Run here
Stateful widgets store their mutable state in a separate State class. That’s why every stateful widget must override and implement createState().
Next week, We’ll take a look at widget’s lifecycle.
* Inherited widgets
Inherited widgets let you access state information from the parent elements in the tree hierarchy.
Imagine you have a piece of data way up in the widget tree that you want to access. One solution is to pass the data down as a parameter on each nested widget — but that quickly becomes annoying and cumbersome. See diagram.
Wouldn’t it be great if there was a centerlized way to access such data?
That’s where inherited widgets come in! By adding an inherited widget in your tree, you can reference the data from any of its descendants. This is known as lifting state up.
For example, you use an inherited widget when:
- Accessing a Theme object to change the UI’s appearance.
- Accessing MediaQuery object to change layouts.
- Calling an API service object to fetch data from the web.
- Subscribing to streams to update the UI according to the data received.
- Inherited widgets are an advanced topic. You’ll learn more of it soon on our coming episodes.
