عنصر Switch في تطبيقات فلاتر

استخدام عنصر Switch في Flutter 

مقدمة:
هذا الدرس يهدف إلى تعليمك كيفية إنشاء تطبيق بسيط باستخدام Flutter يسمح للمستخدمين بإدارة قائمة المهام باستخدام عنصر “Switch”. ستتعلم في هذا الدرس كيفية بناء واجهة المستخدم لعرض قائمة المهام، وكيفية استخدام عنصر “Switch” لتمكين المستخدمين من تبديل حالة كل مهمة بين “تم الانتهاء” و “لم يتم الانتهاء”. ستحصل على فهم أساسي حول كيفية استخدام الحالة وتحديثها في Flutter باستخدام الدالة “setState()”، بالإضافة إلى فهم أساسي لبنية التطبيقات في Flutter باستخدام الفئات والمكونات المختلفة.

 شرح عنصر  Switch in flutter

في Flutter، تُستخدم عبارة الـ “switch” لتوفير طريقة لتحديد قيمة معينة وتحويل تدفق التحكم في التطبيق استنادًا إلى قيمة هذا التبديل. يُمكن استخدام عبارة “switch” لإنشاء واجهات مستخدم متعددة الحالات، حيث يقوم المستخدم بتحديد حالة معينة ويتم استجابة التطبيق وفقًا لتلك الحالة.

لإنشاء عبارة “switch” في Flutter، يُمكنك استخدام عبارة “Switch” مع تحديد القيمة الافتراضية ودالة تنفيذية للتحكم فيما يحدث عند تغيير القيمة. على سبيل المثال، قد يكون لديك متغير يُحدد ما إذا كانت خاصية ما مفعلة أو معطلة، مثل “الوضع الليلي” في تطبيق مواقع التواصل الاجتماعي، ويمكن استخدام عبارة “switch” للتحكم في هذه الخاصية.

فيما يلي مثال بسيط على كيفية استخدام عبارة “switch” في Flutter:

bool isSwitched = false;
Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
});
},
)

في هذا المثال، يتم استخدام متغير “isSwitched” لتتبع حالة التبديل. عندما يتغير القيمة، يتم تحديث “isSwitched” واستدعاء دالة ()setState لإعادة بناء واجهة المستخدم لعرض التغييرات الجديدة.

تطبيق 1:خطوة بخطوة كيف ننشيء تطبيقا وكيف نستخدم Switch in flutter

هيا نقوم بإنشاء تطبيق بسيط في Flutter يستخدم عبارة “Switch” لتبديل الوضع بين اللون الفاتح واللون الداكن. سنتبع الخطوات التالية:

الخطوة 1: إنشاء مشروع Flutter جديد
يُمكنك استخدام أمر Flutter CLI لإنشاء مشروع جديد. يمكنك تسميته كما تريد، وفي هذا المثال سنسميه “switch_example”.

flutter create switch_example

الخطوة 2: فتح ملف الـ “main.dart”
قم بالانتقال إلى المجلد الذي يحتوي على مشروع Flutter الجديد وافتح ملف الـ “main.dart” في محرر النصوص المفضل لديك.

الخطوة 3: استيراد مكتبات Flutter الضرورية
ضمن ملف الـ “main.dart”، قم بإضافة استيراد لمكتبة Flutter التي سنحتاجها لاستخدام عبارة “Switch”.

import 'package:flutter/material.dart';

الخطوة 4: إنشاء الفئة الرئيسية للتطبيق
داخل الفئة الرئيسية “MyApp”، قم بإنشاء متغير يتتبع حالة التبديل واستخدام عبارة “Switch” لتمكين المستخدم من تبديل الوضع بين اللون الفاتح واللون الداكن.

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
bool isDarkModeEnabled = false;

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: Text('Switch Example'),
),
body: Center(
child: Switch(
value: isDarkModeEnabled,
onChanged: (value) {
setState(() {
isDarkModeEnabled = value;
});
},
),
),
),
);
}
}

