Aprende StatefulWidget Lifecycle | Understanding State in Flutter

To build robust and interactive apps with Flutter, you need a strong grasp of the StatefulWidget lifecycle. This lifecycle defines how Flutter creates, updates, and destroys stateful widgets, allowing you to manage resources, respond to changes, and keep your UI in sync with your data.

The primary lifecycle methods for a StatefulWidget are:

Constructor: called when the widget is first created;
initState: called exactly once when the State object is inserted into the widget tree;
build: called whenever Flutter needs to render the widget;
didUpdateWidget: called when the parent widget rebuilds and passes new data to this widget;
dispose: called when the widget is permanently removed from the widget tree.

Each method serves a specific purpose and is called at a predictable moment in your widget's life. Understanding the order and role of these methods helps you write widgets that are efficient, bug-free, and easy to maintain.

main.dart


              12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
            
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp build');
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget Lifecycle Demo')),
        body: Center(child: LifecycleDemo()),
      ),
    );
  }
}

class LifecycleDemo extends StatefulWidget {
  LifecycleDemo() {
    print('LifecycleDemo constructor');
  }

  @override
  _LifecycleDemoState createState() {
    print('LifecycleDemo createState');
    return _LifecycleDemoState();
  }
}

class _LifecycleDemoState extends State<LifecycleDemo> {
  int counter = 0;

  _LifecycleDemoState() {
    print('_LifecycleDemoState constructor');
  }

  @override
  void initState() {
    super.initState();
    print('initState');
  }

  @override
  void didUpdateWidget(LifecycleDemo oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: $counter'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              counter++;
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    print('dispose');
    super.dispose();
  }
}

You see a LifecycleDemo widget that logs each lifecycle method call to the console. When the app starts, the sequence begins with the widget's constructor, followed by createState and the state object's constructor. initState is called once after the state object is created and before the widget is rendered for the first time. The build method is then called to paint the widget on the screen.

Note

Each time you press the Increment button, setState is called, which triggers the build method again. This is how Flutter updates the UI in response to state changes. If the parent of LifecycleDemo rebuilds and provides new data, didUpdateWidget is called to let the widget respond to the updated configuration.

Finally, when the widget is removed from the tree (such as when navigating away from the screen), the dispose method is called. This is where you should release resources like animation controllers or stream subscriptions to prevent memory leaks.

By observing the console output as you interact with the widget, you can see the exact order of lifecycle events and understand the role each method plays in managing your widget's state.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 3

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Desliza para mostrar el menú