عنصر الحاوية في فلاتر Flutter Container Widget

استخدام عنصر Container في Flutter: تخصيص المظهر والتخطيط لعناصر واجهة المستخدم

مقدمة لدرس “استخدام عنصر Container في Flutter: تخصيص المظهر والتخطيط”:

في عالم تطوير تطبيقات الهواتف الذكية، يُعتبر تخصيص مظهر وتنظيم عناصر واجهة المستخدم (UI) أمرًا حيويًا لجعل التطبيق جذابًا وسهل الاستخدام. في إطار تطوير التطبيقات باستخدام Flutter، يأتي عنصر الـ Container كأحد العناصر الأساسية التي تسمح للمطورين بتخصيص مظهر وتخطيط عناصر واجهة المستخدم بشكل شامل.

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

في هذا الدرس، سنستكشف استخدام عنصر الـ Container في Flutter بشكل متقدم، حيث سنتعلم كيفية تخصيص المظهر والتخطيط لعناصر واجهة المستخدم باستخدام هذا العنصر، وسنستكشف الخيارات المتاحة وكيفية استخدامها بشكل فعّال في تطوير التطبيقات.

ما المقصود بعنصر الحاوية في فلاتر ؟

flutter Container widget

واجهة Flutter هي إطار عمل لتطوير تطبيقات الجوال والويب باستخدام لغة البرمجة Dart. واحد من أكثر العناصر استخدامًا في Flutter هو “Container widget”، وهو عبارة عن عنصر واجهة مستطيلي يستخدم لتغليف وتخصيص عناصر الواجهة الأخرى في التطبيق.

تعتبر الحاوية (Container) عنصرًا مرنًا يسمح بتخصيص العديد من الخصائص، مثل اللون والحجم والهوامش والحواف، وغيرها الكثير. يمكن استخدام الحاوية لتحديد التخطيط وتنظيم العناصر داخل التطبيق بشكل دقيق.

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

باختصار، فإن “Container widget” في Flutter يعتبر عنصرًا قويًا يتيح للمطورين تخصيص وترتيب العناصر في تطبيقاتهم بطريقة مرنة ودقيقة.

خطوة بخطوة  كيف نستخدم عنصر الحاوية في فلاتر ؟

سنقوم بتوضيح كيفية استخدام وتخصيص عنصر الـ Container في تطبيق Flutter خطوة بخطوة:

إضافة استيراد للمكتبة:
أولاً، تأكد من استيراد مكتبة Flutter في ملف الـ Dart الخاص بتطبيقك. يمكنك القيام بذلك عن طريق إضافة الاستيراد التالي في بداية ملف الـ Dart:

import 'package:flutter/material.dart';

إنشاء عنصر Container:
ثم، يمكنك إنشاء عنصر Container باستخدام الكود التالي في واجهة التطبيق الخاصة بك، على سبيل المثال في داخل build الخاص بـ StatefulWidget:

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('عنصر الـ Container'),
),
body: Center(
child: Container(
// تخصيص خصائص الحاوية
),
),
);
}

تخصيص خصائص الـ Container:
يمكنك الآن تخصيص خصائص الـ Container وفقاً لاحتياجات تطبيقك، مثل اللون، والحجم، والهوامش، والحواف، والتباعد، وغيرها. هناك العديد من الخصائص التي يمكنك استخدامها، وهي توفر مرونة كبيرة في تخصيص تطبيقك.

Container(
width: 200, // العرض
height: 200, // الارتفاع
color: Colors.blue, // اللون
margin: EdgeInsets.all(20), // الهوامش الداخلية
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 30), // التباعد الداخلي
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), // زاوية مدورة
border: Border.all(color: Colors.black, width: 2), // إطار
),
child: Center(
child: Text(
'مثال على الـ Container',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),

في هذا المثال، قمنا بتعيين عرض وارتفاع معينين، ولون خلفية محدد، وهوامش وتباعد داخلي، وزاوية مدورة، وإطار للحاوية. كما وضعنا عنصر نصي داخل الحاوية باستخدام خاصية child.

هذه هي الخطوات الرئيسية لاستخدام وتخصيص عنصر الـ Container في تطبيق Flutter. يمكنك استكشاف المزيد من الخصائص وتجربتها لتحقيق التخصيص المطلوب في تطبيقك.

تطبيق 1:  على استخدام عنصر الحاوية في فلاتر

،سنقوم بإنشاء  تطبيقًا بسيطًا يستخدم عنصر الـ Container في Flutter.

سيكون التطبيق عبارة عن صفحة تحتوي على عناصر Container مختلفة تمثل مثالًا على كيفية استخدامها وتخصيصها.

سنقوم بإنشاء ملف جديد بالاسم “container_example.dart” وقم بإضافة الكود التالي:

import 'package:flutter/material.dart';

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

class ContainerExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق Container',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ContainerExampleScreen(),
);
}
}

class ContainerExampleScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Container'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 100,
color: Colors.blue,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
SizedBox(height: 20),
Container(
width: 150,
height: 150,
color: Colors.red,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
SizedBox(height: 20),
Container(
width: 100,
height: 200,
color: Colors.green,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 3',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
],
),
),
);
}
}

في هذا التطبيق، قمنا بإنشاء تطبيق Flutter بسيط يحتوي على شاشة واحدة (ContainerExampleScreen) تحتوي على عدة عناصر Container. يتم تخصيص كل Container بحيث يحتوي على عرض وارتفاع ولون مختلف، ونص داخلي مركزي.

بعد ذلك، قم بتشغيل التطبيق باستخدام محاكي Flutter أو جهاز Android/iOS. سترى شاشة التطبيق مع العناصر المختلفة من Container التي قمنا بإنشائها، والتي تظهر بألوان مختلفة وأحجام مختلفة.

هذا هو مثال بسيط على كيفية استخدام عنصر الـ Container في تطبيق Flutter وتخصيصه بطريقة متنوعة. يمكنك تغيير الخصائص وإضافة مزيد من الـ Container حسب احتياجات تطبيقك.

 شرح الكود  

import 'package:flutter/material.dart';

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

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

في هذا السطر، نقوم بتعريف الدالة main التي هي نقطة البداية لتنفيذ التطبيق. تقوم هذه الدالة بتشغيل تطبيقنا باستخدام runApp والذي يأخذ مثيل من ContainerExampleApp كمدخل للتطبيق.

class ContainerExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق Container',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ContainerExampleScreen(),
);
}
}

هنا نقوم بتعريف ContainerExampleApp كفئة ترث من StatelessWidget.

يُعتبر هذا التطبيق الرئيسي الذي يحتوي على الإعدادات العامة للتطبيق مثل العنوان والمظهر.

يتم تحديد الصفحة الرئيسية باستخدام home والتي تشير إلى ContainerExampleScreen.

class ContainerExampleScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Container'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 100,
color: Colors.blue,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
SizedBox(height: 20),
Container(
width: 150,
height: 150,
color: Colors.red,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
SizedBox(height: 20),
Container(
width: 100,
height: 200,
color: Colors.green,
margin: EdgeInsets.all(10),
child: Center(
child: Text(
'Container 3',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
],
),
),
);
}
}

في هذا المقطع، قمنا بتعريف صفحة التطبيق ContainerExampleScreen كـ StatelessWidget، حيث يتم بناء جسم الصفحة باستخدام Scaffold الذي يوفر هيكلًا للصفحة. الصفحة تحتوي على AppBar وجسم body الذي يحتوي على Column يقوم بترتيب العناصر بشكل عمودي. تم وضع عدة عناصر Container داخل Column، وكل منها يمثل مربعًا بحجم ولون مختلف، مع نص مركزي داخل كل منها.

باستخدام هذا الكود، ستحصل على تطبيق Flutter بسيط يظهر عدة عناصر Container بتخصيصات مختلفة.

 شجرة الويدجت

 شجرة الويدجت لتطبيق الـ Container الذي قمنا بكتابة كوده:

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - Column
        - Container
          - Center
            - Text
        - SizedBox
        - Container
          - Center
            - Text
        - SizedBox
        - Container
          - Center
            - Text

هذه الشجرة تمثل ترتيب العناصر والويدجت في التطبيق.

