Danh thiếp: Kiểu dáng

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 31 trên 32.

Các thành phần đã có. Giờ hãy tạo kiểu cho chúng trông như một tấm thẻ: tên nên là thứ đầu tiên thu hút ánh nhìn, còn công việc nên nằm bên dưới trong một dòng chữ nhẹ nhàng hơn.

Kích thước và độ đậm khiến một dòng chữ trở nên nổi bật. Màu dịu hơn giúp dòng chữ bớt nổi bật. Một chút khoảng cách giữa ảnh đại diện và tên giúp mỗi phần có không gian riêng.

Thử thách

Dễ

Định dạng thẻ:

tạo khoảng cách 16 pixel giữa ảnh đại diện và tên
đặt cỡ chữ của tên là 28 và in đậm
đặt màu nghề nghiệp là Colors.blueGrey

Tự làm thử

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