התחלה וסוף
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 3 מתוך 33.
ל־ListTile יש מקום בכל אחד מהקצוות. leading: מופיע לפני הכותרת, ובדרך כלל מציג אווטאר או סמל. trailing: מופיע בקצה הרחוק של השורה, ובדרך כלל מציג סמל או טקסט קצר, כמו שעה.
ListTile(
leading: CircleAvatar(child: Text('AL')),
title: Text('Ada Lovelace'),
trailing: Icon(Icons.call),
)האריח מסדר עבורך את כל הרכיבים: הרכיב המוביל נמצא משמאל, הכותרת וכותרת המשנה ממלאות את האמצע, והרכיב הנגרר נדחק לקצה הימני. אין צורך לכתוב Row או SizedBox.
אתגר
קלבשורה של Ada מופיעה תמונת פרופיל עם ראשי התיבות שלה וסמל טלפון. הוסף את אותם הדברים לשתי השורות האחרות:
leading:CircleAvatarעם ראשי התיבותATו-GHtrailing:Icon(Icons.call)
נסו בעצמכם
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('Contacts')),
body: ListView(
children: const [
ListTile(
leading: CircleAvatar(child: Text('AL')),
title: Text('Ada Lovelace'),
subtitle: Text('+1 555 0101'),
trailing: Icon(Icons.call),
),
ListTile(
title: Text('Alan Turing'),
subtitle: Text('+1 555 0102'),
),
ListTile(
title: Text('Grace Hopper'),
subtitle: Text('+1 555 0103'),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
תרגלו בעצמכם: קומפיילר Flutter אונליין