يتم تحديد تطبيق MaterialApp كجذر، ثم يأتي Scaffold كمربع للعرض. داخل Scaffold، يحتوي AppBar على عنصر Text كعنوان للتطبيق.

المحتوى الرئيسي للتطبيق يتم ترتيبه في Center حيث يتم وضع Column لتنظيم العناصر بشكل عمودي. بداخل Column، تم وضع عدة عناصر Container، كل منها يحتوي على عنصر Center لتوسيط النص داخل الحاوية.

 التدرج الهرمي لشجرة الويدجتات

التدرج الهرمي في شجرة الويدجتات يشير إلى ترتيب الويدجتات بطريقة تظهر التباعد بين الويدجتات وتضمن الترتيب الصحيح للعناصر داخل الشاشة. في تطبيق الـ Container الذي قمنا ببنائه،

يكون التدرج الهرمي كالتالي:

MaterialApp:

هو الويدجت الجذري للتطبيق، ويحتوي على العديد من الخصائص التي تحدد المظهر العام للتطبيق.

Scaffold:

يقوم بتنظيم تخطيط الصفحة ويوفر العديد من الوظائف الهامة مثل AppBar و FloatingActionButton.
يكون هذا الويدجت طفلًا مباشرًا لـ MaterialApp.

AppBar:

يعرض شريط العنوان في أعلى الشاشة ويمكن أن يحتوي على عنوان للتطبيق أو صفحة الحالية.

Center:

يوسط العناصر داخله في الاتجاهين الرأسي والأفقي.

Column:

يرتب العناصر بشكل عمودي في الصفحة، حيث يكون كل عنصر في العمود الواحد فوق العنصر الذي يليه.

Container:

يمثل مربعًا يمكن تخصيصه بشكل محدد، مثل لون الخلفية والهوامش والحواف والأبعاد.

Center:

يوسط النص داخل الحاوية بشكل عمودي وأفقي.

Text:

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

تطبيق 2 : خطوة بخطوة سننشء تطبيقا اخرا  عن flutter Container widget

سنقوم بإنشاء تطبيق بسيط يستخدم عنصر الـ Container في Flutter.

سيتضمن التطبيق صفحة واحدة تحتوي على عناصر Container مختلفة.

سنقوم بإنشاء تطبيق يظهر مربعات ملونة بأحجام وألوان مختلفة باستخدام عناصر Container.

الخطوات:

إنشاء مشروع Flutter جديد:
قم بإنشاء مشروع Flutter جديد في محرر النصوص الذي تفضله أو باستخدام أدوات التطوير المناسبة لك، مثل Android Studio أو Visual Studio Code.

تعديل ملف lib/main.dart:
قم بفتح ملف lib/main.dart وقم بمسح الكود الحالي واستبداله بالكود التالي:

import 'package:flutter/material.dart';

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

class ContainerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق الـ Container',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ContainerScreen(),
);
}
}

class ContainerScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق الـ Container'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 150,
height: 150,
color: Colors.green,
),
Container(
width: 200,
height: 200,
color: Colors.blue,
),
],
),
),
);
}
}

تشغيل التطبيق:
قم بتشغيل التطبيق على محاكي الجهاز أو على جهازك الفعلي.
بهذه الخطوات، يجب أن ترى تطبيقًا بسيطًا يحتوي على ثلاثة مربعات ملونة مختلفة الأحجام. هذه الأحجام والألوان هي مثال على كيفية استخدام وتخصيص عنصر الـ Container في تطبيق Flutter. يمكنك تغيير الأبعاد والألوان والتخطيطات والتنسيقات بحرية وفقًا لاحتياجات تطبيقك.

شجرة الويدجات

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

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - Column
        - Container
        - Container
        - Container

هذه الشجرة تعكس الترتيب الهرمي للويدجتات في التطبيق. يتم تحديد MaterialApp كجذر، ويتم وضع Scaffold كطفل مباشر له. داخل Scaffold، يكون لدينا AppBar الذي يتضمن عنصر Text كعنوان للتطبيق. المحتوى الرئيسي للتطبيق يكون مركزيًا باستخدام Center، ويحتوي على Column لتنظيم العناصر بشكل عمودي. داخل Column، يتم وضع ثلاثة عناصر Container كفقرات للعرض.