الكود النهائي:

import 'package:flutter/material.dart';


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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
bool isDarkModeEnabled = false;

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: Text('Switch Example'),
),
body: Center(
child: Switch(
value: isDarkModeEnabled,
onChanged: (value) {
setState(() {
isDarkModeEnabled = value;
});
},
),
),
),
);
}
}

الخطوة 5: تشغيل التطبيق
قم بتشغيل التطبيق على المحاكي أو الجهاز الذي تريد تجربته.

بهذه الطريقة، يمكن للمستخدمين تبديل الوضع بين اللون الفاتح واللون الداكن باستخدام عبارة “Switch” في التطبيق الخاص بك.

شرح الكود في اسطر منفصلة معنونة

هاكم شرحًا لكل جزء من الكود مع عناوين منفصلة:

إعدادات البداية واستيراد المكتبات الضرورية:

import 'package:flutter/material.dart';

في هذا الجزء، نقوم بالاستيراد الضروري لمكتبة Flutter والتي تحتوي على مكونات الواجهة والأدوات التي نحتاجها.

تعريف فئة التطبيق الرئيسية:

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

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

في هذا الجزء، نقوم بتعريف فئة رئيسية للتطبيق “MyApp” كما نرث منها فئة “StatefulWidget” للتمكن من إدارة حالة التطبيق.

تعريف الحالة وبناء واجهة المستخدم:

class _MyAppState extends State<MyApp> {
bool isDarkModeEnabled = false;

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: isDarkModeEnabled ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
title: Text('Switch Example'),
),
body: Center(
child: Switch(
value: isDarkModeEnabled,
onChanged: (value) {
setState(() {
isDarkModeEnabled = value;
});
},
),
),
),
);
}
}

في هذا الجزء، نقوم بتعريف متغير “isDarkModeEnabled” الذي يتبع حالة التبديل بين الوضع الليلي والوضع النهاري. ثم نقوم ببناء واجهة المستخدم التي تحتوي على مكون “Switch” الذي يمكن المستخدم من تغيير حالة التبديل بين الوضعين. وعندما يتغير حالة التبديل، نقوم بتحديث الحالة وإعادة بناء واجهة المستخدم باستخدام “setState()”.

تشغيل التطبيق:دالة تشغيل التطبيق

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

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

بهذه الطريقة، يعمل التطبيق ويتيح للمستخدمين التبديل بين الوضع الليلي والوضع النهاري باستخدام عنصر “Switch”.

شجرة العناصر لهذا التطبيق:

هاكم  شجرة العناصر لتطبيق الذي تم شرحه:

- MaterialApp
  - Scaffold
    - AppBar
      - Text('Switch Example')
    - Center
      - Switch

في هذه الشجرة، يتم استخدام “MaterialApp” كعنصر رئيسي لتطبيق Flutter، ويتم استخدام “Scaffold” كعنصر فرعي لإنشاء هيكل الصفحة. يتم وضع “AppBar” في Scaffold والذي يحتوي على عنوان الصفحة. ثم يتم وضع “Switch” في وسط الصفحة باستخدام “Center” ليمكن المستخدم من تبديل حالة الوضع بين اللون الفاتح واللون الداكن.

 خصائص ووظائف واستخدامات Switch in flutter

عنصر “Switch” في Flutter يُستخدم لتمكين المستخدمين من تبديل قيمة بين حالتين، مثل تفعيل أو تعطيل خيار معين. هنا خصائصه ووظائفه واستخداماته:

