بناء أول واجهة: استخدام Scaffold و AppBar و Container

بناء أول واجهة: استخدام Scaffold و AppBar و Container

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

الخطوة 1: إعداد الهيكل الأساسي باستخدام Scaffold

Scaffold هو المكون الأساسي الذي يوفر الهيكل المرئي لتطبيقك، مثل شريط التطبيق (AppBar)، الجسم الرئيسي (body)، أزرار الإجراءات العائمة (FloatingActionButton)، وغيرها. نبدأ بإنشاء تطبيق فلاتر فارغ يحتوي على MaterialApp ثم Scaffold.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( // Scaffold يوفر البنية الأساسية مثل شريط التطبيق والجسم
        // لا يوجد AppBar أو body هنا بعد، فقط الهيكل الفارغ
      ),
    );
  }
}

ملاحظة تقنية: MaterialApp هو الـ Widget الذي يغلف تطبيقك بالكامل ويمنحه خصائص تصميم Material Design. Scaffold هو الـ Widget الذي يستخدم داخل MaterialApp لإنشاء صفحة واحدة ذات تصميم Material Design.

الخطوة 2: إضافة شريط التطبيق (AppBar)

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar( // AppBar هو شريط العنوان أعلى التطبيق
          title: const Text('تطبيقي الأول'), // عنوان يظهر في شريط التطبيق
          backgroundColor: Colors.blueAccent, // لون خلفية شريط التطبيق
        ),
        // لا يوجد body هنا بعد
      ),
    );
  }
}

ملاحظة تقنية: الخاصية title في AppBar تتوقع Widget (عادة Text) وليس مجرد نص. الخاصية backgroundColor تسمح بتخصيص لون شريط التطبيق.

الخطوة 3: إضافة محتوى إلى الجسم (body) باستخدام Container

الآن، لنضف بعض المحتوى إلى الجزء الرئيسي من الشاشة (body). سنستخدم Container لإنشاء مربع ملون في منتصف الشاشة يحتوي على نص. Container هو Widget متعدد الاستخدامات يمكن استخدامه لتحديد الحجم، اللون، الهوامش، الحشوة، والمحاذاة.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('تطبيقي الأول'),
          backgroundColor: Colors.blueAccent,
        ),
        body: Center( // Center widget لتوسيط المحتوى في الشاشة
          child: Container( // Container يستخدم لتحديد حجم ولون ومحاذاة المحتوى
            width: 200, // عرض الحاوية بالبكسل المنطقي
            height: 200, // ارتفاع الحاوية بالبكسل المنطقي
            color: Colors.deepOrange, // لون خلفية الحاوية
            alignment: Alignment.center, // محاذاة المحتوى (child) داخل الحاوية
            child: const Text(
              'مرحباً فلاتر!', // النص داخل الحاوية
              style: TextStyle(color: Colors.white, fontSize: 20), // تنسيق النص
            ),
          ),
        ),
      ),
    );
  }
}

ملاحظة تقنية: Center هو Widget مفيد جدًا لتوسيط الـ Widget التابع له (child) داخل المساحة المتاحة. Container يمكنه احتواء Widget واحد فقط كـ child.

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

هذا هو الكود الكامل الذي يجمع جميع الخطوات لإنشاء تطبيقنا الأول:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp هو الـ Widget الأساسي لتطبيق فلاتر الذي يستخدم Material Design
      home: Scaffold( // Scaffold يوفر الهيكل البصري الأساسي للصفحة (مثل شريط التطبيق والجسم)
        appBar: AppBar( // AppBar هو شريط العنوان الذي يظهر في الجزء العلوي من الشاشة
          title: const Text('تطبيقي الأول'), // عنوان التطبيق الذي يظهر في الـ AppBar
          backgroundColor: Colors.blueAccent, // لون خلفية الـ AppBar
        ),
        body: Center( // Center Widget يستخدم لتوسيط الـ Widget التابع له في منتصف الشاشة
          child: Container( // Container هو Widget متعدد الاستخدامات لتحديد الحجم، اللون، الهوامش، وغيرها
            width: 200, // تحديد عرض الحاوية بـ 200 بكسل منطقي
            height: 200, // تحديد ارتفاع الحاوية بـ 200 بكسل منطقي
            color: Colors.deepOrange, // تحديد لون خلفية الحاوية باللون البرتقالي الداكن
            alignment: Alignment.center, // محاذاة المحتوى (الابن) داخل الحاوية في المنتصف
            child: const Text( // Text Widget لعرض النص داخل الحاوية
              'مرحباً فلاتر!', // النص المراد عرضه
              style: TextStyle( // تنسيق النص
                color: Colors.white, // لون النص أبيض
                fontSize: 20, // حجم الخط 20
              ),
            ),
          ),
        ),
      ),
    );
  }
}

النتيجة المتوقعة

عند تشغيل هذا الكود، سيظهر لك تطبيق فلاتر بسيط يحتوي على شريط عنوان أزرق اللون يحمل النص "تطبيقي الأول". في منتصف الشاشة، ستجد مربعًا برتقاليًا بحجم 200x200 بكسل، وفي وسطه نص أبيض مكتوب عليه "مرحباً فلاتر!".

← السابقالفهرس