إنشاء أول تطبيق في فلاتر

مقدمة:

يُعتبر Flutter أحد أفضل الأدوات لتطوير تطبيقات الجوال وتجربة المطورين في عالم التطوير. يوفر Flutter إطار عمل متعدد المنصات يسمح للمطورين ببناء تطبيق واحد يعمل بنجاح على كل من iOS و Android. في هذا الدرس، سنقدم لك نظرة عامة على كيفية إنشاء تطبيق بسيط باستخدام Flutter، وسنقوم بتوجيهك خطوة بخطوة خلال عملية البناء. سنبدأ بإنشاء تطبيق بسيط يعرض قائمة من العناصر، ونضيف تفاصيل تفاعلية مثل عرض نافذة منبثقة عند النقر على أحد العناصر. ستتاح لك هذه الخطوات فهمًا أساسيًا لكيفية بناء تطبيقات Flutter وتركيباتها المكونة، مما يمهد الطريق لاستكشاف المزيد وتطوير تطبيقات أكثر تعقيدًا وقوة. دعونا نبدأ في رحلة تطوير تطبيقات Flutter!

خطوات إنشاء تطبيق فلاتر 

 إليك خطوات إنشاء تطبيق بسيط باستخدام Flutter:

الخطوة 1: تثبيت Flutter وإعداد البيئة:

قم بتثبيت Flutter على جهازك. يمكنك العثور على التعليمات لذلك على موقع Flutter الرسمي.
تأكد من تثبيت أحدث إصدار من Android Studio أو VS Code مع ملحقات Flutter و Dart.

الخطوة 2: إنشاء مشروع Flutter جديد:

استخدم أحد أدوات التطوير المثبتة (Android Studio أو VS Code) لإنشاء مشروع جديد بواسطة Flutter.
حدد موقع لمشروعك واسمه.

الخطوة 3: تصميم واجهة المستخدم:

استخدم لغة تصميم واجهة المستخدم Flutter (Widget) لبناء وتخطيط واجهة المستخدم لتطبيقك.
يمكنك استخدام مجموعة متنوعة من العناصر مثل الأزرار والنصوص وحاويات النص والقوائم والصور وغيرها.
الخطوة 4: إضافة المنطق والوظائف:

أضف أي منطق أو وظائف تحتاجها تطبيقك، مثل استرجاع البيانات من الخادم أو معالجة البيانات المدخلة من المستخدم.
يمكنك كتابة الشفرة اللازمة لهذه الوظائف في ملفات Dart داخل المشروع.

الخطوة 5: اختبار التطبيق:

قم بتشغيل التطبيق على محاكي أو جهاز فعلي.
تحقق من أن واجهة المستخدم تعمل كما هو متوقع وأن الوظائف تعمل بشكل صحيح.
الخطوة 6: تحسين التطبيق وتصحيح الأخطاء:

استمر في تحسين وتعديل التطبيق حسب الحاجة.
تحقق من أن التطبيق يعمل بسلاسة وأنه لا يحتوي على أخطاء.
هذه خطوات عامة لإنشاء تطبيق بسيط باستخدام Flutter. يمكنك العثور على مزيد من الموارد والمعلومات على موقع Flutter الرسمي وفي المجتمعات البرمجية عبر الإنترنت.

مثال :سنقوم بإنشاء تطبيقا بسيطا يقوم بعرض نص عند النقر على زر. سنتبع الخطوات التالية:

الخطوة 1: إنشاء مشروع Flutter جديد:

قم بفتح Android Studio أو VS Code.
انقر على “Create New Flutter Project” واختر “Flutter Application”.
اسمح للمشروع بالتسمية واختر الموقع المناسب لحفظه.

الخطوة 2: تصميم واجهة المستخدم:

افتح ملف lib/main.dart.
قم بتعديل الشفرة لتصبح كالتالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Simple Flutter App'),
),
body: Center(
child: MyButton(),
),
),
);
}
}

class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Hello!'),
content: Text('Welcome to my simple Flutter app!'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
},
child: Text('Click me!'),
);
}
}

الخطوة 3: تشغيل التطبيق:

قم بتشغيل التطبيق على محاكي أو جهاز فعلي.
سترى الزر “Click me!” على واجهة التطبيق.

الخطوة 4: اختبار الوظيفة:

انقر على الزر “Click me!”.
ستظهر نافذة منبثقة مع عنوان “Hello!” ونص “Welcome to my simple Flutter app!”.
هذا مثال بسيط جدًا على تطبيق Flutter يقوم بعرض نص عند النقر على زر. يمكنك تعديل وتخصيص هذا التطبيق بما يناسب احتياجاتك ومتطلباتك الخاصة.

شرح كود التطبيق 

