Widgets
Material y Cupertino, agrupados por lo que hacen.
- Texto
- Botón
- Formulario
- Selector
- Lista
- Layout
- Navegación
- Diálogo y superposición
- Visualización
- Efectos
- Interacción
- Builder
Funciones
Todo lo que necesitas para pasar de leer sobre un widget a usarlo: sin configuración, sin boilerplate, sin adivinar.
Cada ejemplo se ejecuta dentro de la app. Toca, desplázate y escribe para ver cómo se comporta de verdad.
El código completo y ejecutable está a una pestaña de su vista previa.
Explora por grupo (texto, formularios, layout, navegación) o busca por nombre.
Guarda los ejemplos que consultas a menudo y encuéntralos con un toque.
Elige el tema de sintaxis que mejor lees, en modo claro u oscuro.
Toda la app en inglés, portugués y español.
Aprende haciendo
Abre cualquier ejemplo y alterna entre lo que hace y cómo está escrito. Entiéndelo, cópialo y úsalo en tu propio proyecto.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: ActionChipSample(),
),
);
}
/// Sample demonstrating `ActionChipSample`.
class ActionChipSample extends StatefulWidget {
/// Creates a [ActionChipSample].
const ActionChipSample({super.key});
@override
State<ActionChipSample> createState() => _ActionChipSampleState();
}
class _ActionChipSampleState extends State<ActionChipSample> {
bool _isFavorite = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ActionChip(
onPressed: () {
setState(() {
_isFavorite = !_isFavorite;
});
},
avatar: Icon(
_isFavorite ? Icons.favorite : Icons.favorite_border,
),
label: Text(
_isFavorite ? 'Favorited' : 'Favorite',
),
),
const SizedBox(width: 12),
ActionChip(
avatar: Icon(
_isFavorite ? Icons.favorite : Icons.favorite_border,
),
label: Text(
_isFavorite ? 'Favorited' : 'Favorite',
),
),
],
),
),
);
}
}El catálogo
Desde un simple widget Text hasta una pantalla de chat completa, todo agrupado como lo buscarías.
Material y Cupertino, agrupados por lo que hacen.
Paquetes populares de pub.dev, como dio, shimmer y flutter_svg, en vivo.
Diálogos, menús, selectores y otras funciones esenciales.
Piezas de interfaz reutilizables para patrones comunes.
Pantallas completas: login, chat, cliente de correo y más.
46 paquetes de pub.dev, cada uno ejecutándose en vivo en la app
Dentro de la app
Una interfaz limpia que no estorba, para que el código tenga toda tu atención.
01Inicio, con todos los grupos de componentes
02Catálogo de elementos
03Catálogo de pantallas de ejemplo
04El catálogo de widgets, con búsqueda y favoritos
05La vista previa en vivo de un widget
06El código fuente del mismo widget
07Catálogo de paquetes
08Ajustes
09Selector de tema de código
Código abierto
Toda la app está en GitHub bajo la licencia MIT. Mira cómo está hecha, abre un issue o envía el ejemplo que te gustaría que existiera.
Hecho con Flutter, Riverpod y go_router
Widgets, paquetes, ideas de interfaz y correcciones son bienvenidos. La guía de contribución explica la configuración y el control de calidad.
CI en cada cambio
Formato, análisis estático, pruebas y cobertura se ejecutan en cada pull request.
Lints estrictos
El código sigue el conjunto de reglas very_good_analysis.
Metas de cobertura
El build falla por debajo del 95% de cobertura de líneas, 98% en el design system.
Versiones documentadas
Cada versión queda registrada en un changelog público.
Novedades
Las versiones más recientes, directo del changelog de la app.
Las notas de versión se publican en inglés, como en el repositorio de la app.
Expanded wrapper from the dialog button widgetFAQ
¿No encuentras lo que buscas? Abre un issue en GitHub.
Empieza ya
Descarga FlutterGuide gratis y lleva más de 216 ejemplos ejecutables en tu bolsillo.