Lecteur de musique : Informations sur le morceau

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

Sous l’illustration viennent la chanson et l’artiste. Comme le nom sur une carte de visite, le titre de la chanson est la ligne que l’œil doit repérer en premier : grande et en gras. L’artiste apparaît sur une ligne grise plus discrète, juste en dessous.

L’illustration est une grande forme et le titre, une petite, alors il faut de l’espace entre eux, davantage qu’entre le titre et l’artiste, qui vont ensemble. C’est l’espacement qui regroupe les éléments qui rend un écran facile à lire.

Défi

Facile

Sous l’illustration, ajoute :

un SizedBox(height: 24)
Midnight Drive, taille 24 et en gras
un SizedBox(height: 4)
The Night Owls en Colors.grey

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: [
              Stack(
                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),
                    ),
                  ),
                  Positioned(
                    top: 12,
                    right: 12,
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                      decoration: BoxDecoration(
                        color: Colors.black54,
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Text(
                        'HD',
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}