Flutter オンラインコンパイラ

Flutter アプリを書いて Run を押すと、ブラウザの中のスマホで操作できます。ホットリロードは状態を保ちます。無料、登録不要です。

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 アプリをオンラインで実行、インストール不要

lib/main.dart に Flutter アプリを書いて Run を押すと、このページの中のスマホでそのまま操作できます。コードは Flutter 3.41.7 と Dart 3 でコンパイルされ、本物の Flutter Web エンジンがアプリを動かすので、ウィジェット、レイアウト、ジェスチャー、アニメーションは Flutter の Web ビルドと同じように動きます。

まずはサンプルを選んでください。setState のカウンター、タスクリスト、登録フォーム、provider のカート、flutter_riverpod のアプリ、ダークモードの切り替え、アニメーションがあります。コードを変えて Hot reload を押すと、アプリは状態を保ったまま更新されます。ウィジェットを試す、レイアウトを確かめる、状態管理の仕組みを見る、といったことが SDK もエミュレーターも設定もなしにすぐできます。

この Flutter プレイグラウンドでできること

本物の Flutter SDK：コードは Flutter 3.41.7 と Dart 3 でコンパイルされ、Flutter Web エンジンがスマホの枠の中にアプリを描きます。
flutter run と同じホットリロード：コードを変えると、アプリは状態を失わずに更新されます。最初からやり直すときは Run を押します。
スマホの下のコンソール：print() で出力したものはすべてここに表示され、行番号付きのコンパイルエラーも表示されます。
すぐに import できるパッケージ：provider、flutter_riverpod、go_router、intl、そして package:flutter のすべて。
コードは入力するたびにブラウザに保存されます。コピーするか main.dart をダウンロードして、自分のプロジェクトで続けられます。

Flutter プレイグラウンドで作れるもの

Scaffold、AppBar、Column、Row、ListView を使った画面。レイアウトの仕組みがわかります。
StatefulWidget と setState を使った操作できるウィジェット：カウンター、チェックリスト、スイッチ、入力チェック付きのフォーム。
provider（ChangeNotifier）と flutter_riverpod（Notifier、ProviderScope）による状態管理。
テーマ、ダークモード、ベースの色から作る Material 3 の配色、AnimatedContainer などのアニメーション。

Flutter オンラインコンパイラのよくある質問

この Flutter オンラインコンパイラは無料ですか？

はい。無料でアカウントも不要です。ページを開いてコードを編集し、Run を押すだけです。

Flutter やエミュレーターのインストールは必要ですか？

いいえ。コードは Coddy のサーバーで Flutter 3.41.7 によりコンパイルされ、アプリはブラウザの中のスマホの枠で動きます。必要なのは最新のブラウザだけです。

ホットリロードは使えますか？

はい。変更したあとに Hot reload を押すと、カウンターの値などの状態を保ったままアプリが更新されます。クラスの構造を変えるなど一部の変更には再起動が必要で、その場合はプレイグラウンドが自動でアプリを再実行します。

どのパッケージが使えますか？

package:flutter と Dart SDK のすべてに加えて、provider、flutter_riverpod、go_router、http、intl が使えます。ここで pub.dev のほかのパッケージを追加することはできません。

アプリから API を呼んだり、ネットの画像を読み込んだりできますか？

確実にはできません。アプリは独自のオリジンを持たない隔離された枠の中で動くため、多くの API や画像サーバーが接続を拒否し、http の呼び出しは失敗します。コードにサンプルデータを入れて、実際の通信は自分のプロジェクトで試してください。

print() の出力やエラーはどこで見られますか？

スマホの下のコンソールです。コンパイルエラーには lib/main.dart の行が表示され、実行時のエラーや print() で出力したものもここに出ます。

試したあと、Flutter はどう学べばいいですか？

サンプルを変えて、何が起きるか見てみましょう。順を追って学びたくなったら、Coddy の Flutter コースがウィジェット、レイアウト、状態、画面遷移を短いレッスンで教えます。アプリはここと同じスマホで動きます。

Flutterに役立つツール

Flutter プレイグラウンドと相性の良い、ブラウザベースの無料ツール。すべて Coddy の一部です。

Flutter エディタを埋め込むコーディングプラットフォームを比較