Stateless and Stateful

In Flutter, widgets are the building blocks of the user interface. They are classified into two main categories: Stateless Widgets and Stateful Widgets.

Stateless Widgets

Definition:

Stateless Widgets are immutable, meaning their properties cannot change—once created, they cannot be modified. They are used for UI elements that do not need to change over time.

Use Cases:

Static UI elements.
Text, icons, or images that do not change dynamically.
Simple layout structures.

import 'package:flutter/material.dart';

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

Stateful Widgets

Definition:

Stateful Widgets maintain state that can change over time. They are used for UI elements that need to be dynamic or interactive.

Use Cases:

Forms or input fields where user input changes the state.
Animation or interactive components.
Any UI element that updates dynamically.

import 'package:flutter/material.dart';

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

`setState` function

The setState function is a crucial part of managing state in Flutter applications. It is used within stateful widgets to notify the framework that the state of the widget has changed and that the widget needs to be rebuilt with the new state. Here's a detailed explanation of how it works and its significance:

Purpose of setState

The primary purpose of setState is to trigger a rebuild of the widget tree when the internal state of the widget changes. This ensures that the UI reflects the current state.

How setState Works

Updating the State: You update the state variables inside the setState callback function.
Marking the Widget as Dirty: The framework marks the widget as "dirty," indicating that it needs to be rebuilt.
Rebuilding the Widget: The framework schedules a rebuild of the widget tree. During the next build phase, the widget tree is rebuilt with the updated state.

Key Points to Remember

State Management: Use setState to update state variables and trigger UI updates in response to user interactions or other events.
Efficiency: Only the widget marked as dirty and its descendants are rebuilt, not the entire widget tree, making setState efficient for updating UI.
Synchronous: The code inside setState is executed synchronously, so the state is immediately updated before the UI is rebuilt.

Stateless and Stateful

Stateless Widgets

Stateful Widgets

setState function

`setState` function