Stateless vs Stateful Widget in Flutter

In Flutter, all UI (User Interface) components are a type of widget. There are only two types of widget :

1. Stateless widget
2. Stateful widget

Let's dive into them.

Also Read: Choosing Flutter Over Other Native App Development 

Stateless widget

A stateless widget can't change its state during the runtime of the application which means that it can't re-draw again when the app is running. They are immutable in nature.

class Home extends StatelessWidget {
  const Home({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
// here goes your UI of the screen
    );
  }
}

To create a stateless widget you have to override the build method by inheriting the Stateless widget class. The build method takes BuildContext as a parameter and returns the widget UI. You can draw your UI in the build method.

Note: The build will be called only once and if you want to redraw the widget you have to create a new instance of the widget.

Use: This type of widget is used when you don't need to redraw a widget again & again i.e. Icon, Text, or IconButton e.t.c. which has no internal state to manage.

Also Read: Top 10 Widgets For Flutter Application Development

Stateful widget

A stateful widget is dynamic. It can redraw itself multiple as required again and again. Its state is mutable. For example, when a button is pressed, the state of the widget can be changed or a data feed that causes change to a UI over time.

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
//  draw UI here
    );
  }
}

To create a stateful widget you have to extend from StatefulWidget class and it has to return the instance of the class in the createState(). The state class extends from State<widget name here>. The state class override the build method and return the widget, where you can add the UI for the app. You can call it to redraw multiple times using the setState method.

The concept of state can be defined by one key thing that the data used by the widget can be changed over time.

Use: Suppose you have to create a timer that updates its state by every second. If you build your entire app in stateful then it will redraw the whole app every second which is expensive. Instead, you can only make your timer text a stateful widget that will only update the second text every second as required, and it's much more efficient.

That's all for now for Stateful and Stateless widget in Flutter. We will dive more into the widgets next time.
 

Choose Oodles For Flutter App Development Services

Our Flutter app development services ensure that your app performs seamlessly across multiple platforms with minimal downtime or latency. We critically analyze your project requirements to formulate effective mobile app development strategies for better user engagement and interactivity.