السطر 1-2: استيراد مكتبات Flutter المطلوبة

import 'package:flutter/material.dart';

يتم استيراد مكتبات Flutter الأساسية التي نحتاجها لبناء التطبيق.

السطر 4-6: الدالة الرئيسية main()

void main() {
runApp(MyApp());
}

تُشغل التطبيق باستدعاء دالة ()runApp  وتمرير  ()MyApp  كمعامل.

يتم تمرير () MyApp كدالة لأنها تمثل تطبيق Flutter.

السطر 8-21: كلاس MyApp

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Simple Flutter App'),
),
body: Center(
child: MyButton(),
),
),
);
}
}

يُمثل كلاس MyApp التطبيق نفسه.

يُعد هذا التطبيق عبارة عن عنصر واجهة مستخدم بسيط. يستخدم MaterialApp لتوفير البنية الأساسية للتطبيق بما في ذلك الثيمات وإدارة المسارات. تُعرض Scaffold بنية الواجهة الرئيسية للتطبيق، ويتم تحديد AppBar كعنوان للشريط العلوي للتطبيق. يتم تحديد MyButton() كجسم للواجهة الأساسية باستخدام Center.

السطر 23-48: كلاس MyButton

class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Hello!'),
content: Text('Welcome to my simple Flutter app!'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
},
child: Text('Click me!'),
);
}
}

يُعرف كلاس MyButton كواجهة مستخدم عنصر فرعي. يتم تمثيل الزر باستخدام ElevatedButton ويتم تعيين onPressed ليتم استدعاء دالة showDialog عند النقر عليه.

يتم استخدام showDialog لإنشاء نافذة حوارية (AlertDialog) تحتوي على عنوان ونص.

تُغلق النافذة الحوارية عند النقر على زر “Close” باستخدام Navigator.of(context).pop().

عند تشغيل التطبيق ستظهر شاشة تحتوي على زر “Click me!”، وعند النقر عليه، ستظهر نافذة حوارية مع عنوان “Hello!” ونص “Welcome to my simple Flutter app!”

 شجرة التطبيق:

شجرة التطبيق للتطبيق البسيط الذي قمنا بإنشائه:

MyApp
└── MaterialApp
    └── Scaffold
        ├── AppBar
        │   └── Text
        └── Center
            └── MyButton
                └── ElevatedButton
                    └── Text

MyApp: يمثل مدخل التطبيق وهو عبارة عن الكائن الذي يبدأ التطبيق ويقوم بتحميل الشاشة الرئيسية.
MaterialApp: يوفر المظهر العام للتطبيق ويسمح بتكوين الثيمات وإدارة المسارات.
Scaffold: يوفر تخطيطًا بسيطًا للصفحة الرئيسية للتطبيق ويحتوي على appBar و body.
AppBar: يعرض شريط العنوان في الجزء العلوي من الصفحة ويحتوي على عنوان التطبيق.
Center: يوفر تخطيطًا للمحتوى في المنتصف تلقائيًا.
MyButton: يمثل عنصر واجهة المستخدم الذي قمنا بإنشائه والذي يحتوي على زر.
ElevatedButton: يمثل الزر الذي يمكن النقر عليه.
Text: يمثل النص الذي يظهر داخل الزر.
هذه الشجرة توضح تركيبة التطبيق والعلاقات بين مكوناته المختلفة.

إنشاء تطبيق فلاتر يعرض قائمة من العناصر ويظهر تنبيهًا عند النقر على أحدها

اليكم التطبيق  مع شرحه خطوة بخطوة.

الهدف: إنشاء تطبيق بسيط يعرض قائمة من العناصر ويظهر تنبيهًا عند النقر على أحدها.

الشرح:

الخطوة 1: إنشاء مشروع Flutter جديد:

افتح Android Studio أو VS Code.
اختر “Create New Flutter Project”.
قم باختيار “Flutter Application”.
اسمح للمشروع بالتسمية واختر الموقع المناسب لحفظه.

الخطوة 2: تصميم واجهة المستخدم:

افتح ملف lib/main.dart.
قم بتعديل الشفرة لتصبح كالتالي:

الخطوة 3: تشغيل التطبيق:

قم بتشغيل التطبيق على محاكي أو جهاز فعلي.
ستظهر قائمة العناصر على واجهة التطبيق.

الخطوة 4: اختبار الوظيفة:

انقر على أحد العناصر في القائمة.
ستظهر نافذة منبثقة تعرض العنصر الذي تم اختياره.
هذا مثال آخر على تطبيق بسيط في Flutter. يعرض قائمة من العناصر ويعرض تنبيهًا عند اختيار أحدها.

شرح التطبيق بالتفصيل:

