FincaConnect β€” Flutter Widget Previews

Design System Β· Componentes UI previsualizaciΓ³n aislada Β· Flutter 3.38+

flutter widget-preview
4
Widgets con @Preview
12
Instancias de preview
2Γ—
Temas (light/dark)
0ms
Rebuild hot-reload
Flutter Widget Previewer
Flutter Widget Preview Β· Chrome Β· localhost:51234
● EN VIVO
fincaCardPreview() Cards
La Dehesa Norte
Municipio de Badajoz
🌾
HectΓ‘reas 142 ha
Cultivo Trigo blando
CampaΓ±a 2025/2026
⚠ Riego pendiente · Zona Sur
fincaCardDarkPreview() Cards
La Dehesa Norte
Municipio de Badajoz
🌾
HectΓ‘reas 142 ha
Cultivo Trigo blando
CampaΓ±a 2025/2026
⚠ Riego pendiente · Zona Sur
alertaBadgePreview() Badges
Info Warning Critical
alertaBadgeDarkPreview() Badges
Info Warning Critical
estadoCultivoPreview() Chips
🌱En curso 🌻Cosechado 🟀En barbecho
botonPrimarioPreview() Buttons
CΓ³digo Dart generado
🎯 lib/widgets/finca_card.preview.dart
// finca_card.preview.dart β€” FincaConnect Design System
// Flutter 3.38+ Β· package:flutter/widget_previews.dart

import 'package:flutter/widget_previews.dart';
import 'package:flutter/material.dart';
import 'package:fincaconnect/widgets/finca_card.dart';
import 'package:fincaconnect/widgets/alerta_badge.dart';
import 'package:fincaconnect/widgets/estado_cultivo_chip.dart';
import 'package:fincaconnect/widgets/boton_primario.dart';

// ─── MultiPreview: light + dark automΓ‘tico ───────────────────────────────────

final class MultiBrightnessPreview extends MultiPreview {
  const MultiBrightnessPreview({required this.name});
  final String name;

  @override
  List<Preview> get previews => const [
    Preview(brightness: Brightness.light),
    Preview(brightness: Brightness.dark),
  ];

  @override
  List<Preview> transform() {
    return super.transform().map((p) {
      return (p.toBuilder()
        ..group = 'FincaConnect DS'
        ..name = '$name Β· ${p.brightness!.name}')
        .toPreview();
    }).toList();
  }
}

// ─── FincaCard previews ───────────────────────────────────────────────────────

@MultiBrightnessPreview(name: 'FincaCard Β· estΓ‘ndar')
Widget fincaCardPreview() => FincaCard(
  nombre: 'La Dehesa Norte',
  municipio: 'Badajoz',
  hectareas: 142.0,
  cultivo: 'Trigo blando',
  alerta: '⚠ Riego pendiente · Zona Sur',
);

@Preview(name: 'FincaCard Β· compact', group: 'Cards',
         size: Size(220, 80))
Widget fincaCardCompactPreview() => const FincaCard.compact(
  nombre: 'La Dehesa Norte',
  hectareas: 142.0,
);

// ─── AlertaBadge previews ─────────────────────────────────────────────────────

@MultiBrightnessPreview(name: 'AlertaBadge Β· info')
Widget alertaBadgeInfoPreview() =>
    const AlertaBadge(severidad: Severidad.info, texto: 'ActualizaciΓ³n disponible');

@MultiBrightnessPreview(name: 'AlertaBadge Β· warning')
Widget alertaBadgeWarningPreview() =>
    const AlertaBadge(severidad: Severidad.warning, texto: 'Riego pendiente');

@MultiBrightnessPreview(name: 'AlertaBadge Β· critical')
Widget alertaBadgeCriticalPreview() =>
    const AlertaBadge(severidad: Severidad.critical, texto: 'Plaga detectada');

// ─── EstadoCultivoChip previews ───────────────────────────────────────────────

@Preview(name: 'Chip Β· en curso', group: 'Chips')
Widget chipEnCursoPreview() =>
    const EstadoCultivoChip(estado: EstadoCultivo.enCurso);

@Preview(name: 'Chip Β· cosechado', group: 'Chips')
Widget chipCosechadoPreview() =>
    const EstadoCultivoChip(estado: EstadoCultivo.cosechado);

// ─── BotonPrimario multi-size ──────────────────────────────────────────────────

final class SizePreview extends MultiPreview {
  const SizePreview();

  @override
  List<Preview> get previews => const [
    Preview(name: 'large'), Preview(name: 'medium'), Preview(name: 'small'),
  ];
}

@SizePreview()
Widget botonPrimarioPreview(String name) =>
    BotonPrimario(label: 'Ver mi finca', size: ButtonSize.values
      .firstWhere((s) => s.name == name));
Checklist de implementacion
βœ… Workflow: Anadir vista previa a FincaConnect
βœ“
Importar package:flutter/widget_previews.dart
βœ“
Identificar targets validos (funciones top-level / constructores)
βœ“
Aplicar anotacion @Preview con name + group
βœ“
Crear MultiBrightnessPreview para light/dark automatico
βœ“
AΓ±adir size: en FincaCard compact (widget sin constraints)
βœ“
Callbacks publicos y constantes en todas las previews
βœ“
Assets con ruta packages/fincaconnect/...
βœ“
Verificar sin dependencias dart:io / dart:ffi
βœ“
Ejecutar flutter widget-preview start
βœ“
Iterar: editar β†’ hot reload β†’ observar β†’ revisar errores
Parametros de la anotacion @Preview
Parametro Tipo Uso en FincaConnect Req.
name String? 'FincaCard Β· light', 'AlertaBadge Β· warning'… opcional
group String? 'Cards', 'Badges', 'Chips', 'Buttons' opcional
brightness Brightness? Brightness.light / Brightness.dark (via MultiPreview) opcional
size Size? Size(220, 80) para FincaCard compact sin constraints opcional
theme PreviewThemeData Function()? _fincaThemeBuilder() con verde #2E7D32 opcional
Estructura de archivos
fincaconnect/ β”œβ”€β”€ lib/ β”‚ β”œβ”€β”€ widgets/ β”‚ β”‚ β”œβ”€β”€ finca_card.dart β”‚ β”‚ β”œβ”€β”€ finca_card.preview.dart ← @Preview aqui β”‚ β”‚ β”œβ”€β”€ alerta_badge.dart β”‚ β”‚ β”œβ”€β”€ alerta_badge.preview.dart ← @MultiBrightnessPreview β”‚ β”‚ β”œβ”€β”€ estado_cultivo_chip.dart β”‚ β”‚ └── boton_primario.dart β”‚ └── main.dart β”œβ”€β”€ test/ └── pubspec.yaml ← Flutter β‰₯3.38 required