Compiler Flutter Online

Belajar Flutter

Tulis aplikasi Flutter, tekan Jalankan, dan pakai di ponsel langsung di browsermu. Hot reload menjaga state-nya. Gratis, tanpa daftar.

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

Jalankan aplikasi Flutter online, tanpa instalasi

Tulis aplikasi Flutter di lib/main.dart, tekan Jalankan, lalu pakai aplikasinya di ponsel langsung di halaman ini. Kodenya dikompilasi dengan Flutter 3.41.7 dan Dart 3, dan mesin web Flutter yang asli menjalankan aplikasinya, jadi widget, layout, gesture, dan animasi berperilaku sama seperti di build web Flutter.

Pilih contoh untuk memulai: counter dengan setState, daftar tugas, form pendaftaran, keranjang belanja dengan provider, aplikasi flutter_riverpod, tombol mode gelap, atau animasi. Ubah kodenya lalu tekan Hot reload: aplikasinya diperbarui dan state-nya tetap terjaga. Ini tempat yang praktis untuk mencoba widget, menguji layout, atau melihat cara kerja state management, tanpa SDK, tanpa emulator, dan tanpa setup.

Apa yang bisa dilakukan playground Flutter ini

Flutter SDK sungguhan: kodemu dikompilasi dengan Flutter 3.41.7 dan Dart 3, dan mesin web Flutter menggambar aplikasinya di bingkai ponsel.
Hot reload, seperti di flutter run: ubah kode dan aplikasinya diperbarui tanpa kehilangan state-nya. Tekan Jalankan untuk memulainya dari awal.
Konsol di bawah ponsel: semua yang kamu cetak dengan print() muncul di sana, bersama error kompilasi yang menyebutkan barisnya.
Package yang siap diimpor: provider, flutter_riverpod, go_router, dan intl, plus semua yang ada di package:flutter.
Kodemu disimpan di browser saat kamu mengetik. Salin atau unduh main.dart untuk melanjutkan di proyekmu sendiri.

Yang bisa kamu buat di playground Flutter

Layar dengan Scaffold, AppBar, Column, Row, dan ListView, untuk melihat cara kerja layout.
Widget interaktif dengan StatefulWidget dan setState: counter, checklist, switch, dan form dengan validasi.
State management dengan provider (ChangeNotifier) dan flutter_riverpod (Notifier, ProviderScope).
Tema, mode gelap, warna Material 3 dari satu warna dasar, dan animasi seperti AnimatedContainer.

FAQ compiler Flutter online

Apakah compiler Flutter online ini gratis?

Ya. Gratis dan tidak perlu akun: buka halamannya, edit kodenya, lalu tekan Jalankan.

Apakah aku perlu menginstal Flutter atau emulator?

Tidak. Kodenya dikompilasi di server Coddy dengan Flutter 3.41.7, dan aplikasinya berjalan di browsermu pada bingkai ponsel. Cukup browser modern.

Apakah hot reload berfungsi?

Ya. Tekan Hot reload setelah mengubah kode dan aplikasinya diperbarui sambil tetap menjaga state-nya, seperti nilai sebuah counter. Beberapa perubahan, seperti bentuk class yang baru, perlu restart, dan playground menjalankan ulang aplikasinya untukmu.

Package apa saja yang bisa aku pakai?

Semua yang ada di package:flutter dan Dart SDK, plus provider, flutter_riverpod, go_router, http, dan intl. Kamu tidak bisa menambahkan package lain dari pub.dev di sini.

Bisakah aplikasiku memanggil API atau memuat gambar dari internet?

Tidak bisa diandalkan. Aplikasinya berjalan di frame sandbox tanpa origin sendiri, jadi sebagian besar API dan host gambar menolaknya, dan panggilan http gagal. Taruh data contoh di kodemu saja, dan uji panggilan jaringan sungguhan di proyekmu sendiri.

Di mana aku bisa melihat output print() dan error?

Di Konsol di bawah ponsel. Error kompilasi menyebutkan barisnya di lib/main.dart, dan error saat runtime serta semua yang kamu cetak dengan print() juga muncul di sana.

Bagaimana cara belajar Flutter setelah mencobanya?

Ubah contoh-contohnya dan lihat apa yang terjadi. Saat kamu ingin jalur yang terarah, kursus Flutter Coddy mengajarkan widget, layout, state, dan navigasi dalam pelajaran singkat yang menjalankan aplikasimu di ponsel yang sama dengan yang kamu lihat di sini.