Flutter Widgets

Widgets are the reason why flutter, Google’s UI toolkit is unique and more elegant in many ways than other hybrid frameworks.

As per official documentation,

“Each and everything in flutter is Widget.”

In flutter, all the UI components or elements through which users can communicate are flutter widgets.

Widgets are built to design your flutter applications in most elegant and smoother way. Whatever the application UI a user can see and interact is thankful to flutter widgets.

Basically, widgets are used to build and describe the UI elements of a flutter application.

Flutter widgets are equivalent to Android Views, iOS UI Controllers, React Native Components and Ionic Controllers.

In flutter, Widgets are not just UI elements. Flutter widgets can update child elements, respond to user interaction, manage app state, act on lifecycle method events and so on.

Flutter has a wide range of cool widgets like, Text, AppBar, RaisedButton, IconButton, PageView, CircularProgressIndicator and many more.

In flutter, there are two types of widgets

• Stateless Widget
• Stateful Widget

Before, learning about stateful and stateless widgets. Let’s take a look on State

State

According to official documentation,

State is whatever data you need in order to rebuild your UI at any moment in time while your app is running.

State is the structural representation of your UI which keeps track of app’s assets, all the variables on which screen UI depends, fonts, textures, animation state and so on.

Now, you we have idea about state we can move to the introduction of stateless and stateful widgets.

Stateless Widget

A widget which can’t change/mutate it’s state is known as Stateless Widget.

A stateless widget never changes/redraw its UI. Icon, Text, IconButton are examples of Stateless Widget.

Syntax of a Stateless Widget

import ‘package:flutter/material.dart’
class StatelessSample extends StatelessWidget {
  final String title;
  StatelessSample(this.title);
  
  @override
  Widget build(BuildContext context) {
    // Your Stateless Widget UI Goes Here
    return Scaffold(body: Center(child: Text("Stateless Widget")));
  }
}

Every stateless widget has a build method for drawing/rendering their widget UI. Stateless widget can also have a constructor method to get the parameters from parent widgets.

We use Stateless widgets to display static content.

To create a Stateless widget, you need to extend your class from Stateless Widget.

We need to use material.dart APIs to use built-in material design widgets in flutter.

We will learn more about stateless widget lifecycle methods and flutter syntax in upcoming tutorials.

Stateful Widget

A widget which can change/mutate it’s state is known as Stateful Widget.

Stateful widget can redraw it’s UI using a built-in setState() method for a stateful widget.

It has more complex lifecycle methods than stateless widgets as stateful widget’s state can be modified.

To create a Stateful widget you will need to create two classes.

1. A Stateful class – creates state of the stateful widget
2. A State class – updates UI of the stateful class based on state changes

A Stateful class should be extended from a StatefulWidget class.

class StatefulSample extends StatefulWidget {
}

A stateful class must implement createState() method.

@override
StatefulSampleState createState() => StatefulSampleState();

createState() method will need the reference of a new corresponding State class which keeps track of state of the stateful class.

// keeps track of state of StatefulSample class
class StatefulSampleState extends State {

}

Obviously, a build method is required to draw the UI of the widget. But, all the methods will take place in the state class instead of stateful class.

In this way if the state of the widget changes then Build method gets called again and re-renders the widget with updated state properties.

class StatefulSampleState extends State {
@override
Widget build(BuildContext context) {
return Container();
}
}

To change the state of the stateful widget, flutter provides built-in setState() method.

Syntax of a Stateful Widget

class StatefulSample extends StatefulWidget {
  final String title;
  StatefulSample(this.title);

  @override
  StatefulSampleState createState() => StatefulSampleState();
}

class StatefulSampleState extends State<StatefulSample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text(widget.title),
          onPressed: () {
            setState(() {
              // Calling setState() method will update the state of the UI and re-render the widget
            });
          },
        ),
      ),
    );
  }
}

A Stateful widget can also have a constructor in its stateful class. We can access properties and methods of a stateful class to its corresponding state class using widget variable.

Note :

“widget” variable can be accessed from methods only in state class.

For ex :

for accessing title property of a stateful class to corresponding state class inside build method using widget.title

So whenever we require dynamic content in widget which might change over time we should use Stateful widget.

Also, we will learn more about stateful widget lifecycle methods and flutter syntax in upcoming tutorials.

So this was the brief introduction on flutter widgets and its types.

Feel free to ask your questions in the comment section. Keep reading and commenting your suggestions to make toastguyz a better site to learn different programming languages.