طوّر واجهات Flutter باستخدام لغة Python
فلِت هو إطار عمل يتيح لك بناء واجهات مستخدم تفاعلية رائعة، باستخدام لغة Python الأكثر سهولة وشعبية، بدون الحاجة لتعلم Dart أو Flutter!
مميزات إطار فلِت
اكتشف لماذا يتزايد عدد المطورين الذين يختارون فلت لبناء واجهات المستخدم الخاصة بهم
Python النقية
استخدم لغة Python كما تعرفها وتحبها. لا حاجة لتعلم Dart أو لغات أخرى لبناء واجهات Flutter.
سهولة البدء
ابدأ في بناء تطبيقات جذابة خلال دقائق. لا داعي للإعدادات المعقدة أو تكوين المشروع الصعب.
متعدد المنصات
قم بتشغيل تطبيقك على سطح المكتب والويب والموبايل بنفس الكود. دعم كامل لنظم Windows وmacOS وLinux.
واجهات جذابة
استفد من مكتبة Flutter الغنية بالمكونات لإنشاء واجهات مستخدم أنيقة ومتجاوبة وجذابة.
تحديث حي
استمتع بتجربة تطوير تفاعلية مع التحديث الفوري للواجهة عند تغيير الكود، بدون إعادة تشغيل.
مجتمع داعم
انضم إلى مجتمع نابض بالحياة من المطورين المتعاونين، مع توثيق شامل ودعم مستمر.
البدء السريع مع فلِت
أنشئ تطبيقك الأول باستخدام فلت في خطوات بسيطة
1. تثبيت فلت
للبدء مع فلت، قم بتثبيت المكتبة باستخدام pip - أداة تثبيت حزم Python:
pip install flet
تأكد من تثبيت Python 3.7 أو إصدار أحدث على جهازك.
2. إنشاء تطبيق بسيط
أنشئ ملف جديد باسم hello.py
واكتب الكود التالي:
هذا الكود ينشئ صفحة بسيطة تعرض عبارة "مرحباً بالعالم من فلت!". لاحظ استخدام
page.rtl = True
لدعم اللغة العربية والكتابة من اليمين إلى اليسار.
3. تشغيل التطبيق
قم بتشغيل الملف باستخدام Python من سطر الأوامر:
python hello.py
سيتم تشغيل تطبيقك في نافذة جديدة تعرض النص الذي قمت بإنشائه:
مرحباً بالعالم من فلت!
تهانينا! لقد قمت بإنشاء وتشغيل أول تطبيق فلت خاص بك.
مكونات فلِت الأساسية
استكشف المكونات الرئيسية التي يمكنك استخدامها لبناء واجهات مستخدم رائعة
Text
عنصر لعرض النصوص بأحجام وألوان مختلفة
ft.Text(
"نص للعرض",
size=20,
color="blue",
weight="bold",
)
ElevatedButton
زر ثلاثي الأبعاد مع إمكانية تخصيص المظهر
ft.ElevatedButton(
"انقر هنا",
icon=ft.icons.TOUCH_APP,
on_click=handler_function,
)
TextField
حقل إدخال نصي متعدد الاستخدامات
ft.TextField(
label="أدخل اسمك",
hint_text="مثال: أحمد",
on_change=handle_change,
)
Row & Column
تنظيم العناصر أفقياً وعمودياً
ft.Row([
ft.Text("العنصر الأول"),
ft.Text("العنصر الثاني"),
], alignment=ft.MainAxisAlignment.CENTER)
Container
حاوية قابلة للتخصيص للعناصر الأخرى
ft.Container(
content=ft.Text("محتوى"),
width=200,
padding=10,
bgcolor="blue",
)
ListView
عرض قوائم قابلة للتمرير من العناصر
ft.ListView(
controls=[
ft.Text("العنصر 1"),
ft.Text("العنصر 2"),
],
spacing=10,
)