Communitygithub.com

flutter/flutter-managing-state

Gestiona el estado de la aplicación y el estado efímero en una aplicación Flutter. Útil para compartir datos entre widgets o manejar transiciones de estado complejas en la interfaz de usuario.

¿Qué es flutter-managing-state?

Esta habilidad de Flutter está diseñada para simplificar la gestión de estado en aplicaciones Flutter, abarcando tanto el estado de aplicación (global y persistente) como el estado efímero (local y temporal). Es particularmente útil cuando se necesita compartir datos entre múltiples widgets o manejar transiciones de estado complejas en la interfaz de usuario, evitando el 'prop drilling' y el código repetitivo. Compatible con Flutter y Dart, se basa en patrones y paquetes oficiales como Provider, Riverpod, Bloc, o GetX, dependiendo de la complejidad del proyecto. La habilidad guía al desarrollador en la elección del enfoque adecuado, generando código limpio y mantenible que separa la lógica de negocio de la presentación, y ofrece ejemplos concretos de implementación para escenarios comunes como formularios, listas dinámicas y sincronización con APIs.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-managing-state

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace flutter-managing-state?

Gestiona el estado de la aplicación y el estado efímero en una aplicación Flutter. Útil para compartir datos entre widgets o manejar transiciones de estado complejas en la interfaz de usuario.

Descripción

Esta habilidad proporciona las herramientas y patrones necesarios para gestionar eficazmente el estado en aplicaciones Flutter. Cubre tanto el estado efímero (local a un widget, como la selección de una pestaña) como el estado de aplicación (compartido entre widgets, como el usuario autenticado o el carrito de compras).

Plataformas Soportadas

  • Flutter (SDK estable)
  • Dart 2.17+
  • Paquetes recomendados: Provider, Riverpod, Bloc, GetX

Comandos y Uso

Para utilizar esta habilidad, asegúrate de tener el paquete adecuado en tu archivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

Ejemplo de Estado Efímero con Provider

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Ejemplo de Estado de Aplicación

Para estado de aplicación, puedes usar ChangeNotifierProvider a nivel de raíz:

ChangeNotifierProvider(
  create: (context) => AuthProvider(),
  child: MaterialApp(
    home: HomePage(),
  ),
)

Mejores Prácticas

  • Separación de responsabilidades: Mantén la lógica de negocio separada de la UI.
  • Inmutabilidad: Prefiere el uso de objetos inmutables para el estado.
  • Escalabilidad: Para aplicaciones grandes, considera usar Riverpod o Bloc en lugar de Provider simple.
  • Pruebas: El estado gestionado es más fácil de probar unitariamente.

Enlaces Útiles

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-adding-home-screen-widgets

Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

flutter/flutter-add-integration-test

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-add-widget-test

Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

Skills relacionados