شرح StatefulWidgets العناصر متغيرة الحالة في فلاتر

 “فهم واستخدام StatefulWidgets في تطوير تطبيقات Flutter”

مقدمة لدرس “فهم واستخدام StatefulWidgets في تطوير تطبيقات Flutter”:

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

في هذا الدرس، سنقوم بفهم أساسيات StatefulWidgets وكيفية استخدامها في تطوير تطبيقات Flutter. سنتعلم كيفية إنشاء StatefulWidgets، وكيفية تحديث الحالة باستخدام دالة setState()، وكيفية تفاعل الواجهة مع التغييرات في الحالة. سنقوم أيضًا بتطبيق مثال عملي لاستخدام StatefulWidgets في إنشاء تطبيق بسيط وتوضيح كيفية إدارة الحالة وتحديث الواجهة بناءً على ذلك.

من خلال هذا الدرس، ستكتسب المهارات اللازمة لاستخدام StatefulWidgets بكفاءة في تطوير تطبيقات Flutter، مما يمكنك من إنشاء تطبيقات تفاعلية وممتعة للمستخدمين.

ما المقصود بعناصر واجهة المستخدم القابلة للتغير؟

 StatefulWidget in flutter

Widget في Flutter هو عبارة عن عنصر أساسي يستخدم لبناء واجهة المستخدم. StatelessWidget و StatefulWidget هما نوعان رئيسيان من Widgets في Flutter. StatefulWidget هو نوع خاص من Widget يسمح بتغيير حالته أثناء تشغيل التطبيق.

عند استخدام StatefulWidget في تطبيق Flutter، يتم تقسيمه إلى جزأين رئيسيين: الكلاس والحالة (State). الكلاس يحتوي على معلومات ثابتة حول الواجهة مثل البنية والإعدادات الأولية، في حين أن الحالة (State) تحتوي على معلومات قابلة للتغيير والتي يمكن أن تتغير خلال تشغيل التطبيق.

عندما يحدث تغيير في الحالة، يتم تحديث StatefulWidget وإعادة بناء الواجهة وفقًا للتغيير الجديد. يتم ذلك عن طريق استدعاء دالة setState() داخل الكلاس StatefulWidget، والتي تُعيد بناء الواجهة بالحالة الجديدة.

من الجيد استخدام StatefulWidget عندما تحتاج إلى تحديث الواجهة بناءً على حالة متغيرة مثل تحميل بيانات من الإنترنت أو تفاعل المستخدم مع التطبيق.

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

من عناصر واجهة المستخدم المتغيرة:

هناك العديد من StatefulWidgets المدمجة والتي يمكن استخدامها في تطبيقات Flutter لإنشاء واجهات مستخدم ديناميكية. بعض أهم StatefulWidgets المدمجة في Flutter تشمل:

TextField: يستخدم لإنشاء مربع نص يتيح للمستخدمين إدخال النص.

Checkbox: يستخدم لعرض مربع الاختيار ويتيح للمستخدمين تحديد أو إلغاء تحديد الخيارات.

Radio: يستخدم لعرض أزرار الاختيار (راديو) حيث يمكن للمستخدم اختيار خيار واحد من بين العديد.

Slider: يستخدم لعرض شريط قابل للتحريك يمكن للمستخدمين تحديد قيمة رقمية من خلال تحريك المؤشر.

Switch: يستخدم لعرض مفتاح تبديل يتيح للمستخدمين تمكين أو تعطيل وظيفة معينة.

DropdownButton: يستخدم لإنشاء زر يفتح قائمة منسدلة تحتوي على خيارات يمكن للمستخدم اختيار واحد من بينها.

RefreshIndicator: يستخدم لإضافة ميزة “سحب للتحديث” إلى قائمة أو عنصر واجهة مستخدم.

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

GridView: يستخدم لعرض عناصر بشكل شبكة، حيث يمكن تحديد عدد العناصر في كل صف وعدد الأعمدة.

ListView: يستخدم لعرض قائمة من العناصر بشكل عمودي.

هذه بعض الـ StatefulWidgets الرئيسية المدمجة في Flutter، ويمكن استخدامها لإنشاء تطبيقات متنوعة وديناميكية.

 خطوة بخطوة كيف نستخدم StatefulWidgets in flutter

 نقوم بإنشاء واستخدام StatefulWidget في تطبيق Flutter خطوة بخطوة:

