Aprende Common State Management Mistakes | Understanding State in Flutter

When working with state in Flutter, it is easy to fall into certain traps that can lead to bugs, performance issues, or unpredictable behavior. Here are some of the most common mistakes you should watch out for:

Improper use of setState():

Calling setState() when the widget is not mounted;
Updating state variables without wrapping them in setState(), so the UI does not update;
Placing heavy or asynchronous logic directly inside setState(), which can block the UI.

Overusing global variables:

Storing state in global variables or singletons, which can lead to unexpected changes, make testing difficult, and cause issues with hot reload;
Bypassing the widget tree, making it hard to track where and how state changes.

Not disposing resources:

Forgetting to call dispose() on controllers, streams, or other resources in StatefulWidget, leading to memory leaks;
Creating resources in the widget's build method instead of in initState(), causing them to be recreated on every rebuild.

Avoiding these mistakes will help you build apps that are more reliable, maintainable, and easier to debug.

main.dart


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  // Common mistake: updating state outside setState()
  void _incrementCounter() {
    _counter++; // UI will not update
    // setState is missing here
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter Example')),
      body: Center(
        child: Text(
          'Counter: counter',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

To avoid this and other common mistakes:

Always use setState() when changing state inside a StatefulWidget;
Never update state variables outside of setState() unless using another state management approach;
Dispose of any controllers or resources in the dispose() method to prevent memory leaks;
Avoid using global variables for state unless you have a clear architectural reason and understand the risks.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 5

Pregunte a AI

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

Desliza para mostrar el menú