Flutter Online Derleyici

Flutter öğren

Bir Flutter uygulaması yaz, Run'a bas ve tarayıcında bir telefonda kullan. Hot reload durumunu korur. Ücretsiz, kayıt gerekmez.

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 uygulamalarını online çalıştır, kurulum gerekmez

lib/main.dart dosyasına bir Flutter uygulaması yaz, Run'a bas ve uygulamayı hemen bu sayfada bir telefonda kullan. Kod Flutter 3.41.7 ve Dart 3 ile derlenir ve uygulamayı gerçek Flutter web motoru çalıştırır; widget'lar, düzenler, dokunma hareketleri ve animasyonlar bir Flutter web derlemesindeki gibi davranır.

Başlamak için bir örnek seç: setState ile bir sayaç, bir görev listesi, bir kayıt formu, provider ile bir sepet, flutter_riverpod ile bir uygulama, karanlık mod anahtarı ya da bir animasyon. Kodu değiştir ve Hot reload'a bas: uygulama güncellenir ve durumunu korur. Bir widget'ı denemek, bir düzeni kontrol etmek ya da durum yönetiminin nasıl çalıştığını görmek için hızlı bir yer; SDK, emülatör ya da kurulum gerekmez.

Bu Flutter playground ne yapar

Gerçek Flutter SDK: kodun Flutter 3.41.7 ve Dart 3 ile derlenir, Flutter web motoru uygulamayı bir telefon çerçevesinde çizer.
flutter run içindeki gibi hot reload: kodu değiştir, uygulama durumunu kaybetmeden güncellensin. Baştan başlatmak için Run'a bas.
Telefonun altında bir konsol: print() ile yazdırdığın her şey orada görünür, satırı gösteren derleme hatalarıyla birlikte.
İçe aktarmaya hazır paketler: provider, flutter_riverpod, go_router ve intl, ayrıca package:flutter içindeki her şey.
Kodun sen yazarken tarayıcına kaydedilir. Kendi projende devam etmek için kopyala ya da main.dart dosyasını indir.

Flutter playground'da neler yapabilirsin

Düzenin nasıl çalıştığını görmek için Scaffold, AppBar, Column, Row ve ListView ile ekranlar.
StatefulWidget ve setState ile etkileşimli widget'lar: sayaçlar, yapılacaklar listeleri, anahtarlar ve doğrulamalı formlar.
provider (ChangeNotifier) ve flutter_riverpod (Notifier, ProviderScope) ile durum yönetimi.
Temalar, karanlık mod, bir ana renkten Material 3 renkleri ve AnimatedContainer gibi animasyonlar.

Flutter online derleyici SSS

Bu Flutter online derleyici ücretsiz mi?

Evet. Ücretsizdir ve hesap gerekmez: sayfayı aç, kodu düzenle ve Run'a bas.

Flutter ya da bir emülatör kurmam gerekiyor mu?

Hayır. Kod Coddy'nin sunucularında Flutter 3.41.7 ile derlenir ve uygulama tarayıcında bir telefon çerçevesinde çalışır. Güncel bir tarayıcı yeterli.

Hot reload çalışıyor mu?

Evet. Bir değişiklikten sonra Hot reload'a bas; uygulama, bir sayacın değeri gibi durumunu koruyarak güncellenir. Sınıfın yapısını değiştirmek gibi bazı değişiklikler yeniden başlatma ister ve playground uygulamayı senin için tekrar çalıştırır.

Hangi paketleri kullanabilirim?

package:flutter ve Dart SDK içindeki her şey, ayrıca provider, flutter_riverpod, go_router, http ve intl. Burada pub.dev'den başka paket eklenemez.

Uygulamam bir API çağırabilir ya da internetten resim yükleyebilir mi?

Güvenilir şekilde değil. Uygulama kendi kaynağı olmayan, korumalı bir çerçevede çalışır; bu yüzden çoğu API ve resim sunucusu isteği reddeder ve http çağrıları başarısız olur. Kodunda örnek veri kullan, gerçek ağ çağrılarını kendi projende dene.

print() çıktısını ve hataları nerede görürüm?

Telefonun altındaki konsolda. Derleme hataları lib/main.dart içindeki satırı gösterir; çalışma hataları ve print() ile yazdırdığın her şey de orada görünür.

Denedikten sonra Flutter'ı nasıl öğrenirim?

Örnekleri değiştir ve ne olduğunu gör. Rehberli bir yol istediğinde Coddy'nin Flutter kursu widget'ları, düzeni, durumu ve gezinmeyi kısa derslerle öğretir; uygulaman burada gördüğün telefonun aynısında çalışır.