الخصائص:
value: هذه الخاصية تحدد القيمة الحالية للتبديل. إذا كانت قيمتها true، فسيظهر التبديل في الحالة المفعلة، وإذا كانت false، فسيظهر في الحالة غير المفعلة.
onChanged: هذه الخاصية تحدد الدالة التي ستُستدعى عندما يقوم المستخدم بتغيير حالة التبديل. يمكن استخدام هذه الدالة لتحديث الحالة أو لتنفيذ أي سلوك مخصص يتم تعيينه بناءً على التبديل.
الوظائف:
تمكين وتعطيل الخيارات: يمكن استخدام “Switch” لتمكين وتعطيل خيارات معينة، مثل تشغيل أو إيقاف تشغيل وضع الليل في التطبيقات.
تغيير الإعدادات: يمكن استخدام “Switch” لتمكين المستخدمين من تغيير الإعدادات في التطبيق، مثل تفعيل أو تعطيل إشعارات التطبيق.
إعدادات السمات: يمكن استخدام “Switch” لتبديل السمات البصرية للتطبيق، مثل تغيير بين الوضع الليلي والوضع النهاري.
الاستخدامات:
تبديل الوضع الليلي/النهاري: يمكن استخدام “Switch” لتمكين المستخدمين من تبديل الوضع بين اللون الفاتح واللون الداكن في التطبيقات.
تشغيل/إيقاف تشغيل الميزات: يمكن استخدام “Switch” لتمكين المستخدمين من تشغيل أو إيقاف تشغيل ميزات معينة في التطبيق، مثل ميزة توفير البطارية.
تبديل الإعدادات: يمكن استخدام “Switch” للسماح للمستخدمين بتغيير إعدادات مختلفة في التطبيق، مثل تغيير إعدادات الصوت أو الإشعارات.
تمكين/تعطيل خيارات الفلترة: يمكن استخدام “Switch” في تطبيقات البحث أو التصفية لتمكين المستخدمين من تشغيل أو إيقاف تشغيل خيارات الفلترة المختلفة.

تطبيق 3: يستخدم عنصر “Switch” في Flutter

طبقاً لطلبك، سأقدم تطبيقًا متقدمًا قليلاً يستخدم عنصر “Switch” في Flutter، حيث سيكون التطبيق عبارة عن قائمة للمهام قابلة للتبديل بين حالتي تم الانتهاء منها ولم يتم الانتهاء منها. سنتبع الخطوات التالية:

الخطوة 1: إنشاء مشروع Flutter جديد
استخدم أمر Flutter CLI لإنشاء مشروع جديد. اسميناه “todo_app”.

flutter create todo_app

الخطوة 2: فتح ملف الـ “main.dart”
انتقل إلى المجلد الذي يحتوي على مشروع Flutter الجديد وافتح ملف الـ “main.dart” في محرر النصوص المفضل لديك.

الخطوة 3: كتابة الكود
ضمن ملف “main.dart”، قم بكتابة الكود التالي:

import 'package:flutter/material.dart';

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

class Todo {
String title;
bool isCompleted;

Todo({
required this.title,
this.isCompleted = false,
});
}

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

class TodoListScreen extends StatefulWidget {
@override
_TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
List<Todo> todos = [
Todo(title: 'Task 1'),
Todo(title: 'Task 2'),
Todo(title: 'Task 3'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Todo List'),
),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
trailing: Switch(
value: todos[index].isCompleted,
onChanged: (value) {
setState(() {
todos[index].isCompleted = value;
});
},
),
);
},
),
);
}
}

الخطوة 4: تشغيل التطبيق
قم بتشغيل التطبيق على المحاكي أو الجهاز الذي تريد تجربته.

بهذه الطريقة، يتيح التطبيق للمستخدمين عرض قائمة بالمهام وتبديل حالة الإنجاز لكل مهمة باستخدام عنصر “Switch”.

 شجرة العناصر لهذا التطبيق:

شجرة العناصر لتطبيق “Todo App” هي كالتالي:

