Compilatore Flutter online

Impara Flutter

Scrivi un'app Flutter, premi Run e usala su un telefono nel browser. L'hot reload ne mantiene lo stato. Gratis, senza registrazione.

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

Esegui app Flutter online, senza installare nulla

Scrivi un'app Flutter in lib/main.dart, premi Run e usala su un telefono direttamente in questa pagina. Il codice viene compilato con Flutter 3.41.7 e Dart 3, e l'app gira sul vero motore web di Flutter, quindi widget, layout, gesti e animazioni si comportano come in una build web di Flutter.

Scegli un esempio per iniziare: un contatore con setState, una lista di attività, un modulo di registrazione, un carrello con provider, un'app con flutter_riverpod, un interruttore per la modalità scura o un'animazione. Cambia il codice e premi Hot reload: l'app si aggiorna e mantiene il suo stato. È un posto veloce per provare un widget, controllare un layout o vedere come funziona la gestione dello stato, senza SDK, senza emulatore e senza configurazione.

Cosa fa questo playground Flutter

Il vero SDK di Flutter: il tuo codice viene compilato con Flutter 3.41.7 e Dart 3, e il motore web di Flutter disegna l'app nella cornice di un telefono.
Hot reload come in flutter run: cambia il codice e l'app si aggiorna senza perdere lo stato. Premi Run per farla ripartire da capo.
Una console sotto il telefono: tutto ciò che stampi con print() compare lì, insieme agli errori di compilazione con la riga.
Pacchetti pronti da importare: provider, flutter_riverpod, go_router e intl, oltre a tutto package:flutter.
Il codice viene salvato nel browser mentre scrivi. Copialo o scarica main.dart per continuare nel tuo progetto.

Cosa puoi creare nel playground Flutter

Schermate con Scaffold, AppBar, Column, Row e ListView, per capire come funziona il layout.
Widget interattivi con StatefulWidget e setState: contatori, liste di cose da fare, interruttori e moduli con validazione.
Gestione dello stato con provider (ChangeNotifier) e flutter_riverpod (Notifier, ProviderScope).
Temi, modalità scura, colori Material 3 da un colore di base e animazioni come AnimatedContainer.

FAQ sul compilatore Flutter online

Questo compilatore Flutter online è gratuito?

Sì. È gratuito e non serve un account: apri la pagina, modifica il codice e premi Run.

Devo installare Flutter o un emulatore?

No. Il codice viene compilato sui server di Coddy con Flutter 3.41.7 e l'app gira nel tuo browser, nella cornice di un telefono. Basta un browser recente.

L'hot reload funziona?

Sì. Premi Hot reload dopo una modifica e l'app si aggiorna mantenendo lo stato, come il valore di un contatore. Alcune modifiche, come una classe con una struttura diversa, richiedono un riavvio, e il playground fa ripartire l'app per te.

Quali pacchetti posso usare?

Tutto package:flutter e l'SDK di Dart, più provider, flutter_riverpod, go_router, http e intl. Qui non si possono aggiungere altri pacchetti da pub.dev.

La mia app può chiamare un'API o caricare immagini da internet?

Non in modo affidabile. L'app gira in una cornice isolata senza un'origine propria, quindi la maggior parte delle API e dei server di immagini la rifiuta e le chiamate http falliscono. Metti dati di esempio nel codice e prova le vere chiamate di rete nel tuo progetto.

Dove vedo l'output di print() e gli errori?

Nella console sotto il telefono. Gli errori di compilazione indicano la riga in lib/main.dart, e anche gli errori in esecuzione e tutto ciò che stampi con print() compaiono lì.

Come imparo Flutter dopo averlo provato?

Modifica gli esempi e guarda cosa succede. Quando vuoi un percorso guidato, il corso di Flutter di Coddy insegna widget, layout, stato e navigazione con lezioni brevi che eseguono la tua app sullo stesso telefono che vedi qui.

Strumenti utili per Flutter

Strumenti gratuiti nel browser che si abbinano bene al playground Flutter, tutti parte di Coddy.

Incorpora l'editor Flutter Confronta le piattaforme di programmazione