כרטיסים ברשימה
חלק מהיחידה רשימות ומסכים במסלול ה-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: חשבו על רשימה של הזמנות, הודעות או נסיעות.
אתגר
קלהנסיעה לפריז מופיעה בכרטיס. הציגו גם את הנסיעות לקיוטו וללימה בכרטיסים, כרטיס אחד לכל נסיעה.
נסו בעצמכם
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'),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
תרגלו בעצמכם: קומפיילר Flutter אונליין