Flutter Online Compiler

Write a Flutter app, press Run and use it on a phone in your browser. Hot reload keeps its state. Free, no sign-up.

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

Run Flutter apps online, nothing to install

Write a Flutter app in lib/main.dart, press Run and use it on a phone right here on the page. The code compiles with Flutter 3.41.7 and Dart 3, and the real Flutter web engine runs the app, so widgets, layouts, gestures and animations behave as they do in a Flutter web build.

Pick an example to start: a counter with setState, a task list, a sign-up form, a cart with provider, a flutter_riverpod app, a dark mode switch or an animation. Change the code and press Hot reload: the app updates and keeps its state. It is a quick place to try a widget, test a layout or see how state management works, with no SDK, no emulator and no setup.

What this Flutter playground does

The real Flutter SDK: your code compiles with Flutter 3.41.7 and Dart 3, and the Flutter web engine draws the app on a phone frame.
Hot reload, as in flutter run: change the code and the app updates without losing its state. Press Run to start it over.
A Console under the phone: everything you print() shows up there, along with compile errors that name the line.
Packages ready to import: provider, flutter_riverpod, go_router and intl, plus everything in package:flutter.
Your code is saved in your browser as you type. Copy it or download main.dart to keep working in your own project.

What you can build in the Flutter playground

Screens with Scaffold, AppBar, Column, Row and ListView, to see how layout works.
Interactive widgets with StatefulWidget and setState: counters, checklists, switches and forms with validation.
State management with provider (ChangeNotifier) and flutter_riverpod (Notifier, ProviderScope).
Themes, dark mode, Material 3 colors from a seed color, and animations such as AnimatedContainer.

Flutter online compiler FAQ

Is this Flutter online compiler free?

Yes. It is free and needs no account: open the page, edit the code and press Run.

Do I need to install Flutter or an emulator?

No. The code compiles on Coddy's servers with Flutter 3.41.7, and the app runs in your browser on a phone frame. A modern browser is all you need.

Does hot reload work?

Yes. Press Hot reload after a change and the app updates while it keeps its state, such as a counter's value. A few changes, like a new class shape, need a restart, and the playground runs the app again for you.

Which packages can I use?

Everything in package:flutter and the Dart SDK, plus provider, flutter_riverpod, go_router, http and intl. You cannot add other packages from pub.dev here.

Can my app call an API or load images from the internet?

Not reliably. The app runs in a sandboxed frame with no origin of its own, so most APIs and image hosts refuse it, and http calls fail. Put sample data in your code instead, and test real network calls in your own project.

Where do I see print() output and errors?

In the Console under the phone. Compile errors name the line in lib/main.dart, and runtime errors and everything you print() show up there too.

How do I learn Flutter after trying it?

Change the examples and see what happens. When you want a guided path, Coddy's Flutter course teaches widgets, layout, state and navigation in short lessons that run your app on the same phone you see here.

Useful tools for Flutter

Free, browser-based tools that pair well with the Flutter Playground, all part of Coddy.

Embed the Flutter editor Compare coding platforms