مشروع المنشورات: الواجهة

مشروع المنشورات - 3 -

سنتعرف في هذا الدرس على إعداد تصميم الواجهة وبعض العناصر التي تستخدمُ عادةً للتعامل مع عناصر متغيرة العدد.

قبل أن نبدأ باعداد الواجهة علينا أن نعود لملف main.dart ثم داخل materialApp نضيف خاصية home: ونضع داخلها صفحتنا المنشأة مسبقاً على الشكل التالي:

الواجهة التي سنطبقها ستكون على الشكل التالي:

لنبدأ أولاً بتحليل الواجهة , هي مقسومةٌ إلى 4 عناصر رئيسة وهي :

1- الشريط العلوي App Bar

2- قائمة متغيرة List View

3- حاوية Container

4- قائمة متغيرة أفقية

وقبل تطبيق الواجهة لا ننسى أن نضيف الهيكلة Scaffold لنضيف داخلها الشريط العلوي وبقية الخواص.

لنبدأ أولاً بتطبيق الشريط العلوي وأمره بسيط إذ انه يحتوي فقط على عنوان وتنصيف للعنوان , حتى لا أطيل عليك تطبيقه ببساطة :

الآن لنبدأ بتطبيق القائمة المتغيرة الأولى والتي تحتوي على حاوية بداخلها عامود Column بداخله النصوص والقائمة المتغيرة الأفقية.

نحتاج بدايةً أن نعرف ما هي أهم خواص هذه القائمة؟

تحوي القائمة المتغيرة على عدّة خواص منها عدد عناصرها , بناء العناصر , اتجاه القائمة.

يعنينا من هذه في القائمة الأولى عدد العناصر وبنائها itemCount , itemBuilder.

لذلك يكون تعريفنا لهذه القائمة على النحو التالي:

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

بدايةً نتجهُ إلى الأقواس المتعرجة والتي بداخلها يجب ان نرجع القطعة Widget التي نحتاج , والتي هي في حالتنا عبارة عن الحاوية Container بداخلها مجموعة من العناصر مرتبة في عامود.

إن الحاوية بداخلها عدّة خواصٍ كذلك سنستخدم منها الهوامش الخارجية mergin والهوامش الداخلية padding وتدوير الحواف Border Radius والتأطير Border.

إن لكل خاصيةٍ منها طريقة استخدام لن نخوضَ فيها في هذا الدرس , ولكن بامكانك الإطلاع على خواص الحاوية من خلال الضغط هنا.

بعد ذلك وحسب تحليلنا السابق إن الابن لهذه الحاوية هو عامودٌ من النصوص , لذلك نضيف الابن Column وبداخله الأبناء children وهم النصوص والعناصر الأخرى.

نقوم بعد ذلك باضافة النصوص داخل العامود , سنضع قيماً افتراضية للنصوص وسنسد لها قيماً حقيقيةً لاحقاً.

كما نلحظ أن نص العنوان ثخين وبقية النص عاديّ, حجم العنوان أكبر من المحتوى , نأخذ هذه الأمور بعين الاعتبار ونحن نضع النصين الموجودة.

سنلاحظ أن هناك تنبيها بخط أصفر تحت بعض الأماكن , هذا التنبيه يقترح عليك اضافة ثابت const قبل النص لتوفير مساحة الذاكرة , لا يهمنا هذا التنبيه الآن لأن هذه النصوص غير ثابتة وهدفنا في هذا الدرس أن نصنع الواجهة فقط , ثم سنقوم باسناد قيمٍ للنصوص فهي غير ثابتة.

نقوم بعد ذلك باضافة القائمة الأفقية وهنا نحتاج أن نحدد حجمها أولاً , ولذلك استخدمت الصندوق المحجّم SizedBox لتحديد حجمها بارتفاع 50 نقطة.

ثم وضعنا القائمة واستخدمنا خاصية اتجاه القائمة Scroll Diriction وحددنا بأنه أفقي.

يكون معنا الناتج التالي:

بهذه الطريقة نكون صنعنا واجهة التطبيق ونحن جاهزون للانتقال إلى المرحلة التالية وهي اعداد الحالة والنموذج والمتحكم.

يكون الناتج النهائي على هذا الشكل , بامكانك نسخ الكود:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Home extends ConsumerStatefulWidget {
  const Home({super.key});

  @override
  ConsumerState createState() => _HomeState();
}

class _HomeState extends ConsumerState&lt;Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('تطبيق المنشورات'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            margin: const EdgeInsets.all(8.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                border: Border.all(
                  color: Colors.black87,
                  width: 2,
                )),
            child: Column(
              children: [
                Text(
                  'العنوان',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 25,
                  ),
                ),
                Text(
                  ' المحتوى' * 10,
                  textDirection: TextDirection.rtl,
                  style: TextStyle(
                    fontSize: 18,
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: 10,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: EdgeInsets.all(6),
                        padding: EdgeInsets.all(4),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            border: Border.all(
                              color: Colors.blue,
                              width: 2,
                            )),
                        child: Text(
                          'التصنيف',
                          style: TextStyle(
                            fontSize: 15,
                            color: Colors.blue,
                          ),
                        ),
                      );
                    },
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

الدرس التالي