What are Widgets?

4 min readAug 6, 2021

Widget is the most popular word and you might heard in flutter, everything is widget. So in this article, we'll see what is widget and types of widgets….

Hi guys….I hope you are doing good🤞… So we’ll just discuss what widget is and we’ll have a look on each and every widget in detail😃.This article is mostly helpful for beginners😉.

What is Widget ?

The building block of flutter applications. Widgets describe what their view should look like given their current configuration and state.

In simple words, each element on a screen of flutter app is a widget. It includes a text widget, row widget, column widget, container widget, and many more. The view of the screen completely depends upon the choices and sequence of the widgets used to build the app.

The structure of the code of an app is a tree of widgets. The Entire widget tree forms a layout that you see on the screen.

Types of Widgets:

Flutter divides widgets into two categories:

Stateless Widgets
Stateful Widgets

Stateless Widgets :

A stateless widget never changes and can only be drawn once when the Widget is loaded/built. A stateless widget cannot be redrawn based on any events or user actions. We create a Stateless widget by extending our class from Stateless Widget.

class Home extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(              //Here goes the UI of the screen      ));
    }
}

Button, Icon, and text are the examples of stateless widget.

Stateful Widgets :

A stateful widget is dynamic ; for example, it can change its appearance in response to event triggered by user interactions or when user receives data.

The build(…) method of state can be called multiple times during its lifetime and every build may return new or different widgets based on various parameters

class Home extends StatefulWidget {
     @override
    _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
     @override
    Widget build(BuildContext context){
       return Container(
          //Here goes the UI of the screen
       );
    }
}

CheckBox, Radio, Slider, Stepper, InkWell…..are examples of stateful widgets.

LifeCycle of Stateful Widget:

When Flutter builds a stateful widget, it first executes the constructor function of the widget and then calls the createState() method.

If we look at the stateful widget, the constructor function is executed first. On the other hand, if we look at the State object of the stateful widget, its lifecycle starts when the createState() method is called.

Note: The constructor function is not part of the lifecycle because the state of the widget property is empty at that time.

1. createState():

This method creates a State object.This method is required within the StatefulWidget:

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

2. initState():

When the object is inserted into the tree , this method is automatically executed after the class constructor. initState() is called only once, when the state object is created for the first time.

@override
void initState() {
 super.initState();
 // TODO: implement initState
}

3. didChangeDependencies()

The framework will call this method immediately after theinitState(). It will also be called when an object depends on changes.

@protected
@mustCallSuper
void didChangeDependencies() { }

It will also be called whenever an object that this widget depends on data from is called. For example, if it relies on an InheritedWidget, which updates.
The build method is always called after didChangeDependencies is called, so this is rarely needed.

4. build()

This method is required and it will be called many times during the lifecycle, but the first time is after the didChangeDependencies() method. So whenever the widget that belongs to the state is updated, the framework will always execute this method (i.e. every time didUpdateWidget() or setState() method is called).

5. didUpdateWidget()

Gets called if the parent widget changes its configuration and has to rebuild the widget. The framework gives you the old widget as an argument that you can use to compare it with the new widget. Flutter will call the build() method after it.

@override
void didUpdateWidget(covariant Home oldWidget) {
  super.didUpdateWidget(oldWidget);
  // TODO: implement didUpdateWidget
}

setState()

This method is often called from the Flutter framework itself and from the developer. The setState() method notifies the framework that the internal state of the current object is “dirty,” which means that it has been changed in a way that might impact the UI. After this notification, the framework will call the build() method to update and rebuild a widget.

setState(() {
  // implement setState
});

6. dispose()

This is called when the State object is removed permanently from the widget tree.

@override
void dispose() {
  super.dispose();
  // TODO: implement dispose
}

Hurray…!🎉 you have just understood the states of widgets….

Thank you…🙌 If you have any queries please do comment below. Happy learning..!👍