كيف تبني ويدجدت في فلاتر How to create flutter widget
ما المقصود بالوحدات Widget أو الوجدات في فلاتر
مقدمة:
يعتبر إنشاء واجهة المستخدم واحدًا من أهم الجوانب في تطوير التطبيقات المحمولة، سواء كنت تهدف إلى تطوير تطبيقات لنظام Android أو iOS. في هذا الدرس، سنستكشف كيفية إنشاء واجهة المستخدم باستخدام Flutter، وهي إطار عمل لتطوير تطبيقات الجوال المتعددة المنصات بسرعة وبسهولة. سنتعرف على مبادئ التصميم المادية وكيفية تطبيقها في تطبيقاتنا باستخدام مكونات ويدجت Flutter. سنتناول أيضًا كيفية إضافة الزر وتخصيصه وإضافة وظائف له، بالإضافة إلى كيفية اختبار واجهة المستخدم الخاصة بنا باستخدام مكتبة flutter_test. من خلال هذا الدرس، ستكتسب المهارات الضرورية لبدء تطوير تطبيقات الجوال باستخدام Flutter وإنشاء واجهة مستخدم متطورة وجذابة.
في تطوير تطبيقات الهواتف المحمولة باستخدام تقنية Flutter، يعني مصطلح “ويدجيت” (Widget) مجموعة من العناصر أو العناصر البصرية التي تُستخدم لبناء وتصميم واجهة المستخدم.
يمكن أن تكون الويدجات عبارة عن أزرار، وأيقونات، ونصوص، وصور، وحاويات لتنظيم عناصر الواجهة مثل القوائم والجداول، والمزيد.
تعتبر الويدجات جزءًا أساسيًا من بنية تطبيقات Flutter حيث يتم ترتيبها وتجميعها بشكل هرمي لبناء وتصميم واجهة المستخدم بطريقة بسيطة ومرنة.
كيف ننشيء وجديت في فلاتر ؟
كيفية انشاء وجدت في فلاتر
لإنشاء ودجت في Flutter، تحتاج إلى إنشاء فئة تمتد من إحدى الفئات الرئيسية للويدجتات مثل StatelessWidget أو StatefulWidget.
وفي العموم، هناك خطوات رئيسية لإنشاء ويدجت في Flutter:
إنشاء الفئة:
خطوة 1 : نقم بإنشاء فئة جديدة تمتد من الفئة الرئيسية StatelessWidget أو StatefulWidget حسب حاجتنا.
يمكنك القيام بذلك بإضافة كود التالي:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// ارجاع الويدجيت الذي تريده هنا
}
}خطوة 2: تنفيذ الدالة build:
يجب علينا تنفيذ الدالة build داخل الفئة التي قمنا بإنشائها، وهي الدالة التي يجب أن تُرجع الويدجيت الذي تريده.
يُمكننا وضع أي ويدجيتات تريدها داخل هذه الدالة.
@override
Widget build(BuildContext context) {
return // ويدجيتاتك هنا
}
خطوة 3: تخصيص الويدجيت:
يُمكننا تخصيص الويدجيت الخاص بنا عن طريق إضافة الويدجيتات المناسبة وتطبيق الخصائص التي تريدها عليها.
على سبيل المثال، إضافة نص أو صورة أو أي ويدجيت آخر تحتاجه في تطبيقك.
خطوة 4: استخدام الويدجيت:
بمجرد إنشاء الويدجيت، يمكنك استخدامه في أي مكان في تطبيقك، سواء كان داخل الشاشات الرئيسية أو كجزء من ويدجيت آخر.
هذه الخطوات الأربعة تمثل العملية الأساسية لإنشاء ويدجيت في Flutter. يمكنك تخصيص وتطوير الويدجيتات الخاصة بك بحسب احتياجات التطبيق الخاص بك.
الكود النهائي للتطبيق
هذا هو الكود النهائي لإنشاء ويدجيت بسيط في Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق الودجيت',
home: Scaffold(
appBar: AppBar(
title: Text('مثال على الودجيت'),
),
body: Center(
child: MyWidget(), // استخدام الويدجيت هنا
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue, // تحديد لون الخلفية
padding: EdgeInsets.all(20.0), // تحديد هامش داخلي للحاوية
child: Text(
'مرحباً، هذا الويدجيت الخاص بي!',
style: TextStyle(
color: Colors.white, // تحديد لون النص
fontSize: 18.0, // تحديد حجم النص
fontWeight: FontWeight.bold, // جعل النص عريضًا
),
),
);
}
}في هذا الكود، قمنا بإنشاء تطبيق بسيط يحتوي على ويدجيت واحد فقط، وهو MyWidget. يقوم هذا الويدجيت بعرض نص بسيط داخل حاوية مع تخصيصات بسيطة للمظهر.
تم استخدام هذا الويدجيت داخل Center لتوسيطه في الشاشة.
قمنا بنسخ الكود ثم لصقه في مفسر دارت فلاتر من هنا
وبالضغط على ذر تشغيل كانت التنيجة كالتالي:
مثال أخر مع الشرح على كيفية إنشاء ودجت في فلاتر:
How to create simple widget in flutter
لإنشاء ويدجت بسيط في Flutter، يمكن اتباع الخطوات التالية:
خطوة 1:إنشاء مشروع Flutter جديد:
يجب أولاً إنشاء مشروع جديد في Flutter. يمكنك فعل ذلك باستخدام أمر flutter create في سطر الأوامر.
خطوة 2: نشاء ملف للويدجت:
نقم بإنشاء ملف جديد لوضع الويدجت به. مثلاً، يمكنك إنشاء ملف باسم custom_widget.dart.
خطوة 3 :تعريف الويدجت:
في هذا الملف، نقم بتعريف الويدجت الخاص بنا . على سبيل المثال، إذا كنت تريد إنشاء ويدجت بسيط يقوم بعرض نص “مرحباً!”، يمكنك استخدام كلاس StatelessWidget وتطبيق وظيفة [ ()build ] لإرجاع واجهة المستخدم المطلوبة.
مثال على ذلك:
import 'package:flutter/material.dart';
class MyCustomWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('مرحباً!'),
);
}
}
خطوة 4: استخدام الويدجت في التطبيق الرئيسي:
الآن بمجرد أن تكون قد أنشأت الويدجت، يمكنك استخدامها في التطبيق الرئيسي. على سبيل المثال، يمكنك استخدام الويدجت التي أنشأتها في الشاشة الرئيسية
(main.dart) بالشكل التالي:
import 'package:flutter/material.dart';
import 'custom_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter'),
),
body: Center(
child: MyCustomWidget(), // استخدام الويدجت التي أنشأتها
),
),
);
}
}
بهذه الطريقة، يمكنك إنشاء واستخدام ويدجت بسيط في تطبيق Flutter.
سوف نضع الكود النهائي في ملف واحد
فيما يلي الكود النهائي المكتوب في ملف واحد باسم 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('تطبيق Flutter'),
),
body: Center(
child: MyCustomWidget(), // استخدام الويدجت التي أنشأتها
),
),
);
}
}
class MyCustomWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('مرحباً!'),
);
}
}
يتضمن هذا الملف الوظيفة الرئيسية main() التي تقوم بتشغيل التطبيق، بالإضافة إلى تعريف الويدجت MyApp الذي يحتوي على الشاشة
الرئيسية واستخدام MyCustomWidget داخلها.
تشغيل التطبيق:
بمجرد الانتهاء من تعريف الويدجت واستخدامها في التطبيق الرئيسي، يمكننا تشغيل التطبيق على جهاز الهاتف الذكي الخاص بك أو محاكي Flutterللاطلاع على النتيجة النهائية.
وهنا لتشغيل التطبيق وترجمة الكود سنذهب الى هذا موقع لنجرب الكود ونرى النتيجة
شرح الكود:
import 'package:flutter/material.dart';
في هذا السطر، نقوم بإدخال مكتبة material.dart التي تحتوي على مكونات تصميم مواد Google (Material Design)
المستخدمة في تطبيقات Flutter.
void main() {
runApp(MyApp());
}
في هذا السطر، نقوم بتعريف وظيفة main() التي هي النقطة البدئية لتشغيل التطبيق. تقوم هذه الوظيفة بتشغيل تطبيق Flutter باستخدام
runApp() وتمرير MyApp() كمعامل لها.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter'),
),
body: Center(
child: MyCustomWidget(), // استخدام الويدجت التي أنشأتها
),
),
);
}
}في هذا السطر، نقوم بتعريف ويدجت MyApp التي تمثل التطبيق نفسه. يتم استخدام StatelessWidget لأن التطبيق لا يحتاج إلى حالة
قابلة للتغيير.
داخل هذا الويدجت، نعرف واجهة المستخدم باستخدام MaterialApp و Scaffold والذي يعرض تخطيطًا بسيطًا يحتوي على
شريط عنوان وجسم. في هذا الجسم، يتم وضع الويدجت التي أنشأناها بواسطة}{ ()MyCustomWidget } داخل
{ ()Center } لتوسيطها.
class MyCustomWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text('مرحباً!'),
);
}
}في هذا السطر، نقوم بتعريف ويدجت MyCustomWidget التي تقوم بعرض نص “مرحبًا!”.
يتم استخدام StatelessWidget لأن الويدجت لا تحتوي على حالة داخلية قابلة للتغيير. داخل هذا الويدجت، نقوم بإرجاع Container يحتوي على Text والذي يعرض النص المطلوب.
شجرة الودجت للتطبيق:
- MyApp (MaterialApp)
- Scaffold
- AppBar
- Text
- Center
- MyCustomWidget
- Container
- Text
في هذه الشجرة :
MyApp هو MaterialApp الذي يمثل التطبيق بأكمله.
Scaffold يحتوي على هيكل الشاشة بما في ذلك AppBar وCenter.
AppBar يحتوي على عنوان التطبيق.
Center يوضح المحتوى الرئيسي للشاشة، والذي يحتوي على MyCustomWidget.
MyCustomWidget هو الويدجت المخصص الذي يحتوي على Container وText لعرض النص “مرحباً!”.
هذه الشجرة توضح التسلسل الهرمي لجميع الويدجتات في التطبيق، حيث تبدأ من الويدجت الرئيسية وتتفرع إلى الويدجتات الفرعية.
اختبار: عن كيفية انشاء وجديت في فلاتر
1-ما هي خطوة رقم واحد في إنشاء ويدجت في فلاتر؟
أ) إعداد المكتبات
ب) تحديد الويدجت
ج) تشغيل التطبيق
د) إنشاء ملف جديد
2-ما هو الكلاس المستخدم لتعريف ويدجت بسيطة في فلاتر؟
أ) StatefulWidget
ب) WidgetBuilder
ج) StatelessWidget
د) MaterialApp
3-ما الدالة التي يجب تنفيذها لبناء واجهة المستخدم للويدجت في فلاتر؟
أ) initState()
ب) dispose()
ج) build()
د) createState()
4-كيف يمكن إضافة وظيفة callback إلى ويدجت في فلاتر؟
أ) باستخدام الكلاس Function
ب) عن طريق استخدام الأحداث (Events)
ج) بإضافة معامل وظيفة إلى الويدجت
د) بإعادة تعريف الويدجت
5-ما الطريقة المناسبة لتخصيص الويدجت في فلاتر إذا كنت بحاجة إلى تعديلات متقدمة؟
أ) استخدام الأحداث (Events)
ب) استخدام الكلاس Function
ج) إنشاء ويدجت مخصصة مع خصائص مخصصة
د) استخدام الأدوات المطورة في فلاتر
6-ما الخاصية التي يمكن استخدامها لتخصيص لون الخلفية لزر في فلاتر؟
أ) buttonColor
ب) backgroundColor
ج) color
د) background
7-ما هو الأمر الذي يستخدم لتشغيل الاختبارات في فلاتر؟
أ) flutter run
ب) flutter test
ج) flutter build
د) flutter analyze
8-ما هو الفرق بين StatefulWidget و StatelessWidget في فلاتر؟
أ) StatefulWidget يحتوي على حالة قابلة للتغيير، بينما StatelessWidget لا يفعل ذلك.
ب) StatefulWidget لا يمكن تغيير حالته، بينما StatelessWidget يمكن ذلك.
ج) كلاهما يحتوي على حالة قابلة للتغيير.
د) كلاهما لا يحتوي على حالة قابلة للتغيير.
9-ما هي أولى الخطوات التي يجب اتباعها لإنشاء واجهة مستخدم في Flutter؟
أ) تثبيت بيئة التطوير Flutter وإنشاء مشروع جديد.
ب) كتابة الكود بشكل مباشر دون أي خطوات إضافية.
ج) إنشاء تصميم جرافيكي قبل البدء في البرمجة.
10-ما هي الوظيفة التي يجب تنفيذها لبناء واجهة المستخدم في Flutter؟
أ) runApp().
ب) startApp().
ج) build().
11-كيف يمكننا تعريف واستخدام ويدجت بسيط في Flutter؟
أ) باستخدام كلاس StatefulWidget.
ب) باستخدام كلاس Widget.
ج) باستخدام كلاس StatelessWidget.
12-ما هو الهدف من استخدام MaterialApp في تطبيق Flutter؟
أ) تحديد الثيم والألوان للتطبيق.
ب) توفير بيئة لبناء واجهة المستخدم بناءً على مبادئ Material Design.
ج) إضافة الرموز والأيقونات إلى التطبيق.
13-ما هي الخطوة الأخيرة في إنشاء واجهة المستخدم في Flutter؟
أ) كتابة الكود البرمجي.
ب) تشغيل التطبيق واختباره.
ج) تصميم واجهة المستخدم باستخدام برنامج تصميم جرافيكي.
14-ما هو الويدجت الذي يمكن استخدامه لإنشاء زر في تطبيق Flutter؟
أ) FlatButton.
ب) TextButton.
ج) RaisedButton.
15-كيف يمكننا إضافة وظيفة callback لزر في تطبيق Flutter؟
أ) باستخدام onTap() الموجودة في الزر.
ب) باستخدام onPressed() الموجودة في الزر.
ج) باستخدام onClick() الموجودة في الزر.
16-ما هي الخطوة التي يجب اتخاذها لإضافة خصائص مخصصة إلى ويدجت في Flutter؟
أ) تعريف الخصائص المخصصة في الكلاس.
ب) استخدام الخصائص القياسية الموجودة بالفعل.
ج) إضافة الخصائص عن طريق تحديث مكتبة Flutter.
17-ما هو الهدف من استخدام اختبارات واجهة المستخدم في Flutter؟
أ) التأكد من عدم وجود أخطاء في الكود.
ب) التأكد من عمل الوظائف المطلوبة في التطبيق.
ج) التأكد من عدم تأثير التحديثات على التصميم الحالي.
18-كيف يمكننا تشغيل اختبارات واجهة المستخدم في Flutter؟
أ) باستخدام أدوات تطوير خاصة بذلك.
ب) باستخدام الوحدة النمطية للتطبيق.
ج) باستخدام الأمر flutter test في مجلد المشروع.
الاجابات من 9 الى 18:
ها هي الإجابات على الأسئلة:
أ) تثبيت بيئة التطوير Flutter وإنشاء مشروع جديد.
ج) build().
ج) باستخدام كلاس StatelessWidget.
ب) توفير بيئة لبناء واجهة المستخدم بناءً على مبادئ Material Design.
ب) تشغيل التطبيق واختباره.
ب) TextButton.
ب) باستخدام onPressed() الموجودة في الزر.
أ) تعريف الخصائص المخصصة في الكلاس.
أ) التأكد من عدم وجود أخطاء في الكود.
ج) باستخدام الأمر flutter test في مجلد المشروع.