How to create stateful and stateless widgets in Flutter

[shivankawasthi]

Flutter is a great framework for creating cross-platform mobile applications. One of the key features of Flutter is its widget system. Flutter widgets are the building blocks of your user interface. They are lightweight and efficient, and they can be used to create complex and beautiful user interfaces.

In this article, we'll take a look at how to create stateful and stateless widgets in your Flutter applications.

If you have any questions, please leave a comment below! 

What are stateful widgets?

Stateful widgets are widgets that maintain their state over time. This means that they can remember information from one moment to the next. For example, a stateful widget might remember the user's current location in a map application.

What are stateless widgets?

Stateless widgets, on the other hand, do not maintain their state over time. This means that they must be recreated each time they are needed. For example, a stateless widget might be used to display a list of items. Each time the list is displayed, the widget will be recreated from scratch.

When should you use stateful vs stateless widgets?

Stateful widgets are typically used for things like user interfaces that need to remember information from one moment to the next. Stateless widgets are typically used for things like user interfaces that do not need to remember information from one moment to the next.

Creating stateful and stateless widgets in Flutter

To create a stateful widget, you need to use the State class. This class provides a way to store information about your widget. You can then use this information to create a widget that remembers its state over time.

To create a stateless widget, you do not need to use the State class. This is because stateless widgets do not need to remember information from one moment to the next.

Here is an example of how to create a stateful widget:

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  State createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Stateful Widget'),
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

Here is an example of how to create a stateless widget: 

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Stateless Widget'),
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

As you can see, creating stateful and stateless widgets is quite simple. You can use these widgets to create complex and beautiful user interfaces in your Flutter applications.

---

Authored by:

• Shivank Awasthi (@shivankawasthi) Strategic Cloud Engineer, Google
• Utkarsh Bhardwaj (@bhardwaju) Cloud Migration Consultant, Google

Video by:

• Amit Dutta (@amitdutta) Strategic Cloud Engineer, Google