Lecteur de musique : Curseur de progression

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

Un lecteur indique où vous en êtes dans la chanson et vous permet de faire glisser le curseur vers un autre endroit. C’est un Slider, dont la valeur est stockée dans l’état.

En dessous, deux durées : le temps écoulé à gauche, la durée de la chanson à droite. Un Row avec un Spacer entre les deux les pousse vers les extrémités, de sorte qu’ils s’alignent sur les extrémités du curseur, quel que soit le téléphone.

const Row(
  children: [
    Text('0:00'),
    Spacer(),
    Text('4:00'),
  ],
)

Défi

Facile

Ajoutez la barre de progression sous le nom de l’artiste :

un champ double _position = 0.3; dans le State
un SizedBox(height: 16), puis un Slider affichant _position, qui enregistre la nouvelle valeur dans setState lorsqu’il est déplacé
un Row en dessous, avec 1:12 à l’extrémité gauche et 3:45 à l’extrémité droite

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),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 24),
              const Text(
                'Midnight Drive',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 4),
              const Text('The Night Owls', style: TextStyle(color: Colors.grey)),
            ],
          ),
        ),
      ),
    );
  }
}