إنشاء StatefulWidget:
نبدأ بإنشاء StatefulWidget باستخدام كلمة المفتاح class متبوعة بإسم الكلاس الخاص بالواجهة التي نرغب في بنائها.

ثم نقوم بتمديد الكلاس من StatefulWidget ونفصل بين الكلاس وحالته المتغيرة باستخدام State:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
@override
Widget build(BuildContext context) {
return Container(
// اضافة عناصر وواجهة المستخدم هنا
);
}
}

تعريف الحالة (State):
في الفئة _MyWidgetState، نعرّف المتغيرات التي قد تتغير خلال حياة الواجهة. على سبيل المثال، إذا كنا نريد تتبع حالة تبديل، يمكننا تعريف متغير بوولياني لهذا الغرض:

class _MyWidgetState extends State<MyWidget> {
bool isSwitched = false;

@override
Widget build(BuildContext context) {
return Container(
child: Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
});
},
),
);
}
}

تحديث الحالة بواسطة ()setState :
عندما نريد تحديث حالة State، نستخدم دالة setState() لتحديث وإعادة بناء الواجهة بالحالة الجديدة. في المثال أعلاه، عند تغيير حالة التبديل، نقوم بتحديث isSwitched وإعادة بناء الواجهة بالقيمة الجديدة.

استخدام الواجهة في التطبيق:

بمجرد إنشاء StatefulWidget، يمكن استخدامها كأي Widget آخر في تطبيقك. يمكنك وضعها في أي مكان في ترتيب واجهة المستخدم، سواء داخل MaterialApp أو Scaffold أو أي عنصر آخر في التطبيق.

على سبيل المثال:

void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('My App')),
body: MyWidget(),
),
));
}

بهذه الطريقة، يمكنك استخدام StatefulWidget لإنشاء واجهات مستخدم ديناميكية وتفاعلية في تطبيقات Flutter.

تطبيق 1: على استخدام :StatefulWidgets in flutter

 سنقوم بإنشاء تطبيق بسيط يستخدم StatefulWidget لعرض عداد يتغير بمجرد النقر على زر.

هاكم كود التطبيق:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CounterScreen(),
);
}
}

class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Counter Value:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

هذا التطبيق يحتوي على عداد بسيط، حيث يتم تحديث قيمة العداد عند النقر على زر الزيادة. تم إنشاء كلاس CounterScreen كـ StatefulWidget، وتتم إضافة قيمة العداد ووظيفة التحديث داخل كلاس _CounterScreenState الذي يمتلك الحالة.

عندما يتم النقر على زر الزيادة، يتم استدعاء الدالة _incrementCounter() التي تحدث الحالة باستخدام setState()، مما يؤدي إلى إعادة بناء الواجهة وعرض القيمة الجديدة للعداد.

أثناء تشغيل التطبيق، يمكن للمستخدم النقر على زر الزيادة ومشاهدة قيمة العداد تتغير بشكل ديناميكي.

شرح الكود:

import ‘package:flutter/material.dart’;:

نقوم بتحميل مكتبة Flutter الأساسية التي تحتوي على Widgets ومكونات واجهة المستخدم.

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

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

class MyApp extends StatelessWidget { … }:

هنا نقوم بتعريف كلاس MyApp الذي يمتد من StatelessWidget، وهو الكلاس الرئيسي لتطبيقنا.

return MaterialApp(…);:

في هذا السطر، نقوم بإرجاع عنصر MaterialApp الذي يحتوي على تصميم الواجهة الرئيسي للتطبيق.

class CounterScreen extends StatefulWidget { … }:

نقوم بتعريف كلاس CounterScreen كـ StatefulWidget، حيث يمكن تغيير الحالة فيه.

int _counter = 0;: نقوم بتعريف متغير _counter لتخزين قيمة العداد الحالية، ونبدأه بالقيمة صفر.

void _incrementCounter() { … }: هذه الدالة تقوم بزيادة قيمة _counter بمقدار واحد عندما يتم النقر على زر الزيادة.

setState(() { _counter++; });: في هذا السطر، نستخدم setState() لتحديث الواجهة وإعادة بناء العناصر التي تعتمد على _counter.

Scaffold(…);: هنا نقوم بإنشاء Scaffold، الذي يحتوي على AppBar وعناصر الواجهة الرئيسية الأخرى.

