Danh thiếp: Bố cục

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

Đã đến lúc kết hợp mọi thứ lại. Trong ba bài học tiếp theo, bạn sẽ xây dựng một ứng dụng danh thiếp, kiểu màn hình làm nền tảng cho mọi trang hồ sơ.

Hãy bắt đầu với bố cục. Trước tiên, phác họa màn hình bằng các hình khối: ảnh đại diện tròn ở trên cùng, tiếp đến là tên, rồi đến công việc, tất cả xếp thành một cột ở giữa màn hình. Khi các hình khối đã ở đúng vị trí, tiếp theo là tạo kiểu.

Thử thách

Dễ

Tạo thẻ ở giữa màn hình dưới dạng một Column (với mainAxisSize: MainAxisSize.min) gồm:

một CircleAvatar có radius: 48, backgroundColor: Colors.indigo và chữ viết tắt JD làm phần tử con, màu trắng, kích thước 32
tên, Jordan Diaz
nghề nghiệp, Flutter Developer

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: Text('Jordan Diaz'),
        ),
      ),
    );
  }
}