Lettore musicale: Copertina dell’album

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 26 di 30.

È il momento di usare l’intera sezione. Nelle prossime cinque lezioni costruirai la schermata In riproduzione di un’app musicale: la copertina dell’album con un badge, il brano e l’artista, un cursore di avanzamento, i controlli di riproduzione e una modalità scura.

Un lettore musicale è un buon test di layout: ogni parte deve adattarsi al telefono, i controlli devono condividere equamente la larghezza e la copertina deve avere un’etichetta sovrapposta.

MyApp è già un StatefulWidget, perché il cursore, il pulsante di riproduzione e la modalità scura avranno bisogno di stato. Per ora, lo State non contiene nulla.

Inizia dalla copertina. Uno Stack sovrappone il badge all’immagine e Positioned lo colloca in un angolo.

Sfida

Facile

Inserisci la copertina dell’album in uno Stack e, sopra di essa, un badge HD nell’angolo in alto a destra, a 12 pixel dall’alto e da destra:

il badge è un Container con padding EdgeInsets.symmetric(horizontal: 8, vertical: 4) e una BoxDecoration Colors.black54 con angoli di 8
il suo elemento figlio è HD in bianco e in grassetto

Provalo tu

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