floatingActionButton: FloatingActionButton(…);: هذا السطر يقوم بإنشاء زر الزيادة العائم وتعيين الدالة _incrementCounter() كوظيفة تنفيذ عند النقر.

home: CounterScreen(),: هنا نقوم بتحديد CounterScreen() كالشاشة الرئيسية للتطبيق، والتي تحتوي على عنصر واجهة المستخدم الذي نريد التفاعل معه.

اكتب شجرة الويدجت لهذا التطبيق

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

MyApp
└─ MaterialApp
   └─ Scaffold
      ├─ AppBar
      └─ Center
         └─ Column
            ├─ Text ("Counter Value:")
            └─ Text (قيمة العداد)
      └─ FloatingActionButton

تطبيق العداد يبدأ مع MyApp الذي يحتوي على MaterialApp. MaterialApp يحتوي على Scaffold الذي يحتوي على AppBar ووسط الشاشة (Center). في وسط الشاشة، هناك Column يحتوي على نصين: واحد لعرض “Counter Value:” والآخر لعرض قيمة العداد. وأخيراً، هناك FloatingActionButton المستخدم لزيادة قيمة العداد.

  تطبيق 2  على StatefulWidgets in flutter

سنقوم بإنشاء تطبيق Flutter متقدم يستخدم StatefulWidgets لعرض قائمة من العناصر والسماح للمستخدم بإضافة وحذف العناصر. في هذا التطبيق، سنقوم بإنشاء قائمة قابلة للتحرير، وسنقوم بتحديث القائمة عندما يتم إضافة أو حذف عنصر.

هاكم الكود:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListScreen(),
);
}
}

class ListScreen extends StatefulWidget {
@override
_ListScreenState createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
List<String> _items = ['Item 1', 'Item 2', 'Item 3'];
TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Example'),
),
body: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
_items.removeAt(index);
});
},
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => _showAddItemDialog(context),
tooltip: 'Add Item',
child: Icon(Icons.add),
),
);
}

void _showAddItemDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Add New Item'),
content: TextField(
controller: _controller,
decoration: InputDecoration(hintText: 'Enter item text'),
),
actions: <Widget>[
TextButton(
onPressed: () {
setState(() {
_items.add(_controller.text);
_controller.clear();
Navigator.of(context).pop();
});
},
child: Text('Add'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
],
);
},
);
}
}

في هذا التطبيق، يتم استخدام StatefulWidget لإنشاء ListScreen الذي يحتوي على ListView لعرض العناصر الموجودة في قائمة _items. تم استخدام ListTile لعرض كل عنصر مع زر حذف. العناصر يمكن أن تحذف عند النقر على زر الحذف.

هناك زر عائم (FloatingActionButton) يسمح بإضافة عناصر جديدة إلى القائمة. عند النقر على الزر، يظهر مربع حوار (AlertDialog) يطلب من المستخدم إدخال نص العنصر الجديد، وبعد ذلك يتم إضافة العنصر الجديد إلى القائمة.

تطبيق 3: عن StatefulWidgets in flutter

لنقم بإنشاء تطبيق أكثر تقدمًا يستخدم StatefulWidgets في Flutter، وهو تطبيق يتيح للمستخدم تسجيل الدخول وعرض الصفحة الرئيسية بعد تسجيل الدخول. سنستخدم StatefulWidget لإدارة حالة تسجيل الدخول وعرض الصفحة الرئيسية.

هاكم الكود:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginScreen(),
);
}
}

class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
TextEditingController _nameController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
bool _isLoggedIn = false;

void _login() {
String name = _nameController.text;
String password = _passwordController.text;

// Perform login logic here
// For simplicity, let's assume login is successful if name and password are not empty
if (name.isNotEmpty && password.isNotEmpty) {
setState(() {
_isLoggedIn = true;
});
} else {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Login Failed'),
content: Text('Please enter a valid name and password.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: _isLoggedIn
? Center(
child: Text('Welcome, ${_nameController.text}!'),
)
: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _nameController,
decoration: InputDecoration(labelText: 'name'),
),
TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _login,
child: Text('Login'),
),
],
),
),
);
}
}

في هذا التطبيق، يتم استخدام StatefulWidget لإنشاء شاشة تسجيل الدخول (LoginScreen)، حيث يتم تحديث الحالة للتبديل بين شاشة تسجيل الدخول وشاشة الصفحة الرئيسية بناءً على حالة تسجيل الدخول.