import 'package:flutter/material.dart';

نقوم بتضمين مكتبة المواد الخاصة بـ Flutter التي تحتوي على مجموعة من عناصر واجهة المستخدم.

void main() {
runApp(MyApp());
}

في هذا المثال، نقوم بتشغيل التطبيق عن طريق استدعاء الدالة runApp وتمرير مثيل من MyApp().

class MyApp extends StatelessWidget {

نقوم بتعريف فئة MyApp التي تمتد من StatelessWidget، وهي واحدة من فئات Flutter الأساسية التي تُستخدم لبناء تطبيقات Flutter.

final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

نعرف قائمة بسيطة من العناصر.

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Simple Flutter App'),
),

نستخدم MaterialApp لتعريف التطبيق ونعين Scaffold كواجهة المستخدم الرئيسية، ونحدد شريط العنوان باستخدام AppBar.

body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {

نستخدم ListView.builder لعرض قائمة العناصر بشكل ديناميكي استنادًا إلى عدد العناصر في القائمة، حيث نحدد العناصر وفقًا للموقع الفعلي في القائمة.

return ListTile(
title: Text(items[index]),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Item Selected'),
content: Text('You selected: ${items[index]}'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
},
);
},
),
),
);
}
}

نستخدم ListTile لعرض كل عنصر في القائمة بطريقة قابلة للنقر، وعند النقر على العنصر، سيتم عرض نافذة منبثقة (AlertDialog) تعرض العنصر الذي تم اختياره.

شجرة التطبيق

هذه هي شجرة التطبيق للتطبيق الذي تم إنشاؤه:

MyApp
└── MaterialApp
    └── Scaffold
        ├── AppBar
        │   └── Text
        └── ListView.builder
            └── ListTile
                └── Text

MyApp: يمثل مدخل التطبيق والذي يحتوي على مثيل من MaterialApp.
MaterialApp: يمثل تطبيق Flutter والذي يحتوي على مظهر التطبيق والصفحات.
Scaffold: يمثل تخطيط الصفحة الرئيسية للتطبيق والذي يحتوي على appBar و body.
AppBar: يمثل شريط العنوان في الصفحة.
ListView.builder: يعرض قائمة العناصر بناءً على بيانات المصدر.
ListTile: يعرض عنصر واحد في القائمة وهو قابل للنقر.
Text: يعرض نصا داخل كل عنصر من عناصر القائمة.

تجربة التطبيق:

يالنقر على Item1 تظهر الناذفذ التالية:

أختبار على هذا الدرس : خطوات إنشاء تطبيق فلاتر 

هذا الاختبار يهدف إلى اختبار معرفتك الأساسية حول مفاهيم تطوير تطبيقات Flutter. 

1-ما هي أداة Flutter؟

أ: مكتبة برمجية لبناء تطبيقات الويب.
ب: إطار عمل لبناء تطبيقات الجوال متعددة المنصات.
ج: لغة برمجة لبناء تطبيقات سطح المكتب.

2-ما هي دالة main() في تطبيق Flutter؟

أ: تبدأ التطبيق وتقوم بتحميل الشاشة الرئيسية.
ب: تعرض قائمة العناصر على الشاشة الرئيسية.
ج: تنشئ مكتبة المواد لواجهة المستخدم.

3-ما هي الفئة التي يجب أن تمتد منها الفئة الرئيسية في تطبيق Flutter؟

أ: StatelessWidget
ب: StatefulWidget
ج: Widget

4-ما هو العنصر الذي يستخدم لعرض قائمة من العناصر في تطبيق Flutter؟

أ: List
ب: ListView
ج: Array

5-ما هو الوسيلة التي تستخدم لعرض نافذة منبثقة في تطبيق Flutter؟

أ: Popover
ب: Dialog
ج: AlertBox

6-كيف يتم تحديد تفاعل العنصر في قائمة Flutter؟

أ: باستخدام onPress()
ب: باستخدام onTap()
ج: باستخدام onClick()

7-ما هي المكتبة التي يمكن استخدامها في Flutter لإنشاء تطبيقات الويب؟

أ: Flutter Webkit
ب: Flutter for Web
ج: Flutter Web

8-ما هو العنصر الذي يستخدم لتخطيط العناصر بشكل مركزي في تطبيق Flutter؟

أ: Center
ب: Align
ج: Column!

الاجابات: ها هي الإجابات الصحيحة للكويز:

ب: إطار عمل لبناء تطبيقات الجوال متعددة المنصات.
أ: تبدأ التطبيق وتقوم بتحميل الشاشة الرئيسية.
أ: StatelessWidget
ب: ListView
ب: Dialog
ب: باستخدام onTap()
ج: Flutter Web
أ: Center