مقدمة
مقدمة لدرس “استكشاف خصائص وطرق تخصيص الحاويات في Flutter”:
مرحبًا في درسنا الجديد حول خصائص وطرق تخصيص الحاويات في Flutter! يُعتبر ويدجيت الحاوية (Container) أحد الويدجتات الأساسية في Flutter التي تسمح لنا بتخصيص تصميم واجهة المستخدم بشكل دقيق ومرن. يتيح لنا استخدام خصائص وأساليب متعددة لتغيير الأبعاد، والألوان، والحشوات، والهوامش، وغيرها الكثير، مما يسمح لنا بإنشاء تصميمات متنوعة وجذابة لتطبيقاتنا.
في هذا الدرس، سنقوم بفحص بعض الخصائص الأساسية لويدجيت الحاوية في Flutter، بالإضافة إلى استكشاف طرق متقدمة لتخصيص التصميم باستخدام هذه الخصائص. سنتعلم كيفية تحديد الأبعاد، وتطبيق الألوان والزينة، وإضافة الحشو والهوامش، والتحكم في المحاذاة، وأكثر من ذلك بكثير.
من خلال فهم هذه الخصائص والطرق، ستكتسب المهارات اللازمة لإنشاء تصميمات متقدمة ومبتكرة في تطبيقاتك بواسطة Flutter. دعونا نبدأ في استكشاف عالم تخصيص الحاويات!
Container widget properties in flutter
في Flutter، الويدجيت “Container” هو ويدجيت متعدد الاستخدامات يستخدم للتحكم في التخطيط، الحجم، الحشو، الهامش، الزينة، والمحاذاة لابنه.
وفيما يلي بعض الخصائص الهامة لويدجيت “Container”:
child: الويدجيت الفرعي الذي يحتويه الحاوية.
alignment: يحدد كيفية توضيب الويدجيت الفرعي داخل الحاوية. على سبيل المثال، Alignment.center، Alignment.topCenter، Alignment.bottomRight، إلخ.
padding: مقدار المسافة لتضمين الويدجيت الفرعي داخل الحاوية.
margin: مقدار المسافة لتحييط الحاوية.
color: لون الخلفية للحاوية.
decoration: زينة تُطبق على الخلفية للحاوية. يكون من نوع BoxDecoration ويمكن أن تتضمن خصائص مثل border، borderRadius، boxShadow، gradient، إلخ.
width: عرض الحاوية.
height: ارتفاع الحاوية.
constraints: قيود تُطبق على حجم الحاوية. يمكن تحديد minWidth، maxWidth، minHeight، maxHeight، إلخ.
transform: يُطبق تحويلًا على الحاوية، مما يسمح بالدوران، التحجيم، إلخ.
foregroundDecoration: مماثلة للزينة، ولكن يتم تطبيق هذه الزينة أمام الويدجيت الفرعي.
clipBehavior: يحدد كيفية قص الأطفال للحاوية.
transformAlignment: يحدد محاذاة منشأ التحويل بالنسبة لحجم الحاوية.
في Flutter، يُستخدم ويدجيت “Container” للتحكم في العديد من الخصائص المتعلقة بالتخطيط والمظهر للعناصر الموجودة داخله. إليك شرح للطرق والوسائل والإجراءات المتعلقة بالحاوية في Flutter:
تحديد الأبعاد (Dimensions):
يمكنك تحديد عرض وارتفاع الحاوية باستخدام الخصائص width و height.
تحديد الحشو (Padding):
يمكنك إضافة فراغ داخلي للحاوية باستخدام الخاصية padding، حيث يمكنك تحديد قيمة الحشو بوحدة البكسل أو بوحدة النسبة المئوية من عرض أو ارتفاع الحاوية.
تحديد الهامش (Margin):
يمكنك إضافة فراغ خارجي للحاوية باستخدام الخاصية margin، وهذا الهامش يتيح لك التحكم في المسافة بين الحاويات الأخرى.
المحاذاة (Alignment):
يمكنك تحديد كيفية توضيب العناصر داخل الحاوية باستخدام الخاصية alignment.
اللون والزينة (Color and Decoration):
يمكنك تغيير لون خلفية الحاوية باستخدام الخاصية color.
يمكنك أيضًا تخصيص مظهر الحاوية بشكل أكبر باستخدام الخاصية decoration، حيث يمكنك تطبيق تأثيرات مثل الحواف والظلال والتدرجات وغيرها.
تحديد الحدود (Border):
يمكنك إضافة حدود للحاوية باستخدام الخاصية decoration وتحديد نوع الحدود ولونها وسماكتها.
التحويلات (Transformations):
يمكنك تطبيق تحويلات على الحاوية مثل الدوران والتحجيم والترجمة باستخدام الخاصية transform.
تقييد الحجم (Constraints):
يمكنك تحديد قيود على حجم الحاوية مثل الحد الأدنى والحد الأقصى للعرض والارتفاع باستخدام الخاصية constraints.
تحديد نوع القص (Clipping behavior):
يمكنك تحديد كيفية قص المحتوى الزائد داخل الحاوية باستخدام الخاصية clipBehavior.
استخدام ويدجيت الطفل (Child Widget):
يمكنك إضافة ويدجيت الطفل داخل الحاوية باستخدام الخاصية child، حيث يمكن أن يكون هذا الويدجيت عبارة عن نص أو صورة أو ويدجيت آخر.
تلك الطرق والوسائل والإجراءات تمكنك من تخصيص الحاوية بشكل متقدم واستخدامها بشكل فعال في تصميم وتنسيق واجهة مستخدم التطبيقات في Flutter.
نقم بإنشاء ويدجيت الحاوية باستخدام كلمة مفتاحية Container ونقم بتحديد أي خصائص تحتاجها. على سبيل المثال:
Container( width: 200, height: 200, color: Colors.blue, padding: EdgeInsets.all(20), margin: EdgeInsets.all(10), alignment: Alignment.center, child: Text('Hello, Gogo!'), )
الخطوة 2: تحديد الخصائص:
نقم بتحديد الخصائص التي ترغب في تطبيقها على الحاوية، مثل العرض والارتفاع، اللون، الحشو، الهامش، التحويل، إلخ.
الخطوة 3:إضافة ويدجيت الطفل (Child Widget):
يمكننا إضافة ويدجيت الطفل داخل الحاوية.
في المثال أعلاه، قمنا بإضافة ويدجيت Text كطفل للحاوية.
الخطوة 4 تحديث الخصائص حسب الحاجة:
يمكننا تحديث الخصائص بما يتناسب مع احتياجات تطبيقك.
على سبيل المثال، يمكنك تغيير اللون، أو إضافة تأثيرات زينة، أو تعديل التحويل.
هذه الخطوات تمثل نهجًا أساسيًا لاستخدام خصائص الحاوية في Flutter.
يمكننا استخدام هذه الخصائص بحرية لتخصيص تصميم واجهة مستخدم تطبيقك بالطريقة التي تناسب احتياجاتك ومتطلبات تطبيقك.
دعنا نقوم بإنشاء تطبيق بسيط يستخدم خصائص الحاوية في Flutter لعرض صورة مركزية مع نص مركزي. سيتم تخصيص الحاوية لتحديد الحجم واللون والحشو والهامش. إليك خطوات العمل:
إنشاء مشروع Flutter جديد:
flutter create container_example
تعديل ملف lib/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('Container Example'), ), body: Center( child: ContainerWidget(), ), ), ); } } class ContainerWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 300, height: 300, color: Colors.blue, padding: EdgeInsets.all(20), margin: EdgeInsets.all(20), alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.network( 'https://via.placeholder.com/150', width: 100, height: 100, ), SizedBox(height: 20), Text( 'Welcome to Flutter!', style: TextStyle( color: Colors.white, fontSize: 20, ), ), ], ), ); } }
تشغيل التطبيق:
نقم بتشغيل التطبيق على المحاكي أو الجهاز الفعلي باستخدام الأمر التالي:
flutter run
بعد تشغيل التطبيق، سترى حاوية زرقاء مركزية تحتوي على صورة ونص. تم استخدام خصائص الحاوية لتحديد الحجم واللون والحشو والهامش، بينما تم استخدام الأطفال داخل الحاوية لعرض الصورة والنص.
شرح الكود
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); }
هنا نستورد المكتبات الضرورية ونبدأ التطبيق باستخدام MyApp.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Container Example'), ), body: Center( child: Container( width: 200, height: 200, color: Colors.blue, padding: EdgeInsets.all(20), margin: EdgeInsets.all(10), alignment: Alignment.center, child: Text( 'Hello, Flutter!', style: TextStyle( color: Colors.white, fontSize: 20, ), ), ), ), ), ); } }
في هذا الجزء، قمنا بتعريف الكلاس MyApp كواجهة عامة ونستخدم StatelessWidget لأننا لا نحتاج لحالة متغيرة.
نستخدم MaterialApp كجزء أساسي من تطبيق Flutter، ونعين الـ Scaffold كـ home للتطبيق.
في الـ Scaffold، نعين AppBar كعنوان للصفحة.
في الـ body، نستخدم Center لجعل الحاوية في المنتصف.
نقوم بتعريف Container ونحدد الخصائص كالعرض، الارتفاع، اللون، الحشو، والمحاذاة.
نضيف Text كطفل للحاوية ونحدد النص ونسلسل النص بنمط TextStyle لتخصيص اللون والحجم.
شجرة الويدجت:
الشجرة الهرمية للويدجت في هذا التطبيق
- MyApp (MaterialApp) - Scaffold - AppBar - Text - Center - Container - Text
تفسير الشجرة:
MyApp (MaterialApp): يُمثل تطبيق Flutter ويحتوي على المظهر العام للتطبيق.
Scaffold: يُمثل هيكل التطبيق الأساسي الذي يحتوي على AppBar والـ body.
AppBar: يُمثل شريط العنوان في الجزء العلوي من الشاشة ويحتوي على عنوان التطبيق.
Text: يُمثل نص العنوان الذي تم تعيينه لشريط العنوان.
Center: يُمثل ويدجيت يضع أي ويدجت فرعي في المركز.
Container: يُمثل ويدجيت الحاوية التي نقوم بتخصيصها، والتي تحتوي على النص.
Text: يُمثل النص الذي يتم عرضه داخل الحاوية.
هذه الشجرة توضح ترتيب وتداخل الويدجت في التطبيق وكيفية تركيب كل جزء من أجزاء التطبيق.
سنقوم بإنشاء مثال متقدم خطوة بخطوة لاستخدام خصائص الحاوية في Flutter.
في هذا المثال، سنقوم بإنشاء تطبيق بسيط يحتوي على حاويات متعددة مع تخصيصات مختلفة.
لنبدأ:
إنشاء مشروع جديد:
نقم بإنشاء مشروع جديد في Flutter عبر استخدام أحد محررات النصوص مثل VSCode أو Android Studio أو IntelliJ.
تعديل ملف main.dart:
نقم بتعديل ملف 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('Advanced Container Example')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 200, height: 100, color: Colors.blue, margin: EdgeInsets.symmetric(vertical: 10), padding: EdgeInsets.all(10), alignment: Alignment.center, child: Text( 'Container 1', style: TextStyle(color: Colors.white), ), ), Container( width: 150, height: 150, color: Colors.green, margin: EdgeInsets.symmetric(vertical: 10), padding: EdgeInsets.all(20), alignment: Alignment.center, child: Text( 'Container 2', style: TextStyle(color: Colors.white), ), ), Container( width: 100, height: 200, color: Colors.orange, margin: EdgeInsets.symmetric(vertical: 10), padding: EdgeInsets.all(30), alignment: Alignment.center, child: Text( 'Container 3', style: TextStyle(color: Colors.white), ), ), ], ), ), ), ); } }
شرح الكود:
قمنا بإنشاء مجموعة من الحاويات (Containers) داخل عنصر واجهة المستخدم Column.
كل حاوية لديها خصائص مختلفة مثل العرض، الارتفاع، اللون، الهامش، والحشو.
تم تخصيص النص داخل كل حاوية بلون أبيض.
يتم تطبيق الهامش العمودي بين كل حاوية باستخدام خاصية margin.
تم استخدام alignment لتوسيط النص داخل كل حاوية.
هذا المثال يظهر كيفية استخدام الحاويات في Flutter لتخصيص العرض، الارتفاع، اللون، الهامش، والحشو، مما يتيح لك إنشاء واجهات مستخدم مختلفة وجذابة في تطبيقات Flutter الخاصة بك.
الشجرة الهرمية للويدجت في هذا التطبيق:
- MaterialApp - Navigator - Scaffold - AppBar - Text - Column - Container - Padding - Container - Text - Container - Padding - Container - Text - Container - Padding - Container - Text
تفسير الشجرة:
MaterialApp: يمثل تطبيق Flutter ويحتوي على المظهر العام للتطبيق.
Navigator: يمثل منظور التنقل في التطبيق.
Scaffold: يمثل هيكل التطبيق الأساسي الذي يحتوي على AppBar والـ body.
AppBar: يمثل شريط العنوان في الجزء العلوي من الشاشة ويحتوي على عنوان التطبيق.
Text: يمثل نص العنوان الذي تم تعيينه لشريط العنوان.
Column: يمثل ويدجيت يتيح ترتيب الويدجتات في عمود واحد.
Container: يمثل حاوية تحتوي على ويدجيتات أخرى.
Padding: يمثل حاوية مع حشو داخلي لإضافة فراغ حول العناصر الفرعية.
Container: يمثل حاوية داخلية لويدجيتات أخرى.
Text: يمثل النص المعروض داخل الحاوية.
Container: يمثل حاوية تحتوي على ويدجيتات أخرى.
Padding: يمثل حاوية مع حشو داخلي لإضافة فراغ حول العناصر الفرعية.
Container: يمثل حاوية داخلية لويدجيتات أخرى.
Text: يمثل النص المعروض داخل الحاوية.
Container: يمثل حاوية تحتوي على ويدجيتات أخرى.
Padding: يمثل حاوية مع حشو داخلي لإضافة فراغ حول العناصر الفرعية.
Container: يمثل حاوية داخلية لويدجيتات أخرى.
Text: يمثل النص المعروض داخل الحاوية.
هذه الشجرة توضح ترتيب الويدجتات داخل التطبيق والعلاقات الأبوية بينها.
تشغيل التطبيق:
قمنا بنسخ الكود وتجربته على موقع فلاتر لاب فكانت النتيجة:
سننشيء تطبيقا متقدمًا عن كيفية استخدام خصائص الحاوية في Flutter.
في هذا المثال، سنقوم بإنشاء تطبيق يعرض بطاقات للمستخدمين، وسنستخدم خصائص الحاوية لتخصيص كل بطاقة بشكل فردي.
سنقوم بتحديد خصائص مثل اللون، الحشو، الهامش، وحجم النص.
قبل البدء، تأكد من أنك قد قمت بتثبيت Flutter ومحرر النصوص المفضل لديك. الآن، هيا نبدأ:
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('Advanced Container Example'), ), body: ListView( children: [ buildCard('Omar bobakr', 'Software Engineer', Colors.blue), buildCard('Gogo Abobakr', 'UI/UX Designer', Colors.green), buildCard('Adam Mahdey', 'Product Manager', Colors.orange), ], ), ), ); } Widget buildCard(String name, String role, Color color) { return Container( margin: EdgeInsets.all(10), padding: EdgeInsets.all(20), decoration: BoxDecoration( color: color, borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 2, blurRadius: 5, offset: Offset(0, 3), ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( name, style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold, ), ), SizedBox(height: 5), Text( role, style: TextStyle( color: Colors.white, fontSize: 16, ), ), ], ), ); } }
شرح الكود :
قمنا بتضمين المكتبات اللازمة من Flutter.
قمنا بإنشاء الكلاس الرئيسي MyApp وقم بتطبيق StatelessWidget.
في دالة build، قمنا بإرجاع MaterialApp مع Scaffold كصفحة الواجهة الرئيسية.
في Scaffold، استخدمنا ListView لعرض قائمة من البطاقات.
قمنا بتعريف دالة buildCard لبناء بطاقة المستخدم باستخدام ويدجيت Container.
داخل buildCard، قمنا بتخصيص الحاوية بخصائص مثل الهامش، الحشو، اللون، وزوايا الحاوية باستخدام BoxDecoration.
في داخل الحاوية، استخدمنا ويدجيت Column لترتيب النصوص بشكل عمودي.
ضمن العمود، قمنا بإنشاء ويدجيت Text لعرض اسم المستخدم ودوره.
طبعنا اسم ودور المستخدم بناءً على البطاقات المختلفة باستخدام دالة buildCard.
هذا المثال يظهر استخدام خصائص الحاوية بشكل متقدم لتخصيص تصميم البطاقات في تطبيق Flutter.
مثال تطبيقي خطوة بخطوة عن هذا
إنشاء مشروع Flutter جديد:
نقم بإنشاء مشروع Flutter جديد باستخدام الأمر التالي في موجه الأوامر:
flutter create container_example
تحرير ملف main.dart:
افتح ملف 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('Container Example'), ), body: Center( child: Container( width: 200, height: 200, color: Colors.blue, padding: EdgeInsets.all(20), margin: EdgeInsets.all(10), alignment: Alignment.center, child: Text( 'Hello, Flutter!', style: TextStyle( color: Colors.white, fontSize: 20, ), ), ), ), ), ); } }
شرح الكود:
قمنا بإنشاء مشروع Flutter جديد واستوردنا مكتبة المواد الأساسية.
في الـ body، استخدمنا مركز (Center) لتوسيط الحاوية.
في الحاوية (Container)، قمنا بتحديد الخصائص مثل العرض (width)، والارتفاع (height)، واللون (color)، والحشو (padding)، والهامش (margin)، والمحاذاة (alignment).
ثم أضفنا ويدجيت النص (Text) كطفل للحاوية.
تشغيل التطبيق:
بعد الانتهاء من التعديلات، قمk بتشغيل التطبيق على محاكي الجهاز أو جهازك الحقيقي باستخدام الأمر التالي في موجه الأوامر:
flutter run
بهذه الخطوات، يمكنك إنشاء تطبيق بسيط يستخدم خصائص الحاوية في Flutter ويعرض نصًا بلون أزرق وبتخصيصات أخرى.
يمكنك توسيع هذا التطبيق واستخدام مزيد من خصائص الحاوية لإنشاء واجهات مستخدم متقدمة.
الشجرة الهرمية للويدجت في التطبيق الذي تم إنشاؤه:
- MaterialApp - Scaffold - AppBar - Text - Center - Container - Text
تفسير الشجرة:
MaterialApp: يُمثل تطبيق Flutter ويحتوي على المظهر العام للتطبيق.
Scaffold: يُمثل هيكل التطبيق الأساسي الذي يحتوي على AppBar والـ body.
AppBar: يُمثل شريط العنوان في الجزء العلوي من الشاشة ويحتوي على عنوان التطبيق.
Text: يُمثل نص العنوان الذي تم تعيينه لشريط العنوان.
Center: يُمثل ويدجيت يضع أي ويدجيت فرعي في المركز.
Container: يُمثل ويدجيت الحاوية التي نقوم بتخصيصها، والتي تحتوي على النص.
هذه الشجرة توضح ترتيب الويدجتات في التطبيق وكيفية تكوين الشاشة بناءً على الويدجتات المستخدمة.
اختبار يغطي مواضيع الدرس “تخصيص الحاويات في Flutter”:
اختبار حول تخصيص الحاويات في Flutter
a) عرض النصوص فقط
b) تخصيص تصميم الواجهات
c) تشغيل مقاطع الفيديو
d) التحكم في الموقع والمسافة بين العناصر
a) اللون
b) النوع
c) الوقت
d) الرابط
a) اللون
b) الحشو (Padding)
c) الهامش (Margin)
d) الأبعاد (Dimensions)
a) باستخدام خاصية backgroundColor
b) باستخدام خاصية color
c) باستخدام خاصية background
d) باستخدام خاصية fill
a) Text
b) Image
c) Icon
d) All of the above
a) width و height
b) size و length
c) dimensions و height
d) width و length
a) margin
b) padding
c) spacing
d) alignment
a) Container
b) Column
c) Row
d) Stack
a) alignment
b) position
c) spacing
d) layout
a) color
b) padding
c) margin
d) decoration
a) transform
b) size
c) alignment
d) position
a) Column
b) Row
c) Stack
d) Grid
الاجابات
تفضل، إليك الإجابات على الأسئلة:
السؤال 1: (b) تخصيص تصميم الواجهات
السؤال 2: (a) اللون
السؤال 3: (b) الحشو (Padding)
السؤال 4: (b) باستخدام خاصية color
السؤال 5: (d) All of the above
السؤال 6: (a) width و height
السؤال 7: (a) margin
السؤال 8: (a) Container
السؤال 9: (a) alignment
السؤال 10: (d) decoration
السؤال 11: (a) transform
السؤال 12: (a) Column
You really make it seem really easy with your presentation however I in finding this matter to be really one thing that I believe I might by no means understand.
It sort of feels too complicated and extremely broad for me.
I’m looking forward in your next put up, I will attempt to get the grasp of it!
Lista escape roomów
I used to be recommended this blog by my cousin. I’m not sure whether or not this submit is written by means of him as nobody else
understand such distinctive approximately my trouble. You’re incredible!
Thanks!