عند الضغط على زر “Login”، يتم التحقق من مدخلات اسم المستخدم وكلمة المرور. إذا كانت المدخلات صالحة، يتم تحديث الحالة لتسجيل الدخول ويتم عرض رسالة ترحيبية. إذا لم تكن المدخلات صالحة، يتم عرض رسالة خطأ.

  شرح الكود  :

import ‘package:flutter/material.dart’;: استيراد مكتبة Flutter الأساسية لبناء تطبيقات المواد.

void main() { runApp(MyApp()); }: تعريف الدالة الرئيسية main() واستدعاء runApp() لبدء التطبيق باستخدام MyApp().

class MyApp extends StatelessWidget { … }: تعريف كلاس MyApp الذي يمتد من StatelessWidget ويعيد MaterialApp.

return MaterialApp(…);: تكوين MaterialApp لتحديد الإعدادات العامة للتطبيق مثل العنوان والسمة والشاشة الرئيسية.

class LoginScreen extends StatefulWidget { … }: تعريف كلاس LoginScreen كـ StatefulWidget الذي يحتوي على حالة يمكن تغييرها ويتم تمثيلها بـ _LoginScreenState.

TextEditingController _nameController = TextEditingController();: تعريف متحكم في نص للتحكم في حقل اسم المستخدم.

bool _isLoggedIn = false;: تعريف متغير يُعبر عن حالة تسجيل الدخول.

void _login() { … }: دالة تُقوم بالتحقق من بيانات تسجيل الدخول وتحديث الحالة بناءً على نتيجة التحقق.

body: _isLoggedIn ? … : …: استخدام الشرط لعرض محتوى مختلف بناءً على حالة تسجيل الدخول.

TextField(…),: استخدام TextField للسماح للمستخدم بإدخال اسم المستخدم وكلمة المرور.

SizedBox(height: 20),: إضافة مسافة بين حقول النص وزر تسجيل الدخول.

ElevatedButton(…),: زر تسجيل الدخول الذي يتم الضغط عليه لتشغيل دالة التسجيل.

void _showAddItemDialog(BuildContext context) { … }: دالة لعرض مربع حوار لإضافة عنصر جديد.

setState(() { … });: استخدام setState لتحديث حالة الواجهة عند تغيير حالة تسجيل الدخول.

شجرة الويديجت لهذا التطبيق:

هذه هي شجرة الويدجت لتطبيق تسجيل الدخول:

MyApp
└─ MaterialApp
   └─ LoginScreen
      └─ Scaffold
         ├─ AppBar
         └─ body (Conditional)
            ├─ Center
            │  └─ Text (Welcome Message)
            └─ Padding
               └─ Column
                  ├─ TextField (name)
                  ├─ TextField (Password)
                  ├─ SizedBox
                  ├─ ElevatedButton (Login)

MyApp: يكون هو النقطة البداية لتطبيق Flutter.
MaterialApp: يحتوي على تكوينات العرض العامة للتطبيق.
LoginScreen: الشاشة التي تقوم بتسجيل الدخول وعرض صفحة الرئيسية.
Scaffold: يوفر هيكل الواجهة الأساسي مع AppBar ومحتوى الشاشة.
AppBar: يحتوي على شريط العنوان في أعلى الشاشة.
body: الجسم الرئيسي للشاشة، حيث يتم عرض إما رسالة الترحيب أو حقول تسجيل الدخول.
Center: يضم رسالة الترحيب بعد تسجيل الدخول.
Padding: يوفر تباعد بين عناصر الواجهة.
Column: يستخدم لترتيب عناصر الواجهة بشكل عمودي.
TextField: حقول الإدخال لاسم المستخدم وكلمة المرور.
SizedBox: يضيف مسافة بين حقول الإدخال وزر تسجيل الدخول.
ElevatedButton: زر يستخدم لتسجيل الدخول إلى التطبيق.

تطبيق 4 :عن StatefulWidgets in flutter

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

سنستخدم StatefulWidgets لإدارة قائمة الملاحظات وسيتمكن المستخدم من إضافة وحذف الملاحظات.

هاكم الكود:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Notes App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: NotesScreen(),
);
}
}

class NotesScreen extends StatefulWidget {
@override
_NotesScreenState createState() => _NotesScreenState();
}

