Flutter Widgets Explain :

Muhammad Rameez

5 min readMar 29, 2022

In Flutter every widget is written after it’s attribute, like

appbar : AppBar()

child: Column()

drawer: Drawer()

body : Scaffold ()

The Flutter Application code starts from “ void main '’ then comes our Application Widget name with it’s attribute (runApp) like :

void main (runApp: MyApp());

Material App Widget :

This is the parent widget of Flutter UI Widget. This is like the canvas of Flutter Drawing.
Material App have an attribute of home that extend the *Scaffold* Widget.

Scaffold Widget :

Scaffold Widget mainly have four components : appbar, body, child, bottomNavigationbar.
We can also add drawer : Drawer() in our Appbar and then Design it accordingly.
Similarly we can add Bottom Navigation Bar and include there assets in BNB.

In Flutter we need to include the dependency in our pubspec.yml file to use it in the application.

There are Two type of Widgets that we use in Flutter as a parent widget

Stateful Widget
Stateless Widget

Stateful Widget :

Stateful Widget is used when we need an updation on our screen.
Any Graphics, number or image can be updated into the parent screen by using a parent widget “ Stateful Widget ". But We need to add *setState* function which is a child of Stateful Widget which the text, image, or color that we want to update.
Shortcut of Stateful Widget is “ stfull — Tab '’.

setState :

setState basically update the screen and can be used only with Stateful Widget.

Stateless Widget :

Stateless Widget is used when there isn’t any need of screen updation in an application. When the app screen is static then we use stateless Widget.
The shortcut of stateless Widget is “ stless — Tab '’

Some Most Commonly Used Widgets :

Column widget :

As, the name tell it’s bio, Column widget is used to add widgets in an app Vertically. Column widget is used to add widgets as children as many as we can.
Column widget carry an attribute of “child : Column '’ but it have children property we means we can add widget in Column through children property without using the attribute of child in children

e.g

child : Column (
children [
Text (“ This is Muhammad Rameez '’),
Container (
height: 120,
width : 150,

color: Colors.Teal,

),],)

Row Widget :

Row widget is similar to column widget the only difference is, we can add Widgets in Row widget horizontally. It have the same property of children[].
Both Row and Column have two external properties which is used to align the elements in a Row/Column. One is CrossAxisAlignment and other is MainAxisAlignment.
Cross Axis Alignment basically handle horizontal alignment s and Main Axis Alignment handle vertical alignments.

Text widget :

Text widget is most commonly used widget in Flutter. Text widget is used to enter the “Text” in a App Canvas. The styling of Text can be done by using TextStyle() widget
TextStyle have some properties like fontSize, color, fontWeight.

Container Widget :

Container Widget is used to make custom elements like buttons, headers, footers. Container have margin and padding property
Margin property is used to add margin or gap between two widgets. It is used with margin attribute but EdgetInsect property like margin: EdgeInsect.only (top: 15, left : 5 )
Similar in case of Padding but padding add gap inside in widget hence widget get shrink. Padding is used as padding: EdgeInsect.only (top: 15, left : 5 )
It also have box decoration property which have number of child properties like radius, shape, color, blurradius, offset, gradiant.

Appbar widget :

Appbar widget is used to add the title bar of your application. It’s attribute Is appbar. We can also add drawer in appbar.
drawer extends Drawer. It have UserAccountDrawerHeader which have some properties like account name, account email, account picture, other pictures. We can also change the color of Drawer by using color property.

Custom Widget :

We can also made our own custom widgets and can be used throughout the application. All we need to now about constructor and overriding phenomenon.
This widget is very helpful for making complex application and tends towards less time consumption.

ListView widget :

ListView widget is used to create a list of items. ListView have a function called builder which is used to build the list again and again till the count that we have set.

Expanded widget:

Expanded widget takes all the possible available space between to widget of Row vise or in Column vise. This is very important widget for Flutter User interface design.