flutter/flutter-add-widget-preview

¿Qué hace flutter-add-widget-preview?

Añade vistas previas interactivas de widgets al proyecto usando el sistema previews.dart. Úsalo al crear nuevos componentes de UI o actualizar pantallas existentes para garantizar un diseño consistente y pruebas interactivas.

¿Qué hace?

Genera automáticamente archivos preview.dart junto a cada widget nuevo o modificado, permitiendo visualizar el widget en múltiples estados sin necesidad de ejecutar la app completa.

¿Por qué es útil?

• Acelera el desarrollo de UI al proporcionar retroalimentación visual instantánea.
• Mantiene la consistencia del diseño al mostrar ejemplos reales de uso.
• Facilita la colaboración en equipo permitiendo compartir vistas previas funcionales.

Plataformas compatibles

• VS Code
• Cursor
• Cualquier editor que soporte la vista previa de Dart/Flutter

Cómo funciona

1. Detecta la creación o modificación de un widget Flutter.
2. Genera un archivo preview.dart en el mismo directorio.
3. Incluye configuraciones para diferentes estados (vacío, con datos, con errores).
4. El editor muestra automáticamente la vista previa interactiva.

Ejemplo de uso

// En mi_widget.dart
class MiWidget extends StatelessWidget {
  final String titulo;
  final bool cargando;
  // ...
}

// El agente genera automáticamente:
// mi_widget_preview.dart

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            MiWidget(titulo: 'Hola', cargando: false),
            MiWidget(titulo: 'Cargando...', cargando: true),
            MiWidget(titulo: '', cargando: false),
          ],
        ),
      ),
    ),
  );
}

Configuración

No requiere configuración adicional. Solo asegúrate de tener la extensión Dart/Flutter instalada en tu editor.