Lecteur de musique : Pochette d’album

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 26 sur 30.

Il est temps d’utiliser toute la section. Au cours des cinq prochaines leçons, tu vas créer l’écran « En lecture » d’une application musicale : la pochette de l’album avec un badge, le titre de la chanson et le nom de l’artiste, un curseur de progression, les commandes de lecture et un mode sombre.

Un lecteur de musique est un bon test de mise en page : chaque élément doit tenir sur l’écran du téléphone, les commandes doivent se partager la largeur de façon égale et la pochette doit porter une étiquette par-dessus.

MyApp est déjà un StatefulWidget, car le curseur, le bouton de lecture et le mode sombre auront besoin d’un état. Pour l’instant, l’objet State ne contient rien.

Commence par la pochette. Un Stack place le badge par-dessus l’image, et Positioned le place dans un coin.

Défi

Facile

Place la pochette de l’album dans un Stack, puis ajoute par-dessus un badge HD dans le coin supérieur droit, à 12 pixels du haut et du bord droit :

le badge est un Container avec un padding EdgeInsets.symmetric(horizontal: 8, vertical: 4) et une BoxDecoration Colors.black54 aux coins arrondis de 8
son enfant est HD, en blanc et en gras

Essayez vous-même

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