Danh thiếp: Thông tin liên hệ

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

Danh thiếp giúp mọi người liên hệ với bạn, vì vậy phần cuối cùng là thông tin liên hệ: số điện thoại và email, mỗi mục có biểu tượng riêng, trên một khung màu trắng.

Mỗi dòng thông tin liên hệ là một Row gồm biểu tượng, một khoảng cách nhỏ và văn bản. Hai dòng được đặt trong một Column, bên trong một Container có phần đệm và các góc bo tròn. Nền sáng trên toàn màn hình làm khung màu trắng nổi bật:

Scaffold(
  backgroundColor: Colors.indigo.shade50,
  body: ...,
)

Colors.indigo.shade50 là sắc độ chàm nhạt nhất. Mỗi màu trong Colors có các sắc độ từ shade50 đến shade900.

Thử thách

Dễ

Hoàn thiện thẻ:

đặt backgroundColor: của Scaffold thành Colors.indigo.shade50
bên dưới công việc, sau SizedBox(height: 24), thêm một Container có phần đệm 16 pixel và BoxDecoration màu trắng với các góc bo tròn
bên trong là một Column gồm hai hàng: Icons.phone cùng +1 555 0100, và bên dưới là Icons.email cùng jordan@example.com

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)),
              ),
              SizedBox(height: 16),
              Text(
                'Jordan Diaz',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(color: Colors.blueGrey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}