Lecteur de musique : Commandes

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

La dernière ligne contient les boutons : précédent, lecture et suivant. Ils doivent se partager la largeur équitablement, avec le bouton de lecture exactement au milieu, sur tous les téléphones.

En enveloppant chaque IconButton dans Expanded, chacun occupe un tiers de la ligne et le bouton se trouve au milieu de son tiers. Donne au bouton de lecture une valeur iconSize: plus grande pour le faire ressortir.

Le bouton de lecture change : il affiche Icons.pause pendant la lecture de la chanson et Icons.play_arrow quand elle ne l’est pas. Cela se fait avec un bool dans l’état et un ? : pour choisir l’icône.

Défi

Facile

Sous les durées, après un SizedBox(height: 16), ajoute une Row composée de trois widgets Expanded IconButton :

Icons.skip_previous, iconSize: 40
le bouton de lecture, iconSize: 64 : Icons.pause lorsque le nouveau champ bool _playing = false; est vrai, Icons.play_arrow lorsqu’il est faux ; appuyer dessus inverse la valeur de _playing dans setState
Icons.skip_next, iconSize: 40

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> {
  double _position = 0.3;

  @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)),
              const SizedBox(height: 16),
              Slider(
                value: _position,
                onChanged: (value) {
                  setState(() {
                    _position = value;
                  });
                },
              ),
              const Row(
                children: [
                  Text('1:12'),
                  Spacer(),
                  Text('3:45'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}