- MaterialApp
  - TodoListScreen
    - Scaffold
      - AppBar
        - Text('Todo List')
      - ListView.builder
        - ListTile (Task 1)
          - Text('Task 1')
          - Switch
        - ListTile (Task 2)
          - Text('Task 2')
          - Switch
        - ListTile (Task 3)
          - Text('Task 3')
          - Switch

تتضمن الشجرة الرئيسية “MaterialApp” التي تحتوي على الشاشة الرئيسية “TodoListScreen”، والتي بدورها تحتوي على “Scaffold” الذي يتضمن “AppBar” وقائمة من عناصر “ListTile”. كل “ListTile” يمثل مهمة ويتضمن عنوان المهمة وعنصر “Switch” لتمكين المستخدم من تبديل حالة الإنجاز.

اختبار عن استخدام عنصر Switch في تطبيقات فلاتر

هاكم كويز صغير يتعلق بالتطبيق السابق. يُرجى الإجابة عن الأسئلة التالية:

1-ما هي وظيفة عنصر “Switch” في تطبيق Flutter الذي تم شرحه؟

أ. تسمح للمستخدمين بتغيير حالة المهام بين “تم الانتهاء” و “لم يتم الانتهاء”.
ب. تظهر قائمة بالمهام التي يمكن للمستخدم تحريكها لأعلى أو لأسفل.
ج. تستخدم لتغيير الألوان في التطبيق.

2-ما الذي يحدث عندما يقوم المستخدم بتبديل حالة “Switch” في تطبيق القائمة للمهام؟

أ. يتم حذف المهمة.
ب. يتم تبديل حالة المهمة بين “تم الانتهاء” و “لم يتم الانتهاء”.
ج. يتم إضافة مهمة جديدة إلى القائمة.

3-ما هي وظيفة “ListTile” في تطبيق القائمة للمهام؟

أ. عرض الصور.
ب. عرض عناصر القائمة بشكل قابل للتفاعل.
ج. عرض الفيديوهات.
يرجى كتابة الإجابات في الترتيب (مثل: 1-أ، 2-ب، 3-ج).

4-ما هي الخطوة الأولى التي يجب القيام بها لإنشاء مشروع Flutter جديد؟

أ. تشغيل البحث عن التطبيق على المتصفح.
ب. استخدام أمر Flutter CLI لإنشاء مشروع جديد.
ج. تحديد الألوان والخطوط للتطبيق.

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

أ. StatelessWidget
ب. StatefulWidget
ج. MaterialApp

6-ما هي وظيفة الدالة “setState()” في Flutter؟

أ. تحديث حالة العناصر الرسومية وإعادة بناء واجهة المستخدم.
ب. إنشاء مشروع Flutter جديد.
ج. تحديث الملفات النصية في التطبيق.
يرجى كتابة الإجابات في الترتيب المطلوب (مثال: 4-ب، 5-ج، 6-أ).

الاجابات

ما هي وظيفة عنصر “Switch” في تطبيق Flutter الذي تم شرحه؟

أ. تسمح للمستخدمين بتغيير حالة المهام بين “تم الانتهاء” و “لم يتم الانتهاء”.
ما الذي يحدث عندما يقوم المستخدم بتبديل حالة “Switch” في تطبيق القائمة للمهام؟

ب. يتم تبديل حالة المهمة بين “تم الانتهاء” و “لم يتم الانتهاء”.
ما هي وظيفة “ListTile” في تطبيق القائمة للمهام؟

ب. عرض عناصر القائمة بشكل قابل للتفاعل.
ما هي الخطوة الأولى التي يجب القيام بها لإنشاء مشروع Flutter جديد؟

ب. استخدام أمر Flutter CLI لإنشاء مشروع جديد.
ما الفئة التي يجب أن تُمتد منها فئة التطبيق الرئيسية في تطبيق Flutter؟

ج. MaterialApp
ما هي وظيفة الدالة “setState()” في Flutter؟

أ. تحديث حالة العناصر الرسومية وإعادة بناء واجهة المستخدم.