קומפיילר Flutter אונליין

כתבו אפליקציית Flutter, לחצו Run והשתמשו בה בטלפון בתוך הדפדפן. טעינה חמה שומרת על המצב שלה. בחינם, בלי הרשמה.

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, בלי אמולטור ובלי הגדרות.

מה ה-playground של Flutter עושה

Flutter SDK אמיתי: הקוד שלכם מתקמפל עם Flutter 3.41.7 ו-Dart 3, ומנוע הווב של Flutter מצייר את האפליקציה בתוך מסגרת של טלפון.
טעינה חמה כמו ב-flutter run: שנו את הקוד והאפליקציה מתעדכנת בלי לאבד את המצב שלה. לחצו Run כדי להתחיל מחדש.
קונסולה מתחת לטלפון: כל מה שמדפיסים עם print() מופיע שם, יחד עם שגיאות קומפילציה שמציינות את השורה.
חבילות מוכנות לייבוא: provider, flutter_riverpod, go_router ו-intl, וגם כל מה שיש ב-package:flutter.
הקוד נשמר בדפדפן בזמן שאתם מקלידים. העתיקו אותו או הורידו את main.dart כדי להמשיך בפרויקט שלכם.

מה אפשר לבנות ב-playground של 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 אחרי שינוי, והאפליקציה מתעדכנת ושומרת על המצב שלה, למשל הערך של מונה. שינויים מסוימים, כמו מבנה אחר של מחלקה, דורשים הפעלה מחדש, ואז ה-playground מריץ את האפליקציה שוב בשבילכם.

באילו חבילות אפשר להשתמש?

בכל מה שיש ב-package:flutter וב-Dart SDK, וגם ב-provider, flutter_riverpod, go_router, http ו-intl. כאן אי אפשר להוסיף חבילות אחרות מ-pub.dev.

האפליקציה יכולה לקרוא ל-API או לטעון תמונות מהאינטרנט?

לא באופן אמין. האפליקציה רצה במסגרת מבודדת בלי מקור משלה, ולכן רוב ממשקי ה-API ושרתי התמונות דוחים אותה, וקריאות http נכשלות. שימו נתוני דוגמה בקוד, ובדקו קריאות רשת אמיתיות בפרויקט שלכם.

איפה רואים את הפלט של print() ואת השגיאות?

בקונסולה מתחת לטלפון. שגיאות קומפילציה מציינות את השורה ב-lib/main.dart, וגם שגיאות בזמן ריצה וכל מה שמדפיסים עם print() מופיעים שם.

איך ללמוד Flutter אחרי שניסיתי?

שנו את הדוגמאות ותראו מה קורה. כשתרצו מסלול מודרך, קורס Flutter של Coddy מלמד ווידג'טים, פריסה, ניהול מצב וניווט בשיעורים קצרים שמריצים את האפליקציה שלכם על אותו טלפון שאתם רואים כאן.