Compilador Flutter online

Aprenda Flutter

Escreva um app Flutter, aperte Run e use o app em um celular no seu navegador. O hot reload mantém o estado. Grátis, sem cadastro.

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),
      ),
    );
  }
}

Rode apps Flutter online, sem instalar nada

Escreva um app Flutter em lib/main.dart, aperte Run e use o app em um celular aqui mesmo na página. O código é compilado com Flutter 3.41.7 e Dart 3, e o motor web de verdade do Flutter roda o app, então widgets, layouts, gestos e animações funcionam como em um build web do Flutter.

Escolha um exemplo para começar: um contador com setState, uma lista de tarefas, um formulário de cadastro, um carrinho com provider, um app com flutter_riverpod, um botão de modo escuro ou uma animação. Mude o código e aperte Hot reload: o app atualiza e mantém o estado. É um lugar rápido para testar um widget, conferir um layout ou ver como funciona o gerenciamento de estado, sem SDK, sem emulador e sem configuração.

O que este playground de Flutter faz

O SDK real do Flutter: seu código é compilado com Flutter 3.41.7 e Dart 3, e o motor web do Flutter desenha o app na moldura de um celular.
Hot reload, como no flutter run: mude o código e o app atualiza sem perder o estado. Aperte Run para começar de novo.
Um console embaixo do celular: tudo o que você imprime com print() aparece ali, junto com os erros de compilação que mostram a linha.
Pacotes prontos para importar: provider, flutter_riverpod, go_router e intl, além de tudo que existe em package:flutter.
Seu código fica salvo no navegador enquanto você digita. Copie ou baixe o main.dart para continuar no seu próprio projeto.

O que você pode criar no playground de Flutter

Telas com Scaffold, AppBar, Column, Row e ListView, para entender como o layout funciona.
Widgets interativos com StatefulWidget e setState: contadores, listas de tarefas, chaves e formulários com validação.
Gerenciamento de estado com provider (ChangeNotifier) e flutter_riverpod (Notifier, ProviderScope).
Temas, modo escuro, cores do Material 3 a partir de uma cor base e animações como AnimatedContainer.

Perguntas frequentes sobre o compilador Flutter online

Este compilador Flutter online é grátis?

Sim. É grátis e não precisa de conta: abra a página, edite o código e aperte Run.

Preciso instalar o Flutter ou um emulador?

Não. O código é compilado nos servidores da Coddy com Flutter 3.41.7, e o app roda no seu navegador, na moldura de um celular. Basta um navegador moderno.

O hot reload funciona?

Sim. Aperte Hot reload depois de uma mudança e o app atualiza mantendo o estado, como o valor de um contador. Algumas mudanças, como uma classe com outro formato, precisam reiniciar, e o playground roda o app de novo para você.

Quais pacotes posso usar?

Tudo de package:flutter e do SDK do Dart, além de provider, flutter_riverpod, go_router, http e intl. Não dá para adicionar outros pacotes do pub.dev aqui.

Meu app pode chamar uma API ou carregar imagens da internet?

Não de forma confiável. O app roda em uma moldura isolada, sem origem própria, então a maioria das APIs e dos servidores de imagem recusa o acesso, e as chamadas com http falham. Use dados de exemplo no código e teste as chamadas reais no seu próprio projeto.

Onde vejo a saída de print() e os erros?

No console embaixo do celular. Os erros de compilação mostram a linha em lib/main.dart, e os erros em execução e tudo o que você imprime com print() também aparecem ali.

Como aprender Flutter depois de testar?

Mude os exemplos e veja o que acontece. Quando quiser um caminho guiado, o curso de Flutter da Coddy ensina widgets, layout, estado e navegação em lições curtas que rodam seu app no mesmo celular que você vê aqui.

Ferramentas úteis para Flutter

Ferramentas gratuitas baseadas no navegador que combinam bem com o Playground de Flutter, tudo faz parte do Coddy.

Incorpore o editor de Flutter Compare plataformas de programação