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í.