class _NotesScreenState extends State<NotesScreen> {
List<String> _notes = [];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Notes'),
),
body: _notes.isEmpty
? Center(
child: Text('No notes yet.'),
)
: ListView.builder(
itemCount: _notes.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_notes[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() {
_notes.removeAt(index);
});
},
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => _showAddNoteDialog(context),
tooltip: 'Add Note',
child: Icon(Icons.add),
),
);
}

void _showAddNoteDialog(BuildContext context) {
TextEditingController _noteController = TextEditingController();

showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Add Note'),
content: TextField(
controller: _noteController,
decoration: InputDecoration(hintText: 'Enter your note'),
),
actions: <Widget>[
TextButton(
onPressed: () {
setState(() {
_notes.add(_noteController.text);
_noteController.clear();
Navigator.of(context).pop();
});
},
child: Text('Add'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
],
);
},
);
}
}

في هذا التطبيق، يتم استخدام StatefulWidget لإنشاء شاشة الملاحظات (NotesScreen)، حيث يتم تحديث الحالة لإدارة قائمة الملاحظات وسيتمكن المستخدم من إضافة وحذف الملاحظات.

عند الضغط على زر “Add”, يظهر مربع حوار للمستخدم لإضافة ملاحظة جديدة. عند الضغط على زر “Delete” في كل ملاحظة، يتم حذفها من القائمة.

 شرح الكود  :

import ‘package:flutter/material.dart’;: استيراد مكتبة Flutter الأساسية لبناء تطبيقات المواد.

void main() { runApp(MyApp()); }: تعريف الدالة الرئيسية main() واستدعاء runApp() لبدء التطبيق باستخدام MyApp().

class MyApp extends StatelessWidget { … }: تعريف كلاس MyApp الذي يمتد من StatelessWidget ويعيد MaterialApp.

return MaterialApp(…);: تكوين MaterialApp لتحديد الإعدادات العامة للتطبيق مثل العنوان والسمة والشاشة الرئيسية.

class NotesScreen extends StatefulWidget { … }: تعريف كلاس NotesScreen كـ StatefulWidget الذي يحتوي على حالة يمكن تغييرها ويتم تمثيلها بـ _NotesScreenState.

List<String> _notes = [];: تعريف قائمة الملاحظات _notes التي تبدأ فارغة.

body: _notes.isEmpty ? … : …: استخدام الشرط لعرض محتوى مختلف بناءً على حالة قائمة الملاحظات.

ListView.builder(…),: استخدام ListView.builder لعرض قائمة الملاحظات.

floatingActionButton: FloatingActionButton(…),: إضافة FloatingActionButton يسمح بإضافة ملاحظة جديدة.

void _showAddNoteDialog(BuildContext context) { … }: دالة لعرض مربع حوار لإضافة ملاحظة جديدة.

setState(() { … });: استخدام setState لتحديث حالة الواجهة عند إضافة أو حذف ملاحظة.

شجرة الويدجت لهذا التطبيق:

هذه هي شجرة الويدجت لتطبيق الملاحظات:

MyApp
└─ MaterialApp
   └─ NotesScreen
      └─ Scaffold
         ├─ AppBar
         └─ body (Conditional)
            ├─ Center
            │  └─ Text (No notes yet.)
            └─ ListView.builder
               ├─ ListTile
               │  ├─ Text (Note 1)
               │  └─ IconButton (Delete)
               ├─ ListTile
               │  ├─ Text (Note 2)
               │  └─ IconButton (Delete)
               └─ ...
      └─ floatingActionButton

MyApp: يكون هو النقطة البداية لتطبيق Flutter.
MaterialApp: يحتوي على تكوينات العرض العامة للتطبيق.
NotesScreen: شاشة تطبيق الملاحظات.
Scaffold: يوفر هيكل الواجهة الأساسي مع AppBar ومحتوى الشاشة.
AppBar: يحتوي على شريط العنوان في أعلى الشاشة.
body: الجسم الرئيسي للشاشة، يحتوي على مركز أو ListView لعرض الملاحظات.
Center: يستخدم لعرض رسالة “No notes yet.” عندما لا تكون هناك ملاحظات.
ListView.builder: يُستخدم لعرض قائمة الملاحظات.
ListTile: كل عنصر في القائمة يمثل ملاحظة ويحتوي على نص الملاحظة وزر حذف.
floatingActionButton: زر يسمح بإضافة ملاحظة جديدة.

