Kompilator Flutter online

Kurs Flutter

Napisz aplikację Flutter, kliknij Run i używaj jej na telefonie w przeglądarce. Hot reload zachowuje jej stan. Za darmo, bez rejestracji.

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

Uruchamiaj aplikacje Flutter online, bez instalacji

Napisz aplikację Flutter w lib/main.dart, kliknij Run i używaj jej na telefonie tutaj, na tej stronie. Kod kompiluje się we Flutter 3.41.7 i Dart 3, a aplikację uruchamia prawdziwy silnik webowy Fluttera, więc widżety, układy, gesty i animacje działają tak jak w webowym buildzie Fluttera.

Na start wybierz przykład: licznik z setState, listę zadań, formularz rejestracji, koszyk z provider, aplikację z flutter_riverpod, przełącznik trybu ciemnego albo animację. Zmień kod i kliknij Hot reload: aplikacja się zaktualizuje i zachowa swój stan. To szybkie miejsce, żeby wypróbować widżet, sprawdzić układ albo zobaczyć, jak działa zarządzanie stanem, bez SDK, emulatora i konfiguracji.

Co potrafi ten playground Flutter

Prawdziwy Flutter SDK: twój kod kompiluje się we Flutter 3.41.7 i Dart 3, a silnik webowy Fluttera rysuje aplikację w ramce telefonu.
Hot reload jak w flutter run: zmień kod, a aplikacja zaktualizuje się bez utraty stanu. Kliknij Run, żeby uruchomić ją od nowa.
Konsola pod telefonem: wszystko, co wypiszesz przez print(), pojawia się tam razem z błędami kompilacji, które wskazują linię.
Pakiety gotowe do importu: provider, flutter_riverpod, go_router i intl, a do tego wszystko z package:flutter.
Kod zapisuje się w przeglądarce, gdy piszesz. Skopiuj go albo pobierz main.dart, żeby pracować dalej we własnym projekcie.

Co możesz zbudować w playgroundzie Flutter

Ekrany ze Scaffold, AppBar, Column, Row i ListView, żeby zobaczyć, jak działa układ.
Interaktywne widżety ze StatefulWidget i setState: liczniki, listy zadań, przełączniki i formularze z walidacją.
Zarządzanie stanem z provider (ChangeNotifier) i flutter_riverpod (Notifier, ProviderScope).
Motywy, tryb ciemny, kolory Material 3 z koloru bazowego i animacje takie jak AnimatedContainer.

FAQ kompilatora Flutter online

Czy ten kompilator Flutter online jest darmowy?

Tak. Jest darmowy i nie wymaga konta: otwórz stronę, zmień kod i kliknij Run.

Czy muszę instalować Fluttera albo emulator?

Nie. Kod kompiluje się na serwerach Coddy we Flutter 3.41.7, a aplikacja działa w twojej przeglądarce w ramce telefonu. Wystarczy nowoczesna przeglądarka.

Czy hot reload działa?

Tak. Po zmianie kliknij Hot reload, a aplikacja zaktualizuje się i zachowa stan, na przykład wartość licznika. Niektóre zmiany, jak inna budowa klasy, wymagają restartu, a wtedy playground sam uruchomi aplikację ponownie.

Jakich pakietów mogę używać?

Wszystkiego z package:flutter i Dart SDK, a do tego provider, flutter_riverpod, go_router, http i intl. Innych pakietów z pub.dev nie można tu dodać.

Czy aplikacja może wywołać API albo wczytać obrazy z internetu?

Nie w niezawodny sposób. Aplikacja działa w odizolowanej ramce bez własnego źródła, więc większość API i serwerów z obrazami ją odrzuca, a wywołania http się nie udają. Użyj w kodzie przykładowych danych, a prawdziwe zapytania sieciowe testuj we własnym projekcie.

Gdzie zobaczę wynik print() i błędy?

W konsoli pod telefonem. Błędy kompilacji wskazują linię w lib/main.dart, a błędy w czasie działania i wszystko, co wypiszesz przez print(), też pojawiają się tam.

Jak nauczyć się Fluttera, gdy już go wypróbuję?

Zmieniaj przykłady i patrz, co się dzieje. Gdy zechcesz uczyć się krok po kroku, kurs Fluttera od Coddy uczy widżetów, układu, stanu i nawigacji w krótkich lekcjach, które uruchamiają twoją aplikację na takim samym telefonie jak tutaj.