Kartu Nama: Gaya

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 31 dari 32.

Semua bagiannya sudah tersedia. Sekarang buat tampilannya seperti kartu: nama harus menjadi hal pertama yang menarik perhatian, lalu pekerjaan tampil sebagai baris yang lebih lembut di bawahnya.

Ukuran dan ketebalan membuat sebuah baris terlihat penting. Warna yang lebih lembut membuatnya tampak tidak terlalu menonjol. Sedikit jarak antara avatar dan nama membuat keduanya terasa lega.

Tantangan

Mudah

Atur gaya kartu:

beri jarak 16 piksel antara avatar dan nama
atur ukuran nama menjadi 28 dan cetak tebal
atur warna pekerjaan menjadi Colors.blueGrey

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(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.indigo,
                child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
              ),
              Text('Jordan Diaz'),
              Text('Flutter Developer'),
            ],
          ),
        ),
      ),
    );
  }
}