Saltar al contenido
Nuevo en v1.3.0Ver novedades

Aprende Fluttercon ejemplos.

FlutterGuide es una app Android gratuita y de código abierto con más de 216 ejemplos ejecutables: widgets, paquetes, funciones y pantallas completas, cada uno con vista previa en vivo y el código detrás.

  • Gratis y open source
  • Sin registro
  • English, Português, Español
Pantalla de inicio de FlutterGuide, con grupos de componentes como Texto, Botón, Formulario y Layout
El código fuente del ejemplo de ActionChip, con números de línea

Funciones

¿Por qué FlutterGuide?

Todo lo que necesitas para pasar de leer sobre un widget a usarlo: sin configuración, sin boilerplate, sin adivinar.

  • Vistas previas en vivo

    Cada ejemplo se ejecuta dentro de la app. Toca, desplázate y escribe para ver cómo se comporta de verdad.

  • Código listo para copiar

    El código completo y ejecutable está a una pestaña de su vista previa.

  • Organizado por tema

    Explora por grupo (texto, formularios, layout, navegación) o busca por nombre.

  • Favoritos

    Guarda los ejemplos que consultas a menudo y encuéntralos con un toque.

  • Tu tema de código

    Elige el tema de sintaxis que mejor lees, en modo claro u oscuro.

  • Tres idiomas

    Toda la app en inglés, portugués y español.

Aprende haciendo

Ejemplos reales, código real.

Abre cualquier ejemplo y alterna entre lo que hace y cómo está escrito. Entiéndelo, cópialo y úsalo en tu propio proyecto.

  • Una vista previa que funciona, no una captura
  • Código completo, listo para pegar en main.dart
  • Un enlace a la documentación oficial de cada widget
Explorar el catálogo
actionchip_sample.dart
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

Todo el kit, en un solo lugar.

Desde un simple widget Text hasta una pantalla de chat completa, todo agrupado como lo buscarías.

216ejemplos y contando
143

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
46

Paquetes

Paquetes populares de pub.dev, como dio, shimmer y flutter_svg, en vivo.

13

Funciones

Diálogos, menús, selectores y otras funciones esenciales.

9

Elementos

Piezas de interfaz reutilizables para patrones comunes.

5

Pantallas de ejemplo

Pantallas completas: login, chat, cliente de correo y más.

46 paquetes de pub.dev, cada uno ejecutándose en vivo en la app

  • awesome_snackbar_content
  • battery_plus
  • bottom_navy_bar
  • cached_network_image
  • carousel_slider
  • circular_countdown_timer
  • device_info_plus
  • dio
  • dotted_border
  • expandable
  • fl_chart
  • flutter_animate
  • flutter_card_swiper
  • flutter_chat_bubble
  • flutter_rating_bar
  • flutter_slidable
  • flutter_spinkit
  • flutter_staggered_grid_view
  • flutter_svg
  • flutter_syntax_highlighter
  • font_awesome_flutter
  • glass
  • google_fonts
  • google_mobile_ads
  • grouped_list
  • http
  • infinite_scroll_pagination
  • like_button
  • loading_animation_widget
  • loading_indicator
  • msh_checkbox
  • network_info_plus
  • photo_view
  • pinput
  • salomon_bottom_bar
  • scroll_infinity
  • shared_preferences
  • share_plus
  • shimmer
  • side_sheet
  • smooth_page_indicator
  • table_calendar
  • toastification
  • url_launcher
  • uuid
  • video_player

Dentro de la app

Cada pantalla, hecha para enseñar.

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

Enlaces directos

Cada ejemplo tiene un enlace.

¿Encontraste algo que vale la pena mostrar a tu equipo? Compártelo, y el enlace abre ese ejemplo exacto en su app.

  1. Abre un ejemplo

    Cualquier widget, paquete, función, elemento o pantalla.

  2. Toca Compartir

    Obtienes un enlace directo a ese ejemplo.

  3. Llegan directo a él

    Sin buscar: la app se abre justo en el ejemplo.

El ejemplo de ActionChip abierto en la app, desde un enlace compartido

Enlace compartido

flutterguide.app/widgets/ActionChip

Se abre en FlutterGuide

Código abierto

Hecho a la vista, probado como producto.

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.

Cobertura de líneas
97.8%
Casos de prueba
378
Licencia
MIT

Hecho con Flutter, Riverpod y go_router

Contribuye con un ejemplo

Widgets, paquetes, ideas de interfaz y correcciones son bienvenidos. La guía de contribución explica la configuración y el control de calidad.

Cómo está hecho

  • 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

Siempre mejorando.

Las versiones más recientes, directo del changelog de la app.

Changelog completo

Las notas de versión se publican en inglés, como en el repositorio de la app.

  1. v1.3.0

    Más reciente
    • AgregadoSpanish localization, alongside existing Portuguese (BR) and English
    • AgregadoSemantic labels for interactive elements (accessibility)
    • AgregadoProvider to disable ad banners
    +13 cambios más
  2. v1.2.3

    • CambiadoRemoved the donation dialog and the Expanded wrapper from the dialog button widget
    • CambiadoStandardized app links
    • CorregidoTheme not applying correctly after opening the app from a deep link
  3. v1.2.2

    • AgregadoRedesigned dialog components (new dialog, line, and button widgets), replacing the old dialog implementation
    • AgregadoLocalization for the "open URL" error dialog
    • AgregadoAccepted URL prefixes for Android deep links
    +3 cambios más

FAQ

Preguntas respondidas.

¿No encuentras lo que buscas? Abre un issue en GitHub.

Preguntar en GitHub

Empieza ya

¿Listo para aprender con ejemplos?

Descarga FlutterGuide gratis y lleva más de 216 ejemplos ejecutables en tu bolsillo.

  • Gratis, sin plan de pago
  • Sin cuenta ni registro
  • En inglés, portugués y español
Descargar en Google Play