Menu
CoddyTech
flag Ar iconالعربيةdown icon

البطاقات في قائمة

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 9 من 33.

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

Card(
  child: ListTile(
    leading: Icon(Icons.flight),
    title: Text('Paris'),
    subtitle: Text('France, May 3'),
  ),
)

تترك البطاقة هامشًا صغيرًا حولها، بحيث تبرز البطاقات في القائمة عن بعضها. يغيّر margin: هذا الهامش، ويغيّر color: لونها، ويجعل elevation: الظل أعمق.

يُعدّ ListTile داخل Card أحد أكثر العناصر شيوعًا في تطبيقات Flutter: فكّر في قائمة بالطلبات أو الرسائل أو الرحلات.

challenge icon

التحدي

سهل

رحلة باريس معروضة على بطاقة. اعرض رحلتي كيوتو وليما على بطاقتين أيضًا، بطاقة لكل رحلة.

جرّب بنفسك

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('My Trips')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Card(
              child: ListTile(
                leading: const Icon(Icons.flight),
                title: const Text('Paris'),
                subtitle: const Text('France, May 3'),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Kyoto'),
              subtitle: const Text('Japan, June 12'),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Lima'),
              subtitle: const Text('Peru, August 20'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

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

جميع دروس القوائم والشاشات

تدرّب بنفسك: مترجم Flutter عبر الإنترنت