Compilateur Flutter en ligne

Apprendre Flutter

Écrivez une app Flutter, cliquez sur Run et utilisez-la sur un téléphone dans votre navigateur. Le hot reload garde son état. Gratuit, sans inscription.

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

Lancez des apps Flutter en ligne, sans rien installer

Écrivez une app Flutter dans lib/main.dart, cliquez sur Run et utilisez-la sur un téléphone, directement sur la page. Le code est compilé avec Flutter 3.41.7 et Dart 3, et c'est le vrai moteur web de Flutter qui exécute l'app : widgets, mises en page, gestes et animations se comportent comme dans un build web Flutter.

Choisissez un exemple pour commencer : un compteur avec setState, une liste de tâches, un formulaire d'inscription, un panier avec provider, une app flutter_riverpod, un interrupteur de mode sombre ou une animation. Modifiez le code et cliquez sur Hot reload : l'app se met à jour et garde son état. C'est un endroit rapide pour essayer un widget, vérifier une mise en page ou voir comment marche la gestion d'état, sans SDK, sans émulateur et sans configuration.

Ce que fait ce playground Flutter

Le vrai SDK Flutter : votre code est compilé avec Flutter 3.41.7 et Dart 3, et le moteur web de Flutter dessine l'app dans un cadre de téléphone.
Le hot reload, comme avec flutter run : modifiez le code et l'app se met à jour sans perdre son état. Cliquez sur Run pour la relancer.
Une console sous le téléphone : tout ce que vous affichez avec print() y apparaît, avec les erreurs de compilation qui indiquent la ligne.
Des paquets prêts à importer : provider, flutter_riverpod, go_router et intl, en plus de tout package:flutter.
Votre code est enregistré dans le navigateur pendant que vous tapez. Copiez-le ou téléchargez main.dart pour continuer dans votre propre projet.

Ce que vous pouvez créer dans le playground Flutter

Des écrans avec Scaffold, AppBar, Column, Row et ListView, pour comprendre la mise en page.
Des widgets interactifs avec StatefulWidget et setState : compteurs, listes de tâches, interrupteurs et formulaires avec validation.
La gestion d'état avec provider (ChangeNotifier) et flutter_riverpod (Notifier, ProviderScope).
Des thèmes, le mode sombre, les couleurs Material 3 à partir d'une couleur de base et des animations comme AnimatedContainer.

FAQ du compilateur Flutter en ligne

Ce compilateur Flutter en ligne est-il gratuit ?

Oui. Il est gratuit et ne demande aucun compte : ouvrez la page, modifiez le code et cliquez sur Run.

Faut-il installer Flutter ou un émulateur ?

Non. Le code est compilé sur les serveurs de Coddy avec Flutter 3.41.7, et l'app tourne dans votre navigateur, dans un cadre de téléphone. Un navigateur récent suffit.

Le hot reload fonctionne-t-il ?

Oui. Cliquez sur Hot reload après une modification : l'app se met à jour en gardant son état, comme la valeur d'un compteur. Certaines modifications, comme une classe à la structure différente, demandent un redémarrage, et le playground relance l'app pour vous.

Quels paquets puis-je utiliser ?

Tout package:flutter et le SDK Dart, plus provider, flutter_riverpod, go_router, http et intl. On ne peut pas ajouter d'autres paquets de pub.dev ici.

Mon app peut-elle appeler une API ou charger des images d'internet ?

Pas de façon fiable. L'app tourne dans un cadre isolé, sans origine propre : la plupart des API et des serveurs d'images la refusent, et les appels http échouent. Mettez des données d'exemple dans votre code et testez les vrais appels réseau dans votre propre projet.

Où voir la sortie de print() et les erreurs ?

Dans la console sous le téléphone. Les erreurs de compilation indiquent la ligne de lib/main.dart, et les erreurs d'exécution ainsi que tout ce que vous affichez avec print() y apparaissent aussi.

Comment apprendre Flutter après l'avoir essayé ?

Modifiez les exemples et regardez ce qui change. Quand vous voulez un parcours guidé, le cours Flutter de Coddy enseigne les widgets, la mise en page, l'état et la navigation en courtes leçons qui lancent votre app sur le même téléphone qu'ici.