Kartu dalam List

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 9 dari 33.

Card adalah panel dengan sudut membulat dan bayangan lembut yang membuatnya tampak terangkat dari layar. Panel ini mengelompokkan isinya, sehingga setiap item dalam list terlihat sebagai satu kesatuan.

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

Card memiliki margin kecil di sekelilingnya, sehingga card dalam list tampak terpisah satu sama lain. margin: mengubah margin-nya, color: mengubah warnanya, dan elevation: membuat bayangannya lebih dalam.

ListTile di dalam Card adalah salah satu komponen yang paling umum dalam aplikasi Flutter: bayangkan list pesanan, pesan, atau perjalanan.

Tantangan

Mudah

Perjalanan ke Paris ada di sebuah kartu. Tampilkan juga perjalanan ke Kyoto dan Lima di kartu, masing-masing satu kartu.

Coba sendiri

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'),
            ),
          ],
        ),
      ),
    );
  }
}