Menu
CoddyTech

כרטיסים ברשימה

חלק מהיחידה רשימות ומסכים במסלול ה-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 אונליין