Compilador Flutter online

Aprende Flutter

Escribe una app de Flutter, pulsa Run y úsala en un teléfono en tu navegador. El hot reload conserva su estado. Gratis, sin registro.

lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(const CounterApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() => _count++);
    print('Count is now $_count');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hello, Flutter!')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text('You pressed the button'),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.displayLarge,
            ),
            Text(_count == 1 ? 'time' : 'times'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        tooltip: 'Add one',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Ejecuta apps de Flutter online, sin instalar nada

Escribe una app de Flutter en lib/main.dart, pulsa Run y úsala en un teléfono aquí mismo, en la página. El código se compila con Flutter 3.41.7 y Dart 3, y el motor web real de Flutter ejecuta la app, así que los widgets, los layouts, los gestos y las animaciones funcionan igual que en una build web de Flutter.

Elige un ejemplo para empezar: un contador con setState, una lista de tareas, un formulario de registro, un carrito con provider, una app con flutter_riverpod, un interruptor de modo oscuro o una animación. Cambia el código y pulsa Hot reload: la app se actualiza y conserva su estado. Es un sitio rápido para probar un widget, revisar un layout o ver cómo funciona la gestión de estado, sin SDK, sin emulador y sin configurar nada.

Qué hace este playground de Flutter

El SDK real de Flutter: tu código se compila con Flutter 3.41.7 y Dart 3, y el motor web de Flutter dibuja la app en el marco de un teléfono.
Hot reload, como en flutter run: cambia el código y la app se actualiza sin perder su estado. Pulsa Run para empezar de nuevo.
Una consola bajo el teléfono: todo lo que imprimes con print() aparece ahí, junto con los errores de compilación que indican la línea.
Paquetes listos para importar: provider, flutter_riverpod, go_router e intl, además de todo lo que hay en package:flutter.
Tu código se guarda en el navegador mientras escribes. Cópialo o descarga main.dart para seguir en tu propio proyecto.

Qué puedes crear en el playground de Flutter

Pantallas con Scaffold, AppBar, Column, Row y ListView, para ver cómo funciona el layout.
Widgets interactivos con StatefulWidget y setState: contadores, listas de tareas, interruptores y formularios con validación.
Gestión de estado con provider (ChangeNotifier) y flutter_riverpod (Notifier, ProviderScope).
Temas, modo oscuro, colores de Material 3 a partir de un color base y animaciones como AnimatedContainer.

Preguntas frecuentes sobre el compilador Flutter online

¿Este compilador Flutter online es gratis?

Sí. Es gratis y no necesita cuenta: abre la página, edita el código y pulsa Run.

¿Tengo que instalar Flutter o un emulador?

No. El código se compila en los servidores de Coddy con Flutter 3.41.7 y la app se ejecuta en tu navegador, en el marco de un teléfono. Solo necesitas un navegador moderno.

¿Funciona el hot reload?

Sí. Pulsa Hot reload después de un cambio y la app se actualiza sin perder su estado, como el valor de un contador. Algunos cambios, como una clase con otra forma, necesitan reiniciar, y el playground vuelve a ejecutar la app por ti.

¿Qué paquetes puedo usar?

Todo lo de package:flutter y el SDK de Dart, además de provider, flutter_riverpod, go_router, http e intl. Aquí no se pueden añadir otros paquetes de pub.dev.

¿Mi app puede llamar a una API o cargar imágenes de internet?

No de forma fiable. La app se ejecuta en un marco aislado sin origen propio, así que la mayoría de las API y servidores de imágenes la rechazan, y las llamadas con http fallan. Usa datos de ejemplo en tu código y prueba las llamadas reales en tu propio proyecto.

¿Dónde veo la salida de print() y los errores?

En la consola bajo el teléfono. Los errores de compilación indican la línea de lib/main.dart, y los errores en ejecución y todo lo que imprimes con print() también aparecen ahí.

¿Cómo aprendo Flutter después de probarlo?

Cambia los ejemplos y mira qué pasa. Cuando quieras un camino guiado, el curso de Flutter de Coddy enseña widgets, layout, estado y navegación en lecciones cortas que ejecutan tu app en el mismo teléfono que ves aquí.

Herramientas útiles para Flutter

Herramientas gratuitas basadas en el navegador que complementan el Playground de Flutter, todo parte de Coddy.

Incrusta el editor de Flutter Compara plataformas para programar