Introduction to Widgets in Flutter and Their Uses

Zia

1 Follower

Apr 19, 2024

14 min read

110

widgets in flutter

In Flutter, everything is a widget. If the user wants to add anything, anywhere, and anyhow then, widgets are used.

The main purpose is to create an application from widgets and to describe how the application view should look with the current configuration and state. When any change is made in the code, the widget remakes its description by figuring out the difference between the previous widget and the current widget to settle the minimum changes for rendering in the application user interface.

Types of Widgets in Flutter

1. Platform-Specific:

Platform-specific, one majorly develops applications for Android and iOS and each platform has its guidelines. For Android, it is a Material design guideline and Android-specific widgets are called Material Widgets in Flutter.

Some of the Material Widgets are as follows:

TabBarView
ListTile
Raisedbutton
FloatingActionButton
FlatButton
IconButton
Dropdownbutton
PopupMenuButton
ButtonBar
TextField

For i0S (Apple), it is Human Interface Guidelines and i0S-specific widgets called Cupertino widgets.

Some of the Cupertino widgets are as follows:

CupertinoTimerPicker
CupertinoNavigationBar
CupertinoTabBar
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField
CupertinoDialog
CupertinoDialogAction

2. Platform Independent/Basic Widgets:

Under platform-independent Widgets, Flutter provides a large number of basic widgets to create simple or complex UI in a platform-independent manner.

Text (string, options)
Image (source)
Icon (icon_name)

3. State Maintenance Widgets:

State maintenance widgets are those in which the widgets are arranged according to the state.

Stateless widgets:
Stateless widgets are fixed, and their behavior does not change.
Examples - icons, text.

Stateful Widgets:
Stateful widgets change with the user interface and this widget has one variable named state. In this variable, the current state of the widget is stored.

Stateful widgets have one method called setState which is important to call when one wants to change any widget.

4. Layout widgets:

In Flutter, a widget may contain one or more widgets. Flutter comes up with a huge number of widgets along with layout features to merge multiple widgets into a single one. For example, the center widget helps to bring the child widget to the center. Some of the widgets that work with layout widgets are as follows:

Container
Column
Row
Stack
Center

Types of Layout Widgets

Layout widgets are classified into two types. It is classified based on the children it has.

Single-child Layout Widgets
Multi-child Layout Widgets

1. Single-child Layout Widgets:

Single-child layout widgets can have only one child. They tend to have children on their property, to which only one child can be assigned. They are:

Align: This widget aligns the child inside itself and it optionally resizes to fit the size of the child.
AspectRatio: This widget tries to resize the child to a particular aspect ratio.
Baseline: A widget that places its child according to the child's baseline.
Center: This widget centers its child within itself.
ConstrainedBox: This widget imposes additional limitations on its children.
Container: A convenience widget that combines the common paint, position, and size widgets.
CustomSingleChildIayout: This widget holds up the layout of the single child for a representative.
Expanded: This widget expands a row, column, or bend child.
FittedBox: It measures and fits babies in it based on how they fit.
FractionallySizedBox: A utility that resizes the child to a fraction of the total available space.
Intrinsic height: A widget that will adjust the size of its child to the actual height of the child.
IntrinsicWidth: A widget that will adjust the size of its child to the intrinsic width of the child.
LimitedBox: This box limits its size only if it is not limited.
Offstage: A widget that keeps out the child as if he is in a tree, without painting, without the child being available for intervention.
OverflowBox: This widget imposes different restrictions on the child than it receives from the parent, which may also allow the child to overflow the parent.
Padding: This widget inserts the child conforming to the padding given.
SizedBox: This box has a frame size. If this is given to the child, this widget forces the child to have a specified width and/or height.
SizedOverflowBox: This widget has a certain size, but shifts its actual limitations to its child, which is likely to overflow.
Transform: This widget applies a transform before painting the child.

2. Multi-child Layout Widgets:

Multi-child layout widgets can have more than one child and the layout of these widgets is unique. Some of the multi-child widgets are as follows:

Column: Lays out the child widget list in a vertical direction.
CustomMultiChildLayout: This widget uses a representative to resize and position multiple children.
Flow: This widget executes the flow distribution algorithm.
GridView: A grid list includes repeating cell patterns arranged in a vertical and horizontal layout. The Gridview widget executes this component.
Indexed Stack: This stack displays only one child from the children's list.
LayoutBuilder: Creates a tree of widgets that can depend on the parent widget size.
ListBody: This widget sets its children consecutively along the given axis and forces them to the other axis which is the parent's dimension.
ListView: A scrollable, direct widget list. ListView is a commonly used scrolling widget. It exhibits the children one by one in the scrolling direction.
Row: This lays out the Child widget list in a horizontal direction.
Stack: This is used when multiple children want to be overlaid easily, such as overlaying some text and an image.
Table: In this widget, a table layout algorithm is used for its children.
Wrap: The widget that exhibits children in several horizontal or vertical cycles.