What is Flutter Widget?

As this is my first Medium post, please don’t be harsh with me. Here we go… Are you saying what the widget is? Yes, you are in the right place. Everyone told us when we were learning flutter that everything is a widget. When we looked at the Flutter document (you can visit it here). It says that we can create our User Interface by using widgets. There are also a lot of widgets in the Flutter, I’m not even sure how many there are. If you want to provide the statement “everything is a widget” you can look at the class extends and you can click them with the ctrl+left click. You will see that at the end of the class inheritance you will see Widget. Let’s start with common questions.

Terminal Productivity Booster Zsh Plugins

What is the widget?

Everything, every building is designed as widgets in the Flutter. In the doc, they say that they take inspiration from React(You can visit it here) (this is additional information :D). Widgets describe what their view should look like given their current configuration and state.

So How many types of widgets do we have?

Some people think that we have 2 or 3 widgets type but it is not correct guys.

You see that there is a more than 2 types of the main widget categories we have. Let's start with explain the first one

Terminals are Colorful and Beautiful with Powerlevel10k

• StatelessWidget: In Flutter, this class is designed for widgets that run once when the screen is first created and stay there permanently.
• StatefulWidget: It has a mutable state and we can create it for changing during the lifetime of the widget. We need to inform it if we had changed some value by using setState.
• ProxyWidget: A widget that has a child widget provided to it, instead of building a new widget.
• InheritedWidget: the base class that allows those classes to extend the information under the tree from it.
• ParentDataWidget: Base class for widgets that hook ParentData information to children of RenderObjectWidgets. For example, stack uses the positioned parent data widget to position each child.
• RenderObjectWidget: Responsible for controlling the sizes, layouts, and logic used for painting widgets to the screen and forming the UI for the application.
• LeafRenderObjectWidget: A superclass for RenderObjectWidgets that configure RenderObject subclasses that have no children.
• SingleChildRenderObjectWidget: A superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single child slot.
• MultiChildRenderObjectWidget: A superclass for RenderObjectWidgets that configure RenderObject subclasses that have a single list of children. (This superclass only provides the storage for that child list, it doesn’t actually provide the updating logic.)

10 widgets you better know

• SafeArea: Our widgets can avoid being not to be seen by using SafeArea. It gives us clean layouts.
• WrapWidget: If there is not enough space on the screen we can use Wrap and it fits on the screen. Also, we can control direction.
• RichText: We can modify our text by using TextSpan in RichText’s text property.
• ClipRRect: We can wrap the image and make it Rectangle
• MediaQuery: we can see that device’s width height and other props by using it.

MediaQuery.of(context).size.width

MediaQuery.of(context).orientation

• FutureBuilder: help you to execute some asynchronous function and based on that function’s result your UI will update.
• Flexible: Make our UI to responsible. It uses with flex attribute and we can divide the screen pieces by using flex.
• SizeBox: We can use width and height for controlling child width and height.
• Align: The widget that is used to align its child within itself and optionally sizes itself based on the child’s size.

Sources

Flutter - Dart API docs