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.