كيف تستخدم الويدجت الأساسية في Flutter لبناء تطبيقك الأول؟

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

ما هي الويدجت في Flutter؟

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

• StatelessWidget: ويدجت ثابتة لا تتغير حالتها بمرور الوقت، مثل النصوص والأيقونات الثابتة.
• StatefulWidget: ويدجت تفاعلية يمكن أن تتغير حالتها استجابة لتفاعلات المستخدم أو تحديثات البيانات.

الويدجت الأساسية

1. ويدجت النصوص (Text)

تعد ويدجت النصوص من أكثر الويدجت استخداماً في Flutter. يمكنك تخصيص النص بعدة طرق:

// نص بسيط
Text('مرحباً بك في Flutter'),

// نص منسق
Text(
  'مرحباً بك في Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,
    height: 1.5,
  ),
  textAlign: TextAlign.right,
  textDirection: TextDirection.rtl,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
),

// نص قابل للتحديد
SelectableText(
  'هذا النص يمكن تحديده ونسخه',
  style: TextStyle(fontSize: 16),
  textDirection: TextDirection.rtl,
),

// نص غني بالأنماط
RichText(
  text: TextSpan(
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(text: 'مرحباً '),
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

2. الأزرار (Buttons)

توفر Flutter مجموعة متنوعة من الأزرار لمختلف الاحتياجات:

// زر مرتفع مع تأثيرات الظل
ElevatedButton(
  onPressed: () {
    print('تم الضغط على الزر');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('زر مرتفع'),
),

// زر مسطح بدون خلفية
TextButton(
  onPressed: () {
    print('تم الضغط على الزر المسطح');
  },
  style: TextButton.styleFrom(
    primary: Colors.blue,
    textStyle: TextStyle(fontSize: 16),
  ),
  child: Text('زر مسطح'),
),

// زر محاط بحدود
OutlinedButton(
  onPressed: () {
    print('تم الضغط على الزر المحاط');
  },
  style: OutlinedButton.styleFrom(
    primary: Colors.blue,
    side: BorderSide(color: Colors.blue),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('زر محاط'),
),

// زر مع أيقونة
IconButton(
  onPressed: () {
    print('تم الضغط على زر الأيقونة');
  },
  icon: Icon(Icons.favorite),
  color: Colors.red,
  tooltip: 'إضافة إلى المفضلة',
)

3. حقول الإدخال (Input Fields)

حقول الإدخال تسمح للمستخدم بإدخال البيانات. يمكن تخصيصها بعدة طرق:

// حقل إدخال بسيط
TextField(
  decoration: InputDecoration(
    labelText: 'اسم المستخدم',
    hintText: 'أدخل اسم المستخدم',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.person),
  ),
  textDirection: TextDirection.rtl,
  onChanged: (value) {
    print('القيمة المدخلة: $value');
  },
),

// حقل كلمة المرور
TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'كلمة المرور',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.lock),
    suffixIcon: IconButton(
      icon: Icon(Icons.visibility),
      onPressed: () {
        // تبديل حالة إظهار/إخفاء كلمة المرور
      },
    ),
  ),
),

// حقل إدخال متعدد الأسطر
TextField(
  maxLines: 3,
  decoration: InputDecoration(
    labelText: 'الوصف',
    alignLabelWithHint: true,
    border: OutlineInputBorder(),
  ),
)

4. الصور (Images)

يمكن عرض الصور من مصادر مختلفة في Flutter:

// صورة من الأصول المحلية
Image.asset(
  'assets/images/logo.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
),

// صورة من الإنترنت مع معالج التحميل
Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, progress) {
    if (progress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: progress.expectedTotalBytes != null
            ? progress.cumulativeBytesLoaded / progress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
),

// صورة دائرية
ClipRRect(
  borderRadius: BorderRadius.circular(100),
  child: Image.asset(
    'assets/images/profile.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)

5. ويدجت التخطيط (Layout Widgets)

ويدجت التخطيط تساعد في تنظيم وترتيب العناصر في الشاشة:

// مثال على Container
Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue[100],
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text('محتوى داخل Container'),
),

// مثال على Row و Column
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('العنوان الرئيسي'),
    SizedBox(height: 16),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        ElevatedButton(
          onPressed: () {},
          child: Text('زر 1'),
        ),
        ElevatedButton(
          onPressed: () {},
          child: Text('زر 2'),
        ),
      ],
    ),
  ],
),

// مثال على Stack
Stack(
  children: [
    Image.asset(
      'assets/images/background.jpg',
      fit: BoxFit.cover,
    ),
    Positioned(
      bottom: 16,
      right: 16,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('اضغط هنا'),
      ),
    ),
  ],
)

مثال تطبيقي كامل

هذا مثال على تطبيق يجمع بين مختلف الويدجت التي تعلمناها:

import 'package:flutter/material.dart';

class BasicWidgetsDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('عرض الويدجت الأساسية'),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'مرحباً بك في تطبيقنا',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.right,
            ),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(
                labelText: 'اسم المستخدم',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.person),
              ),
              textDirection: TextDirection.rtl,
            ),
            SizedBox(height: 10),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'كلمة المرور',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.lock),
              ),
              textDirection: TextDirection.rtl,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('تسجيل الدخول'),
              style: ElevatedButton.styleFrom(
                padding: EdgeInsets.symmetric(vertical: 15),
              ),
            ),
            SizedBox(height: 20),
            Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text('معلومات إضافية'),
                  SizedBox(width: 8),
                  Icon(Icons.info),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

نصائح وأفضل الممارسات

• استخدام const: استخدم const للويدجت الثابتة لتحسين الأداء
• التنظيم: اجعل الويدجت صغيرة وقابلة لإعادة الاستخدام
• المسافات: استخدم SizedBox للمسافات بدلاً من Padding عندما تحتاج فقط إلى مسافة ثابتة
• التناسق: استخدم المتغيرات للألوان والأنماط المتكررة
• التوثيق: اكتب تعليقات توضيحية للشفرة المعقدة
• الاختبار: اختبر الويدجت على أحجام شاشات مختلفة

الخاتمة

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

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