تطبيق 3  متقدم عن استخدام flutter Container widget

لنقم بإنشاء تطبيق أكثر تعقيدًا يستخدم عنصر الـ Container في Flutter بطريقة متقدمة.

سنقوم ببناء تطبيق يعرض قائمة من العناصر، حيث يمكن للمستخدم تحديد العناصر وتخصيصها باستخدام Container.

المتطلبات:

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

إنشاء مشروع Flutter جديد:
قم بإنشاء مشروع Flutter جديد في محرر النصوص الخاص بك.

تحرير ملف lib/main.dart:
استبدل الكود في ملف lib/main.dart بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'تطبيق القائمة',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['عنصر 1', 'عنصر 2', 'عنصر 3'];
  String selectedItem = ''; // تم تعيين قيمة افتراضية

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('قائمة العناصر'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                selectedItem = items[index];
              });
            },
            child: Container(
              margin: EdgeInsets.all(8),
              padding: EdgeInsets.all(16),
              color: selectedItem == items[index] ? Colors.blue : null,
              child: Text(
                items[index],
                style: TextStyle(
                  fontSize: 20,
                  color: selectedItem == items[index] ? Colors.white : Colors.black,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

شرح الكود:

يتم استيراد Material و dart:io لاستخدام مكتبات Flutter.
تعريف MyApp كـ StatelessWidget وتحديد MyHomePage كصفحة رئيسية.
MyHomePage هو StatefulWidget ويحتوي على قائمة items من العناصر ومتغير selectedItem لتخزين العنصر المحدد.
تقوم ListView.builder ببناء قائمة العناصر، وتقوم GestureDetector بإضافة إمكانية النقر لكل عنصر.
عند النقر على عنصر، يتم تحديث selectedItem وتعيينه إلى العنصر المحدد، ويتم تحديث الشاشة لإعادة بناء وتحديث تصميم العناصر.
تشغيل التطبيق:
قم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي.

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

تطبيق 4 flutter Container widget

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

المتطلبات:

تطبيق قائمة عناصر يعرض قائمة متعددة العناصر.
القدرة على تخصيص العناصر باستخدام Container.
إضافة وحذف العناصر بشكل ديناميكي.
الخطوات:

إنشاء مشروع Flutter جديد:
قم بإنشاء مشروع Flutter جديد في محرر النصوص الخاص بك.

تحرير ملف lib/main.dart:
استبدل الكود في ملف lib/main.dart بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق القائمة المتقدم',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
List<String> items = ['عنصر 1', 'عنصر 2', 'عنصر 3'];
String newItem = '';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('القائمة المتقدمة'),
),
body: Column(
children: [
TextField(
onChanged: (value) {
setState(() {
newItem = value;
});
},
decoration: InputDecoration(
labelText: 'إضافة عنصر جديد',
hintText: 'أدخل اسم العنصر',
suffixIcon: IconButton(
onPressed: () {
setState(() {
if (newItem.isNotEmpty) {
items.add(newItem);
newItem = '';
}
});
},
icon: Icon(Icons.add),
),
),
),
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key(items[index]),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
});
},
child: Container(
margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
items[index],
style: TextStyle(color: Colors.white, fontSize: 18),
),
IconButton(
onPressed: () {
setState(() {
items[index] = items[index] + ' تم تحديثه';
});
},
icon: Icon(Icons.update, color: Colors.white),
),
],
),
),
);
},
),
),
],
),
);
}
}

شرح الكود:

تم تعريف MyApp و MyHomePage بنفس الطريقة التي سبق.
في MyHomePage، تم استخدام TextField لإضافة عنصر جديد إلى القائمة، مع إمكانية إضافته عند النقر على أيقونة الزائد.
تم استخدام ListView.builder لعرض العناصر في القائمة مع إمكانية التمرير.
تم استخدام Dismissible لإضافة إمكانية حذف العناصر من القائمة بالسحب.
تم تخصيص عناصر القائمة باستخدام Container وتم تحديث العناصر بلون مختلف وإضافة أيقونة تحديث.
تشغيل التطبيق:
قم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي.

