شرح استخدام ويدجت Card في فلاتر

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

ما هو Card في Flutter؟

Card هو ويدجت في Flutter تستخدم لإظهار محتوى متعدد الأوجه في مكان واحد. يحتوي على مظهر ثلاثي الأبعاد ويظهر كورقة بطاقة قابلة للانحناء.

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“

خصائص Card

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

child

هو العنصر الذي يتم عرضه داخل Card.

Card(
  child: Text('Hello World!'),
),

elevation

هو الارتفاع الذي يتم تطبيقه على Card، مما يسمح بإنشاء مظهر ثلاثي الأبعاد.

Card(
  elevation: 4,
  child: Text('Hello World!'),
),

margin

هي المسافة بين Card وعناصر واجهة المستخدم المجاورة.

Card(
  margin: EdgeInsets.all(16),
  child: Text('Hello World!'),
),

color

هو لون الخلفية المستخدم ل Card.

Card(
  color: Colors.blue,
  child: Text('Hello World!'),
),

shape

هو شكل Card المستخدم.

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Text('Hello World!'),
),

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

clipBehavior

هو السلوك المستخدم على العنصر الموجود داخل Card.

Card(
  clipBehavior: Clip.antiAlias,
  child: Text('Hello World!'),
),

semanticContainer

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

Card(
  semanticContainer: true,
  child: Text('Hello World!'),
),

مثال على استخدام Card في فلاتر

لنقدم مثالًا كاملاً على كيفية استخدام Card في Flutter. سنقوم باستخدام Card لإنشاء قائمة بسيطة تحتوي على بعض الأشياء التي يجب القيام بها.

أولاً ، سنقوم بإنشاء قائمة بسيطة باستخدام ListView وCard. سنضيف أربعة عناصر إلى القائمة: “شراء الحليب” ، “تنظيف السيارة” ، “تسجيل الدخول على الفيسبوك” ، “إرسال بريد إلكتروني للزملاء”.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Card Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Card Example'),
        ),
        body: ListView(
          children: <Widget>[
            const Card(
              child: ListTile(
                title: Text('شراء الحليب'),
              ),
            ),
            const Card(
              child: ListTile(
                title: Text('تنظيف السيارة'),
              ),
            ),
            const Card(
              child: ListTile(
                title: Text('تسجيل الدخول على الفيسبوك'),
              ),
            ),
            const Card(
              child: ListTile(
                title: Text('إرسال بريد إلكتروني للزملاء'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

في هذا المثال، قمنا بإنشاء عناصر Card مع ListTile المضمن داخلها. يتم استخدام ListTile لإظهار عناصر القائمة بشكل جميل. يمكننا تخصيص Card عن طريق إضافة الخصائص المختلفة إليه.

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

Card(
  elevation: 4,
  child: ListTile(
    title: Text('شراء الحليب'),
  ),
),

يمكننا أيضًا تحديد شكل Card باستخدام خاصية shape.

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: ListTile(
    title: Text('تنظيف السيارة'),
  ),
),

يمكننا تحديد اللون الخلفي لـ Card باستخدام خاصية color.

Card(
  color: Colors.blue,
  child: ListTile(
    title: Text('تسجيل الدخول على الفيسبوك'),
  ),
),

يمكننا أيضًا إضافة الصور إلى Card باستخدام CircleAvatar.

Card(
  child: ListTile(
    leading: CircleAvatar(
      child: Icon(Icons.mail),
    ),
    title: Text('إرسال بريد إلكتروني للزملاء'),
  ),
),

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

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“

يحتوي Card على العديد من الخصائص التي يمكن استخدامها لتخصيص السلوك الذي يتم تطبيقه على Card. يمكن استخدام الخصائص المختلفة لتحقيق سلوك مختلف، مثل تحديد الارتفاع واللون والشكل. يمكن استخدامه داخل عناصر واجهة المستخدم المختلفة، مثل ListView وColumn وRow. يمكن استخدام Card لإظهار صور أو نصوص أو قوائم أو أي عنصر آخر يحتاج إلى إظهاره داخل بطاقة. باستخدام الخصائص المختلفة المتاحة في Card، يمكن تخصيص مظهر وسلوك Card بشكل كامل وفقًا لاحتياجات التطبيق.

يجب على المطورين الاستفادة من خصائص Card في Flutter لتحسين تجربة المستخدم النهائي وإنشاء تطبيقات ممتعة وسلسة. يمكن استخدام Card في تصميم واجهة المستخدم بشكل كبير لإظهار محتوى متعدد الأوجه بشكل جيد وبطريقة جذابة.