اختبار مع الاجابات عن :StatefulWidgets in flutter

 سنقوم بإنشاء كويز مع أسئلة وأجوبة حول درس StatefulWidgets في Flutter. هيا بنا نبدأ:

السؤال الأول:
ما هو الفرق بين StatefulWidget و StatelessWidget في Flutter؟

StatelessWidget يستخدم للواجهات الثابتة التي لا تحتاج إلى تحديث الحالة.
StatefulWidget يستخدم للواجهات التي تحتاج إلى تحديث الحالة والتفاعل مع المستخدم.
StatelessWidget يمكن أن يحتوي على حالة لكن StatefulWidget لا يمكن.
StatefulWidget يستخدم للواجهات الثابتة التي لا تحتاج إلى تحديث الحالة.

السؤال الثاني:
ما هي الدالة التي يُستخدم setState() داخلها في StatefulWidget؟

initState()
build()
setState()
dispose()

السؤال الثالث:
ما هو الهدف الرئيسي لاستخدام StatefulWidgets في Flutter؟

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

السؤال الرابع:
كيف يمكن استخدام setState() لتحديث واجهة المستخدم في StatefulWidget؟

عن طريق استدعاء setState() وتحديد العناصر التي يجب تحديثها داخلها.
عن طريق استخدام StatefulWidget بدلاً من StatelessWidget.
عن طريق استخدام StatefulWidget وتمرير البيانات إليه كمعاملات.
عن طريق استدعاء setState() داخل build().

السؤال الخامس:
متى يُستخدم StatelessWidget في Flutter؟

عندما يكون للواجهة حالة قابلة للتغيير.
عندما تكون الواجهة ثابتة ولا تحتاج إلى تحديث الحالة.
عندما تحتوي الواجهة على قائمة من البيانات.
عندما تحتاج الواجهة إلى التفاعل مع المستخدم.
الأجوبة:
بالطبع يستخدم StatelessWidget للواجهات الثابتة التي لا تحتاج إلى تحديث الحالة.
الدالة التي يُستخدم setState() داخلها هي: initState().
الهدف الرئيسي لاستخدام StatefulWidgets في Flutter هو تحديث الحالة والتفاعل مع المستخدم.
يُستخدم setState() لتحديث واجهة المستخدم عن طريق استدعائه وتحديد العناصر التي يجب تحديثها داخله.
StatelessWidget يُستخدم عندما تكون الواجهة ثابتة ولا تحتاج إلى تحديث الحالة.
هذه كانت أسئلة الكويز وإجاباتها حول درس StatefulWidgets في Flutter.

السؤال السادس :
ما هو الهدف الرئيسي من استخدام StatefulWidgets في Flutter؟

a) إنشاء واجهات المستخدم فقط
b) إدارة الحالة وتحديث الواجهة بناءً عليها
c) تحقيق الاتصال بخوادم قواعد البيانات
d) تصميم تأثيرات بصرية معقدة

الجواب الصحيح: b) إدارة الحالة وتحديث الواجهة بناءً عليها

السؤال السابع :
ما هي الفئة التي يجب أن يمتد منها StatefulWidgets في Flutter؟

a) StatelessWidget
b) StatefulWidget
c) Widget
d) StatefulWidgetBase

الجواب الصحيح: b) StatefulWidget

السؤال الثامن:
ما الوظيفة الرئيسية لدالة setState() في StatefulWidgets؟

a) إنشاء عناصر جديدة في الواجهة
b) حذف العناصر من الواجهة
c) تحديث الحالة وإعادة بناء الواجهة
d) تغيير نمط الألوان في الواجهة

الجواب الصحيح: c) تحديث الحالة وإعادة بناء الواجهة

السؤال التاسع :
ما هو الفرق بين StatelessWidget وStatefulWidget في Flutter؟

a) StatelessWidget لا يحتوي على حالة قابلة للتغيير، أما StatefulWidget يحتوي عليها.
b) StatelessWidget يتضمن حالة قابلة للتغيير، أما StatefulWidget لا يتضمنها.
c) لا فرق بينهما.
d) StatelessWidget يستخدم لإنشاء القوالب فقط، أما StatefulWidget يستخدم لإنشاء واجهات المستخدم.

الجواب الصحيح: a) StatelessWidget لا يحتوي على حالة قابلة للتغيير، أما StatefulWidget يحتوي عليها.