Trình phát nhạc: thông tin bài hát

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 27 trên 30.

Bên dưới hình ảnh là tên bài hát và nghệ sĩ. Giống như tên trên danh thiếp, tên bài hát là dòng chữ mà mắt bạn nên nhìn thấy đầu tiên: lớn và đậm. Tên nghệ sĩ là dòng chữ màu xám nhạt hơn bên dưới.

Hình ảnh là một khối lớn còn tiêu đề là một khối nhỏ, vì vậy chúng cần có khoảng cách rộng giữa nhau, rộng hơn khoảng cách giữa tiêu đề và tên nghệ sĩ, vốn thuộc về nhau. Cách sắp xếp khoảng cách để nhóm các thành phần lại giúp màn hình dễ đọc.

Thử thách

Dễ

Bên dưới hình minh họa, hãy thêm:

một SizedBox(height: 24)
Midnight Drive, cỡ chữ 24 và in đậm
một SizedBox(height: 4)
The Night Owls với màu Colors.grey

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Now Playing')),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    width: double.infinity,
                    height: 300,
                    decoration: BoxDecoration(
                      color: Colors.deepPurple,
                      borderRadius: BorderRadius.circular(24),
                    ),
                    child: const Center(
                      child: Icon(Icons.album, size: 120, color: Colors.white),
                    ),
                  ),
                  Positioned(
                    top: 12,
                    right: 12,
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                      decoration: BoxDecoration(
                        color: Colors.black54,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Text(
                        'HD',
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}