Reprodutor de Música: Capa do Álbum

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 26 de 30.

Hora de usar a seção inteira. Nas próximas cinco lições, você vai criar a tela Em reprodução de um aplicativo de música: a capa do álbum com um selo, a música e o artista, um controle deslizante de progresso, os controles de reprodução e um modo escuro.

Um reprodutor de música é um bom teste de layout: cada parte precisa caber na tela do celular, os controles dividem a largura igualmente e a arte exibe um rótulo sobre ela.

MyApp já é um StatefulWidget, porque o controle deslizante, o botão de reprodução e o modo escuro vão precisar de estado. Por enquanto, o State não contém nada.

Comece pela arte. Um Stack coloca o selo sobre a imagem, e Positioned o coloca em um canto.

Desafio

Fácil

Coloque a capa do álbum em um Stack e, sobre ela, um selo HD no canto superior direito, a 12 pixels do topo e da direita:

o selo é um Container com preenchimento EdgeInsets.symmetric(horizontal: 8, vertical: 4) e um BoxDecoration Colors.black54 com cantos de 8
seu filho é HD, em branco e negrito

Experimente você mesmo

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