音乐播放器：专辑封面

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 26 课，共 30 课。

现在要把整个单元的内容用起来。在接下来的 5 节课中，你将构建音乐应用的“正在播放”界面：带徽章的专辑封面、歌曲和歌手、进度滑块、播放控件，以及深色模式。

音乐播放器很适合用来测试布局：每个部分都要适应手机屏幕，控件要均匀分配宽度，封面上还要显示一个标签。

MyApp 已经是一个 StatefulWidget，因为滑块、播放按钮和深色模式都需要状态。目前，State 中没有任何内容。

先从封面开始。Stack 会把徽章放在图片上方，而 Positioned 会把它放在角落里。

挑战

简单

将专辑封面放在 Stack 中，并在其上方右上角放置一个 HD 徽标，距离顶部和右侧各 12 像素：

徽标是一个 Container，内边距为 EdgeInsets.symmetric(horizontal: 8, vertical: 4)，并使用 Colors.black54 的 BoxDecoration，圆角为 8
它的子项是白色粗体的 HD

亲手试试

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