Flutter онлайн компилятор

Изучить Flutter

Напишите Flutter-приложение, нажмите Run и пользуйтесь им на телефоне прямо в браузере. Hot reload сохраняет состояние. Бесплатно, без регистрации.

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-приложения онлайн, ничего не устанавливая

Напишите Flutter-приложение в lib/main.dart, нажмите Run и пользуйтесь им на телефоне прямо на этой странице. Код компилируется на Flutter 3.41.7 и Dart 3, а приложение запускает настоящий веб-движок Flutter, поэтому виджеты, разметка, жесты и анимации работают так же, как в веб-сборке Flutter.

Выберите пример для начала: счётчик на setState, список задач, форму регистрации, корзину на provider, приложение на flutter_riverpod, переключатель тёмной темы или анимацию. Измените код и нажмите Hot reload: приложение обновится и сохранит своё состояние. Здесь удобно быстро попробовать виджет, проверить разметку или посмотреть, как работает управление состоянием, без SDK, эмулятора и настройки.

Что умеет эта песочница Flutter

Настоящий Flutter SDK: код компилируется на Flutter 3.41.7 и Dart 3, а веб-движок Flutter рисует приложение в рамке телефона.
Hot reload, как в flutter run: измените код, и приложение обновится, не теряя состояния. Нажмите Run, чтобы запустить его заново.
Консоль под телефоном: всё, что вы выводите через print(), появляется там, вместе с ошибками компиляции с номером строки.
Пакеты, готовые к импорту: 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?

Да. Нажмите Hot reload после изменения, и приложение обновится, сохранив состояние, например значение счётчика. Некоторым изменениям, например другой структуре класса, нужен перезапуск, и песочница сама запустит приложение заново.

Какие пакеты можно использовать?

Всё из package:flutter и Dart SDK, а также provider, flutter_riverpod, go_router, http и intl. Другие пакеты с pub.dev здесь добавить нельзя.

Может ли приложение обращаться к API или загружать картинки из интернета?

Не всегда. Приложение работает в изолированной рамке без собственного источника, поэтому большинство API и серверов с картинками отклоняют запросы, а вызовы http не проходят. Используйте в коде тестовые данные, а настоящие сетевые запросы проверяйте в своём проекте.

Где увидеть вывод print() и ошибки?

В консоли под телефоном. Ошибки компиляции указывают строку в lib/main.dart, а ошибки выполнения и всё, что вы выводите через print(), тоже появляются там.

Как выучить Flutter после того, как попробовал?

Меняйте примеры и смотрите, что получится. Если нужен пошаговый путь, курс Flutter от Coddy учит виджетам, разметке, состоянию и навигации в коротких уроках, где приложение запускается на таком же телефоне, как здесь.