لماذا فلاتر
أهمية فلاتر وأهم المفاهيم في فلاتر
لماذا فلاتر؟
فلاتر هو إطار عمل لتطوير تطبيقات الجوال وتطبيقات الويب، وهو مفتوح المصدر ومطور من قبل شركة جوجل. ولد فلاتر ليكون حلاً ممتازاً لمطوري التطبيقات الذين يرغبون في بناء تطبيقات متعددة المنصات باستخدام لغة واحدة فقط، وهي لغة البرمجة دارت Dart.
تمتلك فلاتر عدة مزايا تجعلها جذابة للمطورين، منها سرعة التطوير والأداء الجيد وواجهة مستخدم جميلة ومتطورة. كما أنها تدعم تطوير التطبيقات لمختلف المنصات مثل Android وiOS والويب وحتى سطح المكتب.
باختصار، يعتبر فلاتر خيارًا جيدًا للمطورين الذين يسعون لتطوير تطبيقات عالية الجودة ومتعددة المنصات بسرعة وكفاءة باستخدام لغة واحدة.
مميزات فلاتر وماذا تقدم لنا ؟
what Flutter is and its advantages
فلاتر هو إطار عمل لتطوير تطبيقات الجوال وتطبيقات الويب، وهو مفتوح المصدر ومطور من قبل شركة جوجل. يتميز فلاتر بعدة مزايا تجعله خيارًا جذابًا للمطورين، وهذه بعض الفوائد الرئيسية:
تطوير متعدد المنصات: يسمح فلاتر للمطورين ببناء تطبيق واحد يعمل على مختلف المنصات مثل Android وiOS والويب وحتى سطح المكتب، مما يوفر الوقت والجهد.
لغة واحدة: يستخدم فلاتر لغة برمجة واحدة وهي دارت Dart، مما يجعل عملية التطوير أكثر فعالية وتنظيمًا وسهولة للمطورين.
أداء عالي: يتميز فلاتر بأداء جيد وسرعة تشغيل، مما يساعد على تقديم تجربة مستخدم سلسة وممتازة.
واجهة مستخدم جميلة: يوفر فلاتر مكتبة واسعة من عناصر ومكونات واجهة المستخدم التي تساعد المطورين على إنشاء تطبيقات جذابة وملهمة.
مجتمع نشط: يتمتع فلاتر بمجتمع كبير ونشط من المطورين والمساهمين، مما يساعد على حل المشاكل بسرعة وتوفير الدعم والموارد للمطورين الجدد.
باختصار، فلاتر هو إطار عمل متعدد المنصات يتميز بسهولة الاستخدام والأداء العالي والتطوير السريع، مما يجعله خيارًا جيدًا للمطورين الذين يرغبون في بناء تطبيقات مبتكرة وجذابة لمختلف المنصات.
أهم المفاهيم المتعلقة بفلاتر
Main concepts of flutter
فلاتر (Flutter) يتضمن العديد من المفاهيم الرئيسية التي يحتاج المطورون إلى فهمها لبناء تطبيقات بنجاح. إليك شرحًا لأهم هذه المفاهيم بالعربية مع المصطلحات الإنجليزية:
واجهة المستخدم (UI) في فلاتر :
واجهة المستخدم هي الجزء الذي يتفاعل معه المستخدم في التطبيق.
UI يُمثّل بنية وتصميم التطبيق.
يتم إنشاء واجهة المستخدم باستخدام مجموعة من العناصر والمكونات.
الوحدة أو الودجت في فلاتر :
هي البنية الأساسية لبناء واجهة المستخدم في فلاتر.
كل شيء في فلاتر هو ويدجت، سواء كانت قطعة صغيرة من النص أو صورة أو حتى صفحة كاملة.
الحالة (State)في فلاتر:
تُمثّل البيانات التي يمكن أن تتغير خلال تشغيل التطبيق.
تستخدم لتحديث وتغيير الواجهة المستخدمة بناءً على التفاعلات مع المستخدم.
الودجت القابلة للتغيير (Stateful Widget)في فلاتر:
ويدجت يمكنها تغيير حالتها أثناء تشغيل التطبيق.
يُستخدم عادة عندما يحتاج الويدجت إلى إعادة بناء نفسه بناءً على التغييرات في الحالة.
الودجت غير القابلة للتغيير (Stateless Widget)في فلاتر :
ويدجت لا يتغير حالته أثناء تشغيل التطبيق.
يتم استخدامها عندما لا تحتاج الواجهة المستخدمة إلى تغيير استنادًا إلى بيانات ديناميكية.
المواد (Material) في فاتر :
تعني مكتبة تصميم جوجل Material Design، والتي تحتوي على مجموعة من المكونات والأدوات لبناء تطبيقات جميلة وبديهية.
(Cupertino):
هي مكتبة تصميم أبل Cupertino Design، والتي توفر مجموعة من المكونات والأدوات لتطوير تطبيقات تشبه تصميم iOS وتعمل على اجهزة ابل .
التخطيط (Layout) في فلاتر :
عملية تحديد توزيع وترتيب العناصر والمكونات داخل واجهة المستخدم.
شجرة الوجدت :Widget Tree
شجرة الودجت Widget Tree في فلاتر تشير إلى التنظيم الهرمي للودجات Widgets في تطبيقك.
الهدف من شجرة الودجات في تحديد كيفية ترتيب وترتيب مكونات واجهة المستخدم UI داخل التطبيق الخاص بك. وتشمل كل ودجة Widget عنصرًا من عناصر واجهة المستخدم، مثل الأزرار، والنصوص، والصور، والحاويات وغيرها، وتنظم هذه الودجات بطريقة تشبه الشجرة حيث يكون هناك ودجات رئيسية تحتوي على ودجات فرعية، وهكذا.
بمجرد بناء شجرة الودجات، يقوم فلاتر برسم وتحديث كل ودجت وفقًا للتغييرات التي تحدث في التطبيق.
فعلى سبيل المثال، إذا تغيرت حالة ودجت ما، فقد تحتاج شجرة الودجات إلى إعادة رسم بعض الودجات أو كلها بالكامل لعرض الحالة الجديدة للمستخدم.
باختصار، شجرة الودجات في فلاتر هي هيكل تنظيمي يعرض كيف ترتبط وتتفاعل وتتبادل الودجات داخل تطبيقك.
الهيكل التنظيمي لكونات تطبيق فلاتر في شكل شجرة من الوحدات أو الوجدات :
مثال Widget Tree:
لنفترض أن لديك تطبيق بسيط لعرض قائمة من العناصر، وكل عنصر في القائمة يتكون من صورة ونص.
إليك مثال بسيط لشجرة الودجات لهذا التطبيق:
MaterialApp: ودجت رئيسية تمثل التطبيق نفسه.
Scaffold: يمثل الإطار الأساسي للتطبيق ويوفر هيكل الصفحة الرئيسية.
AppBar: يحتوي على عنوان التطبيق.
Body: الجزء الرئيسي للصفحة التي تحتوي على محتوى التطبيق.
ListView: قائمة تعرض عناصر المحتوى.
ListTile: يمثل عنصرًا واحدًا في القائمة.
Leading: الصورة التي تظهر على يسار العنصر.
Title: النص الرئيسي للعنصر.
هذا هو مثال بسيط لشجرة الودجات لتطبيق يعرض قائمة من العناصر. كل ودجت تمثل جزءًا من واجهة المستخدم وتعمل معا لإنشاء تجربة مستخدم متكاملة.
مثال اخر لشجرة الودجات
لنفترض أن لديك تطبيق يعرض صفحة تسجيل الدخول، وتتألف الصفحة من حقول إدخال لاسم المستخدم وكلمة المرور وزر لتسجيل الدخول.
إليك مثال آخر لشجرة الودجات لهذا التطبيق:
MaterialApp: ودجة رئيسية تمثل التطبيق نفسه.
Scaffold: يمثل الإطار الأساسي للتطبيق ويوفر هيكل الصفحة الرئيسية.
AppBar: يحتوي على عنوان التطبيق.
Body: الجزء الرئيسي للصفحة التي تحتوي على محتوى التطبيق.
Column: تنظم العناصر عموديًا.
TextFormField: حقل إدخال لاسم المستخدم.
TextFormField: حقل إدخال لكلمة المرور.
ElevatedButton: زر لتسجيل الدخول.
هذا هو مثال آخر لشجرة الودجات لتطبيق يعرض صفحة تسجيل الدخول. تعمل الودجات معًا لإنشاء واجهة مستخدم تفاعلية تتيح للمستخدم إدخال معلومات الاعتماد الخاصة به وتسجيل الدخول إلى التطبيق.
مثال اخر
لنفترض أن لديك تطبيق بسيط لعرض قائمة من الصور مع عناوين صغيرة لكل صورة.
إليك مثال آخر لشجرة الودجات لهذا التطبيق:
MaterialApp: ودجة رئيسية تمثل التطبيق نفسه.
Scaffold: يمثل الإطار الأساسي للتطبيق ويوفر هيكل الصفحة الرئيسية.
AppBar: يحتوي على عنوان التطبيق.
Body: الجزء الرئيسي للصفحة التي تحتوي على محتوى التطبيق.
ListView: قائمة تعرض الصور والعناوين.
ListTile: يمثل عنصرًا واحدًا في القائمة.
leading: الصورة التي تظهر على اليسار من العنصر.
title: عنوان العنصر.
هذا مثال آخر لشجرة الودجات لتطبيق يعرض قائمة من الصور مع عناوين. كل ودجة تمثل عنصرًا في واجهة المستخدم، وتعمل معًا لتشكيل التجربة الكاملة للمستخدم عند تصفح القائمة.
الوحدات أو الوجدات الغير قابلة للتعديل
Flutter Stateless Widgets
Stateless Widgets في فلاتر هي ودجات لا تحتوي على حالة قابلة للتغيير. يعني هذا أن البيانات التي يتم عرضها بواسطة هذه الودجات لا يمكن تغييرها أثناء تشغيل التطبيق. الودجات اللاحالة على الحالة غالبًا ما تكون ثابتة أو ثابتة نسبيًا وتعرض معلومات يتم تحديدها مسبقًا.
إليك مثال بسيط على كيفية استخدام وحدات ثابتة Stateless Widget في فلاتر:
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('Stateless Widget Example'),
),
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20.0),
color: Colors.blue,
child: Text(
'Hello, this is a Stateless Widget!',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
),
),
);
}
}في هذا المثال، يتم استخدام ودجة MyApp كـ StatelessWidget حيث يتم تمرير مظهر التطبيق العام وتصميم الصفحة الرئيسية. بينما تستخدم MyWidget كـ StatelessWidget أيضًا، وتعرض جزءًا ثابتًا من المحتوى (نصًا في هذه الحالة) داخل واجهة المستخدم.
شرح المثال بالتفصيل
أول خطوة في التطبيق هي استدعاء [ () main] والذي يبدأ تنفيذ التطبيق.
تستدعي () main مع واجهة المستخدم الرئيسية للتطبيق، وهي ()MyApp .
MyApp هي StatelessWidget تم تعريفها لتكون الودجت الجذر للتطبيق. تُعيد MyApp MaterialApp تحتوي على Scaffold. MaterialApp توفر مظهر المواد لتطبيق فلاتر وتستخدم Scaffold كإطار للصفحة الرئيسية.
في Scaffold، AppBar تحتوي على عنوان التطبيق، والذي في هذه الحالة يكون من النوع “Stateless Widget Example“.
في Scaffold أيضًا، توجد ودجة الجسم (body)، التي تحتوي على ودجة MyWidget.
MyWidget هي StatelessWidget أيضًا.
تُعرض هذه الودجت عنصرًا واحدًا فقط، وهو Container.
هذا الـ Container يحتوي على نص ثابت “Hello, this is a Stateless Widget!” ويتم تعيين الأنماط الخاصة به، مثل اللون وحجم النص وغيرها.
يتم عرض التطبيق مع واجهة المستخدم التي تحتوي على AppBar مع عنوان التطبيق و MyWidget الذي يعرض النص “Hello, this is a Stateless Widget!” داخل خلفية زرقاء. هذه الودجات لا تتغير مع الوقت لأنها Stateless Widgets، مما يعني أنها ثابتة ولا يتم تحديثها.
الوحدات أو الوجدات القابلة للتعديل
Flutter Stateful Widgets
في فلاتر، Stateful Widgets هي ودجات يمكن أن تتغير حالتها خلال فترة تشغيل التطبيق. يُستخدم Stateful Widget عادةً عندما تحتاج الودجة إلى إعادة رسم نفسها أو تحديث نفسها استنادًا إلى تغييرات في البيانات أو الحالة.
دعنا نوضح ذلك بمثال:
في تطبيق مراسلة، يمكن أن يكون لديك ودجت عرض الرسائل” التي تعرض الرسائل الواردة.
عندما يقوم المستخدم بإرسال رسالة جديدة، يجب تحديث ودجت “عرض الرسائل” لإظهار الرسالة الجديدة.
في هذه الحالة، يكون من المنطقي استخدام Stateful Widget لـ “عرض الرسائل”.
عند استخدام Stateful Widget، يمكنك تعريف فئتين: الأولى هي StatelessWidget والثانية هي State والتي تحتوي على البيانات والمنطق التي يمكن أن تتغير.
وسنتناول كل هذا بالتفصيل في التطبيقات العملية
Great