Flutter Online Compiler

Flutter lernen

Schreib eine Flutter-App, klick auf Run und benutze sie auf einem Handy im Browser. Hot Reload behält ihren Zustand. Kostenlos, ohne Anmeldung.

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

Flutter-Apps online ausführen, ohne Installation

Schreib eine Flutter-App in lib/main.dart, klick auf Run und benutze sie direkt hier auf der Seite auf einem Handy. Der Code wird mit Flutter 3.41.7 und Dart 3 kompiliert, und die echte Flutter-Web-Engine führt die App aus. Widgets, Layouts, Gesten und Animationen verhalten sich also wie in einem Flutter-Web-Build.

Wähl zum Start ein Beispiel: einen Zähler mit setState, eine Aufgabenliste, ein Anmeldeformular, einen Warenkorb mit provider, eine App mit flutter_riverpod, einen Dark-Mode-Schalter oder eine Animation. Ändere den Code und klick auf Hot reload: Die App aktualisiert sich und behält ihren Zustand. Ein schneller Ort, um ein Widget auszuprobieren, ein Layout zu prüfen oder zu sehen, wie State Management funktioniert, ohne SDK, ohne Emulator und ohne Einrichtung.

Was dieser Flutter Playground kann

Das echte Flutter SDK: Dein Code wird mit Flutter 3.41.7 und Dart 3 kompiliert, und die Flutter-Web-Engine zeichnet die App in einem Handy-Rahmen.
Hot Reload wie bei flutter run: Ändere den Code, und die App aktualisiert sich, ohne ihren Zustand zu verlieren. Mit Run startest du sie neu.
Eine Konsole unter dem Handy: Alles, was du mit print() ausgibst, erscheint dort, ebenso Compilerfehler mit der passenden Zeile.
Pakete zum direkten Importieren: provider, flutter_riverpod, go_router und intl, dazu alles aus package:flutter.
Dein Code wird beim Tippen im Browser gespeichert. Kopier ihn oder lade main.dart herunter, um in deinem eigenen Projekt weiterzumachen.

Was du im Flutter Playground bauen kannst

Screens mit Scaffold, AppBar, Column, Row und ListView, um zu sehen, wie Layout funktioniert.
Interaktive Widgets mit StatefulWidget und setState: Zähler, Checklisten, Schalter und Formulare mit Validierung.
State Management mit provider (ChangeNotifier) und flutter_riverpod (Notifier, ProviderScope).
Themes, Dark Mode, Material-3-Farben aus einer Grundfarbe und Animationen wie AnimatedContainer.

FAQ zum Flutter Online Compiler

Ist dieser Flutter Online Compiler kostenlos?

Ja. Er ist kostenlos und braucht kein Konto: Seite öffnen, Code bearbeiten, auf Run klicken.

Muss ich Flutter oder einen Emulator installieren?

Nein. Der Code wird auf den Servern von Coddy mit Flutter 3.41.7 kompiliert, und die App läuft in deinem Browser in einem Handy-Rahmen. Ein aktueller Browser reicht.

Funktioniert Hot Reload?

Ja. Klick nach einer Änderung auf Hot reload, und die App aktualisiert sich und behält ihren Zustand, zum Beispiel den Wert eines Zählers. Manche Änderungen, etwa eine Klasse mit anderem Aufbau, brauchen einen Neustart, und der Playground startet die App dann für dich neu.

Welche Pakete kann ich nutzen?

Alles aus package:flutter und dem Dart SDK, dazu provider, flutter_riverpod, go_router, http und intl. Weitere Pakete von pub.dev lassen sich hier nicht hinzufügen.

Kann meine App eine API aufrufen oder Bilder aus dem Internet laden?

Nicht zuverlässig. Die App läuft in einem abgeschotteten Rahmen ohne eigenen Origin, deshalb lehnen die meisten APIs und Bildserver sie ab, und http-Aufrufe schlagen fehl. Nimm Beispieldaten in deinen Code und teste echte Netzwerkaufrufe in deinem eigenen Projekt.

Wo sehe ich die Ausgabe von print() und Fehler?

In der Konsole unter dem Handy. Compilerfehler nennen die Zeile in lib/main.dart, und Laufzeitfehler sowie alles, was du mit print() ausgibst, erscheinen dort ebenfalls.

Wie lerne ich Flutter, nachdem ich es ausprobiert habe?

Ändere die Beispiele und schau, was passiert. Wenn du einen geführten Weg willst, bringt dir der Flutter-Kurs von Coddy Widgets, Layout, State und Navigation in kurzen Lektionen bei, die deine App auf demselben Handy ausführen wie hier.