Trình phát nhạc: ảnh bìa album

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 26 trên 30.

Đã đến lúc vận dụng toàn bộ phần này. Trong năm bài học tiếp theo, bạn sẽ xây dựng màn hình Đang phát của một ứng dụng nghe nhạc: ảnh bìa album có nhãn, tên bài hát và nghệ sĩ, thanh trượt tiến trình, các nút điều khiển phát nhạc và chế độ tối.

Trình phát nhạc là một bài kiểm tra bố cục phù hợp: mọi thành phần phải vừa với màn hình điện thoại, các nút điều khiển chia đều chiều rộng và ảnh bìa có nhãn đặt chồng lên trên.

MyApp đã là một StatefulWidget, vì thanh trượt, nút phát nhạc và chế độ tối cần trạng thái. Hiện tại, State chưa chứa gì.

Bắt đầu với ảnh bìa. Stack đặt nhãn lên trên ảnh, còn Positioned đặt nhãn vào một góc.

Thử thách

Dễ

Đặt hình bìa album trong một Stack, rồi đặt huy hiệu HD lên trên ở góc trên bên phải, cách cạnh trên và cạnh phải 12 pixel:

huy hiệu là một Container có phần đệm EdgeInsets.symmetric(horizontal: 8, vertical: 4) và BoxDecoration màu Colors.black54, với các góc bo tròn 8
phần tử con của nó là chữ HD màu trắng và in đậm

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