Reproductor de música: Portada del álbum

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 26 de 30.

Es hora de usar toda la sección. En las próximas cinco lecciones, crearás la pantalla «Reproduciendo ahora» de una aplicación de música: la carátula del álbum con una insignia, la canción y el artista, un control deslizante de progreso, los controles de reproducción y un modo oscuro.

Un reproductor de música es una buena prueba de diseño: cada parte debe caber en el teléfono, los controles deben compartir el ancho por igual y la carátula debe llevar una etiqueta encima.

MyApp ya es un StatefulWidget, porque el control deslizante, el botón de reproducción y el modo oscuro necesitarán estado. Por ahora, el State no contiene nada.

Empieza por la carátula. Un Stack coloca la insignia encima de la imagen, y Positioned la coloca en una esquina.

Desafío

Fácil

Coloca la portada del álbum en un Stack y, encima, una insignia HD en la esquina superior derecha, a 12 píxeles de la parte superior y del borde derecho:

la insignia es un Container con un relleno de EdgeInsets.symmetric(horizontal: 8, vertical: 4) y un BoxDecoration de Colors.black54 con esquinas de 8
su contenido es HD en blanco y negrita

Pruébalo tú mismo

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