بهذه الخطوات، يجب أن ترى تطبيقًا متقدمًا يعرض

مشروعا متكاملا عن استخدام flutter Container widget

بالطبع، سنقوم بإنشاء مشروع متكامل يستخدم عنصر الـ Container في Flutter بطريقة متقدمة. سيكون المشروع عبارة عن تطبيق لتتبع المهام (To-Do List)، حيث يمكن للمستخدم إضافة مهام جديدة وحذفها وتحديث حالتها.

المتطلبات:

تطبيق لتتبع المهام يعرض قائمة المهام مع إمكانية إضافة وحذف المهام.
تمثيل المهام باستخدام عناصر Container لتمثيل المظهر.
الخطوات:

إنشاء مشروع Flutter جديد:
قم بإنشاء مشروع Flutter جديد في محرر النصوص الخاص بك.

تحرير ملف lib/main.dart:
استبدل الكود في ملف lib/main.dart بالكود التالي:

import 'package:flutter/material.dart';

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

class Task {
  String title;
  bool completed;

  Task(this.title, {this.completed = false});
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'تتبع المهام',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToDoList(),
    );
  }
}

class ToDoList extends StatefulWidget {
  @override
  _ToDoListState createState() => _ToDoListState();
}

class _ToDoListState extends State<ToDoList> {
  List<Task> tasks = [
    Task('المهمة 1'),
    Task('المهمة 2', completed: true),
  ];
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('قائمة المهام'),
      ),
      body: Column(
        children: [
          TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: 'أضف مهمة جديدة',
              suffixIcon: IconButton(
                icon: Icon(Icons.add),
                onPressed: () {
                  setState(() {
                    if (controller.text.isNotEmpty) {
                      tasks.add(Task(controller.text));
                      controller.clear();
                    }
                  });
                },
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: tasks.length,
              itemBuilder: (context, index) {
                return Dismissible(
                  key: Key(tasks[index].title),
                  onDismissed: (direction) {
                    setState(() {
                      tasks.removeAt(index);
                    });
                  },
                  child: Container(
                    margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                    padding: EdgeInsets.all(16),
                    color: tasks[index].completed ? Colors.green : Colors.red,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          tasks[index].title,
                          style: TextStyle(
                            color: Colors.white,
                            decoration: tasks[index].completed ? TextDecoration.lineThrough : null,
                          ),
                        ),
                        Checkbox(
                          value: tasks[index].completed,
                          onChanged: (value) {
                            setState(() {
                              tasks[index].completed = value ?? false; // Assign value or use false if value is null
                            });
                          },
                          activeColor: Colors.white,
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

شرح الكود:

تم تعريف Task كفئة لتمثيل كل مهمة، وتتضمن عنوان المهمة وحالتها (مكتملة أو غير مكتملة).
تم تعريف ToDoList كـ StatefulWidget ويحتوي على قائمة المهام وحقل الإدخال لإضافة مهمة جديدة.
استخدمنا ListView.builder لعرض القائمة وتم تخصيص مظهر كل مهمة باستخدام Container.
استخدمنا Dismissible لإضافة إمكانية حذف المهام بالسحب.
تم استخدام Checkbox لتمثيل حالة المهمة.

تشغيل التطبيق:
نقم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي.

بهذه الخطوات، يجب أن ترى تطبيقًا متكاملاً لتتبع المهام يستخدم عنصر الـ Container لتمثيل المهام بشكل مخصص وتمكين إضافة وحذف المهام بشكل ديناميكي.

شجرة الويدجات

هذه شجرة الويدجات لتطبيق تتبع المهام (To-Do List) الذي قمنا بإنشائه:

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Column
      - TextField
      - Expanded
        - ListView.builder
          - Dismissible
            - Container
              - Row
                - Text
                - Checkbox
          - Dismissible
            - Container
              - Row
                - Text
                - Checkbox
          - ...

هذه الشجرة توضح الترتيب الهرمي للويدجات في تطبيقنا. تبدأ مع MaterialApp كجذر، ومن ثم يأتي Scaffold كواجهة الشاشة. داخل Scaffold، يكون لدينا AppBar كشريط عنوان للتطبيق وColumn لتنظيم عناصر الواجهة. داخل Column، يوجد TextField لإدخال المهام الجديدة، ومن ثم تأتي Expanded والذي يحتوي على ListView.builder لعرض قائمة المهام. داخل ListView.builder، يتم تكرار Dismissible لكل مهمة، وكل منها يحتوي على Container لتمثيل المظهر المخصص لكل مهمة، وفي داخله يوجد Row يحتوي على Text لعرض عنوان المهمة و Checkbox لتمثيل حالتها (مكتملة أو غير مكتملة).

أختبار على  flutter Container widget

بالطبع، إليك بعض الأسئلة التي يمكن استخدامها في كويز حول عنصر الـ Container في Flutter:

1-ما هو دور عنصر الـ Container في Flutter؟

أ) لتحديد المظهر والتخطيط لعنصر واحد.
ب) لعرض الصور والنصوص فقط.
ج) لإنشاء الزرود والقوائم.

2- ما الخاصية التي يمكن استخدامها لتغيير لون خلفية الـ Container؟

أ) background
ب) color
ج) backgroundColor

