Design System Β· Componentes UI previsualizaciΓ³n aislada Β· Flutter 3.38+
// 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));
package:flutter/widget_previews.dart
@Preview con name + group
MultiBrightnessPreview para light/dark automatico
size: en FincaCard compact (widget sin constraints)
packages/fincaconnect/...
dart:io / dart:ffi
flutter widget-preview start
| 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 |