Flutter: Stateless vs Stateful widgets

Flutter is a mobile application development framework developed by Google. You need to understand the fundamental building blocks before you dig deeper into Flutter framework. Everything is a widget in Flutter. You need to build / construct your business views by composing various widgets available with in the framework. In some case you may need to compose completely a new widgets to meet your business requirements. To do that, you have to understand the basic principles of stateless and stateful widget concepts in detail. You can learn the basics concepts about these widgets in the below article.

Stateless widget

Stateless widget is a basic composition model to start building your apps. As the name suggests, these type widgets will not have any state management. In a simple term, these will not have any reactive behavior in nature.

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello world!');
  }
}

Stateful widget

In contrast to the stateless widget, these type of widgets are reactive in nature and will also maintain state with in itself. We need to have 2 different classes to build a stateful behavior to our apps. One represent the state and the other one represent t

//Counter widget
class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CounterState();
  }
}

//Counter state
class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return _build(context);
  }

  Widget _build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Stateful'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.plus_one),
        onPressed: _onFabPressed,
      ),
      body: _buildBody()
    );
  }

  Widget _buildBody() {
    return Center(
      child: Text('Counter value: $_count'),
    );
  }

  void _onFabPressed() {
    setState(() {
      _count++;
    });
  }
}

In the above example, we have a simple count variable which will be incremented based on the user click. So the count variable is reactive and the ui should be refreshed / rebuilt to reflect in the apps.

The setState() method is used to mark the ui should be rebuilt again in-order to reflect the changes.

With these fundamental concepts we can build any complex widgets which is required for your apps.

{ Happy coding }

API Evangelist | Chief Hustler @workrituals.com | Habit Coach | Madras Java User Group Leader
78FollowersFollow
0SubscribersSubscribe

Latest articles

Flutter: How does column layout work?

Layouts are the fundamental starting points for developing Flutter applications. There are many layout options are available by default. I am going...

Flutter: Stateless vs Stateful widgets

Flutter is a mobile application development framework developed by Google. You need to understand the fundamental building blocks before you dig deeper...

Why Flutter is a great technology for makers &...

As per the wikipedia, Flutter is an open source UI development kit created by Google. It is used to...

Why 12-Factory methodology matters to your Microservice development?

The 12-Factor application development methodology and why is it important for your microservices strategy

When to use Firebase Cloud functions?

Recently I got a question from one of the Indie makers that, when to use Firebase Cloud Functions? This...

Similar articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here