3-ما الوسيلة التي يمكن استخدامها لتحديد الحواف في عنصر الـ Container؟

أ) edgeInsets
ب) padding
ج) margin

4-ما هي الطريقة الصحيحة لوضع عنصر داخل Container في Flutter؟

أ) يمكن وضع العنصر مباشرة داخل Container.
ب) يجب وضع العنصر داخل خاصية child لـ Container.
ج) يجب وضع العنصر داخل خاصية content لـ Container.

5-ما هو الفارق بين خاصيتي padding و margin في عنصر الـ Container؟

أ) padding يضيف مساحة بين حواف Container وعناصرها الداخلية، بينما margin يضيف مساحة بين حواف Container وعناصر الواجهة الخارجية.
ب) margin يضيف مساحة بين حواف Container وعناصرها الداخلية، بينما padding يضيف مساحة بين حواف Container وعناصر الواجهة الخارجية.
ج) padding يتحكم في البادئة والمعاني، بينما margin يتحكم في التنسيق والترتيب.

6-كيف يمكن استخدام عنصر الـ Container لإنشاء زر؟

أ) عن طريق وضع Text داخل Container.
ب) عن طريق وضع FlatButton داخل Container.
ج) عن طريق تحديد خاصية onPressed لـ Container.

7-ما هي الطريقة المناسبة لتخصيص شكل Container بشكل دائري؟

أ) استخدام خاصية shape وتعيينها إلى BoxShape.circle.
ب) استخدام خاصية borderRadius وتعيينها إلى CircularBorder.
ج) استخدام خاصية circle وتعيينها إلى true.

8-كيف يمكن استخدام عنصر الـ Container لتحديد التخطيط في Flutter؟

أ) عن طريق تعيين layout إلى Container.
ب) عن طريق تعيين layout إلى Row أو Column.
ج) عن طريق تعيين layout إلى Flex.

9-ما هي الخاصية التي يمكن استخدامها لتحديد عرض وارتفاع عنصر الـ Container؟

أ) size
ب) dimension
ج) width و height

10-كيف يمكن استخدام عنصر الـ Container لتخصيص الحواف؟

أ) عن طريق تعيين border لخاصية decoration.
ب) عن طريق تعيين border لخاصية style.
ج) عن طريق تعيين border لخاصية shape.

الاجابات

هذه هي الإجابات الصحيحة للأسئلة:

أ) لتحديد المظهر والتخطيط لعنصر واحد.
ب) color
ب) padding
ب) يجب وضع العنصر داخل خاصية child لـ Container.
أ) padding يضيف مساحة بين حواف Container وعناصرها الداخلية، بينما margin يضيف مساحة بين حواف Container وعناصر الواجهة الخارجية.
أ) عن طريق وضع Text داخل Container.
أ) استخدام خاصية shape وتعيينها إلى BoxShape.circle.
ب) عن طريق تعيين layout إلى Row أو Column.
ج) width و height
أ) عن طريق تعيين border لخاصية decoration.
تأكد من فحص الأسئلة والإجابات والتأكد من فهم مفاهيم عنصر الـ Container في Flutter بشكل صحيح.