What is the difference between Stateful and Stateless widgets?

• StatelessWidget:

  • Does not have internal state that can change over time.
  • Widget parameters are set at creation and remain unchanged throughout its lifecycle.
  • Used for displaying static data.
  • Rebuilds only when the parent widget rebuilds.
  • Implemented with the build() method.

• StatefulWidget:

  • Has an internal state (State) that can change in response to events (user actions, network requests, etc.).
  • Widget rebuilds when setState() is called.
  • Used for creating interactive elements and displaying dynamic data.
  • Consists of two parts: the StatefulWidget itself and the associated State object.

Attribute	StatelessWidget	StatefulWidget
State	Does not have	Has mutable state (State)
Rebuilds	When the parent rebuilds	When setState() is called
Usage	Static data, non-interactive elements	Interactive elements, dynamic data
Implementation	Only the build() method	createState() and lifecycle methods in State

// Example of StatelessWidget
class MyStatelessWidget extends StatelessWidget {
  final String text;

  MyStatelessWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text); // Simply displays the passed text
  }
}

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

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

  void _incrementCounter() {
    setState(() {
      // Change state and trigger rebuild
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Counter:'),
        Text('$_counter'),
        ElevatedButton(
          onPressed: _incrementCounter, // Call method on press
          child: Text('Increase'),
        ),
      ],
    );
  }
}