Trình biên dịch Flutter online

Học Flutter

Viết một ứng dụng Flutter, nhấn Chạy và dùng nó trên điện thoại ngay trong trình duyệt. Tải lại nhanh (hot reload) giữ nguyên trạng thái. Miễn phí, không cần đăng ký.

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

Chạy ứng dụng Flutter online, không cần cài đặt

Viết một ứng dụng Flutter trong lib/main.dart, nhấn Chạy và dùng nó trên một chiếc điện thoại ngay trên trang này. Code được biên dịch bằng Flutter 3.41.7 và Dart 3, còn ứng dụng chạy bằng chính engine Flutter web, nên widget, bố cục, cử chỉ và hiệu ứng chuyển động hoạt động giống hệt trong một bản build Flutter web.

Chọn một ví dụ để bắt đầu: bộ đếm với setState, danh sách công việc, form đăng ký, giỏ hàng với provider, ứng dụng flutter_riverpod, nút bật chế độ tối hoặc một hiệu ứng chuyển động. Sửa code rồi nhấn Hot reload: ứng dụng cập nhật mà vẫn giữ nguyên state. Đây là nơi tiện lợi để thử một widget, kiểm tra bố cục hay tìm hiểu cách quản lý state, không cần SDK, không cần trình giả lập, không cần thiết lập.

Flutter playground này làm được gì

Flutter SDK thật: code của bạn được biên dịch bằng Flutter 3.41.7 và Dart 3, và engine Flutter web vẽ ứng dụng trên khung điện thoại.
Hot reload, giống như trong flutter run: sửa code và ứng dụng cập nhật mà không mất state. Nhấn Chạy để khởi động lại từ đầu.
Console nằm dưới điện thoại: mọi thứ bạn print() đều hiện ở đó, cùng với lỗi biên dịch có ghi rõ số dòng.
Các package sẵn sàng để import: provider, flutter_riverpod, go_router và intl, cùng mọi thứ trong package:flutter.
Code được lưu trong trình duyệt ngay khi bạn gõ. Sao chép hoặc tải main.dart về để làm tiếp trong project của riêng bạn.

Bạn có thể xây dựng gì trong Flutter playground

Các màn hình với Scaffold, AppBar, Column, Row và ListView, để hiểu bố cục hoạt động thế nào.
Widget tương tác với StatefulWidget và setState: bộ đếm, danh sách việc cần làm, công tắc và form có kiểm tra dữ liệu.
Quản lý state với provider (ChangeNotifier) và flutter_riverpod (Notifier, ProviderScope).
Theme, chế độ tối, màu Material 3 sinh từ một màu gốc, và hiệu ứng chuyển động như AnimatedContainer.

Câu hỏi thường gặp về trình biên dịch Flutter online

Trình biên dịch Flutter online này có miễn phí không?

Có. Công cụ miễn phí và không cần tài khoản: mở trang, sửa code và nhấn Chạy.

Có cần cài Flutter hay trình giả lập không?

Không. Code được biên dịch trên máy chủ của Coddy bằng Flutter 3.41.7, và ứng dụng chạy trong trình duyệt trên khung điện thoại. Bạn chỉ cần một trình duyệt hiện đại.

Hot reload có hoạt động không?

Có. Nhấn Hot reload sau khi sửa code, ứng dụng sẽ cập nhật mà vẫn giữ state, chẳng hạn giá trị của bộ đếm. Một số thay đổi, như đổi cấu trúc của một lớp, cần khởi động lại, và playground sẽ tự chạy lại ứng dụng cho bạn.

Có thể dùng những package nào?

Mọi thứ trong package:flutter và Dart SDK, cùng provider, flutter_riverpod, go_router, http và intl. Bạn không thể thêm package khác từ pub.dev ở đây.

Ứng dụng có gọi API hay tải ảnh từ internet được không?

Không ổn định. Ứng dụng chạy trong một khung cách ly không có origin riêng, nên hầu hết API và máy chủ ảnh từ chối nó, và các lệnh gọi http sẽ thất bại. Hãy đặt dữ liệu mẫu ngay trong code, và thử các lệnh gọi mạng thật trong project của riêng bạn.

Xem đầu ra của print() và lỗi ở đâu?

Trong Console nằm dưới điện thoại. Lỗi biên dịch ghi rõ dòng trong lib/main.dart, còn lỗi khi chạy và mọi thứ bạn print() cũng hiện ở đó.

Học Flutter tiếp như thế nào sau khi thử?

Sửa các ví dụ và xem chuyện gì xảy ra. Khi muốn học có hướng dẫn, khóa học Flutter của Coddy dạy widget, bố cục, state và điều hướng qua các bài học ngắn, chạy ứng dụng của bạn trên chính chiếc điện thoại bạn thấy ở đây.

Công cụ hữu ích cho Flutter

Các công cụ miễn phí chạy trên trình duyệt, dùng tốt cùng Playground Flutter, tất cả đều thuộc Coddy.

Nhúng trình soạn thảo Flutter So sánh các nền tảng học lập trình