Communitygithub.com

flutter/flutter-architecting-apps

Arquitectura una aplicación Flutter utilizando el enfoque de capas recomendado (UI, Lógica, Datos). Úselo al estructurar un nuevo proyecto o refactorizar para escalabilidad.

¿Qué es flutter-architecting-apps?

Este skill está diseñado para arquitectos de software y desarrolladores que trabajan con Flutter y desean aplicar una estructura de capas limpia y escalable en sus aplicaciones. Basado en el enfoque de capas recomendado (UI, Lógica, Datos), el skill guía al usuario en la creación de una nueva aplicación Flutter o en la refactorización de una existente para mejorar la mantenibilidad y escalabilidad. Soporta plataformas como Android, iOS y web, y se integra con herramientas de desarrollo comunes como Dart y Flutter CLI. El skill proporciona plantillas, ejemplos de código y convenciones de nomenclatura para cada capa, asegurando una separación clara de responsabilidades y facilitando la prueba unitaria. Es especialmente útil en proyectos grandes o en equipos donde se requiere consistencia arquitectónica.

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

Preguntar en tu IA favorita

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

Documentación

¿Qué hace flutter-architecting-apps?

Arquitectura una aplicación Flutter utilizando el enfoque de capas recomendado (UI, Lógica, Datos). Úselo al estructurar un nuevo proyecto o refactorizar para escalabilidad.

Resumen

Este skill proporciona una guía paso a paso para aplicar la arquitectura de capas en Flutter, separando la interfaz de usuario, la lógica de negocio y el acceso a datos. Es ideal para proyectos nuevos o existentes que necesitan una estructura más robusta y mantenible.

Cómo usar

  1. Ejecute el flujo de trabajo flutter/flutter-architecting-apps desde la interfaz de su agente.
  2. Proporcione el nombre de su proyecto o la ruta a un proyecto existente.
  3. El skill analizará la estructura actual y sugerirá modificaciones o generará la estructura base.

Capas

  • UI: Contiene widgets y pantallas. Ejemplo: lib/ui/
  • Lógica: Contiene controladores, proveedores o blocs. Ejemplo: lib/logic/
  • Datos: Contiene repositorios, fuentes de datos y modelos. Ejemplo: lib/data/

Ejemplo de estructura

lib/
├── ui/
│   └── home_screen.dart
├── logic/
│   └── home_controller.dart
└── data/
    └── user_repository.dart

Plataformas compatibles

  • Android
  • iOS
  • Web
  • Desktop (experimental)

Notas

  • Asegúrese de tener Flutter SDK instalado.
  • El skill respeta las convenciones de Dart y Flutter.
  • Para más detalles, consulte la documentación oficial de Flutter sobre arquitectura.

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-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

flutter/flutter-embedding-native-views

Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.

Skills relacionados