Skip to content

Cheat Sheet de Flutter

Última verificación septiembre 2026 — corre en tu navegador

Cheatsheet de Flutter

Busca por código, tarea o categoría en español o inglés. Cada entrada tiene un enlace para guardarla o compartirla.

Mostrando 51 de 51 entradas

Flutter: importa package:flutter/material.dart. Los fragmentos van dentro de tu app; los patrones requieren completar las variables o los puntos suspensivos.

Compilar iOS release

Configuración · Patrón / sintaxis
flutter build ios --release

Requiere macOS, Xcode y configuración de firma para compilar para dispositivo.

Documentación

Widget de texto

Widgets · Patrón / sintaxis
Text('Hello', style: TextStyle(fontSize: 20))

Widget de icono

Widgets · Patrón / sintaxis
Icon(Icons.star, color: Colors.amber)

Cargar imagen local

Widgets · Patrón / sintaxis
Image.asset('assets/logo.png')

Declara assets/logo.png en pubspec.yaml dentro de flutter: assets:.

Botón con icono

Widgets · Patrón / sintaxis
IconButton(icon: Icon(Icons.add), onPressed: () {})

Campo de texto

Widgets · Patrón / sintaxis
TextField(decoration: InputDecoration(labelText: 'Name'))

Checkbox

Widgets · Patrón / sintaxis
Checkbox(value: checked, onChanged: (v) {})

Widget stateless

Estado · Ejemplo completo
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Greeting()));

class Greeting extends StatelessWidget {
  const Greeting({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(body: Center(child: Text('Hello')));
  }
}

Archivo lib/main.dart completo para un proyecto Flutter. Los demás fragmentos de widgets de esta página van dentro de una app existente.

Documentación

Widget stateful

Estado · Patrón / sintaxis
class MyWidget extends StatefulWidget {
  State<MyWidget> createState() => _S();
}

Controller del campo de texto

Estado · Patrón / sintaxis
final _controller = TextEditingController();

Conserva el controlador en State, pásalo a TextField(controller: ...) y libéralo en State.dispose().

Estado reactivo simple

Estado · Patrón / sintaxis
final count = ValueNotifier<int>(0);

ValueListenableBuilder<int>(
  valueListenable: count,
  builder: (context, value, child) => Text('$value'),
)

Conserva count como campo de State, cambia count.value para actualizar y llama a count.dispose() desde State.dispose().

Documentación

Widget de datos async

Estado · Patrón / sintaxis
FutureBuilder(future: fetch(), builder: (c, snap) => ...)

Push de nueva ruta

Navegación · Patrón / sintaxis
Navigator.push(context, MaterialPageRoute(builder: (c) => NextPage()))

Usa un callback con BuildContext bajo Navigator. Define NextPage o value donde se utilicen.

Documentación

Volver

Navegación · Patrón / sintaxis
Navigator.pop(context)

Llama desde un callback de una ruta de la que puedas volver. El contexto debe estar bajo su Navigator.

Documentación

Push de ruta nombrada

Navegación · Patrón / sintaxis
Navigator.pushNamed(context, '/details')

Registra '/details' en MaterialApp.routes o usa onGenerateRoute. Las rutas nombradas no se recomiendan para la mayoría de apps nuevas; usa un paquete de rutas para enlaces profundos complejos.

Documentación

Reemplazar ruta actual

Navegación · Patrón / sintaxis
Navigator.pushReplacement<void, void>(
  context,
  MaterialPageRoute<void>(builder: (_) => NextPage()),
);

Dentro de un callback con context bajo Navigator; define NextPage en tu app.

Documentación

Push y esperar resultado

Navegación · Patrón / sintaxis
final result = await Navigator.push<String>(
  context,
  MaterialPageRoute<String>(builder: (_) => NextPage()),
);
if (!context.mounted) return;

Usa un callback async. NextPage puede devolver un String con Navigator.pop(context, value); volver sin valor devuelve null.

Documentación

Acceder al theme

Estilos · Patrón / sintaxis
Theme.of(context).textTheme.headlineLarge

App con tema Material

Estilos · Patrón / sintaxis
MaterialApp(theme: ThemeData(primarySwatch: Colors.blue))

Cheat Sheet de Flutter — Widgets, State Management, Navegación y Layout

Consulta comandos CLI, widgets y patrones de layout, estado y navegación de Flutter. Busca por categoría o código, copia un fragmento o guarda el enlace de su entrada. Los patrones requieren tus variables, árbol de widgets y contexto de aplicación.

Trampas habituales en Flutter

Usa Expanded dentro de Row, Column o Flex con restricciones acotadas. Libera los controladores de State con dispose. Después de una operación asíncrona, comprueba context.mounted antes de usar ese contexto. Las rutas nombradas requieren registro; los enlaces profundos complejos suelen necesitar una solución de enrutamiento. Consulta la documentación enlazada junto a las entradas.

  • Más de 50 widgets y patrones Flutter
  • Comandos CLI de configuración
  • Widgets de layout (Column, Row, Stack)
  • Ciclo de vida del estado y builders
  • Navigator y rutas nombradas
  • Copia al portapapeles con un clic

Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).

Por ·