مترجم 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 ولا محاكي ولا إعداد.

ما الذي تقدّمه ساحة تجربة Flutter هذه

Flutter SDK الحقيقي: يُترجَم كودك باستخدام Flutter 3.41.7 وDart 3، ويرسم محرك Flutter للويب التطبيق داخل إطار هاتف.
إعادة تحميل سريعة كما في 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 بعد أي تغيير، فيتحدّث التطبيق ويحتفظ بحالته، مثل قيمة العدّاد. بعض التغييرات، مثل تغيير بنية صنف، تحتاج إلى إعادة تشغيل، وعندها تعيد ساحة التجربة تشغيل التطبيق نيابة عنك.

ما الحزم التي يمكنني استخدامها؟

كل ما في package:flutter وDart SDK، إضافة إلى provider وflutter_riverpod وgo_router وhttp وintl. لا يمكن إضافة حزم أخرى من pub.dev هنا.

هل يمكن لتطبيقي استدعاء API أو تحميل صور من الإنترنت؟

ليس بشكل يُعتمد عليه. يعمل التطبيق داخل إطار معزول بلا أصل خاص به، لذلك ترفضه معظم واجهات API وخوادم الصور، وتفشل استدعاءات http. ضع بيانات تجريبية في الكود، وجرّب طلبات الشبكة الحقيقية في مشروعك.

أين أرى مخرجات print() والأخطاء؟

في وحدة التحكم أسفل الهاتف. تذكر أخطاء الترجمة السطر في lib/main.dart، وتظهر هناك أيضًا أخطاء التشغيل وكل ما تطبعه بـ print().

كيف أتعلم Flutter بعد أن أجرّبه؟

غيّر الأمثلة وشاهد ما يحدث. وعندما تريد مسارًا موجّهًا، يعلّمك كورس Flutter من Coddy الويدجتات والتخطيط والحالة والتنقل في دروس قصيرة تشغّل تطبيقك على الهاتف نفسه الذي تراه هنا.

أدوات مفيدة لـ Flutter

أدوات مجانية تعمل في المتصفح تتكامل بشكل رائع مع ملعب Flutter البرمجي، وجميعها جزء من Coddy.

ضمّن محرر Flutter قارن منصات البرمجة