Lecteur de musique : Mode clair et sombre

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

Les gens écoutent de la musique le soir, alors le lecteur se dote d’un mode sombre, avec un bouton dans la barre supérieure pour l’activer.

Un AppBar accepte actions:, une liste de boutons affichés à son extrémité droite. Un IconButton placé là inverse un bool dans l’état, et themeMode: suit cette valeur. L’icône du bouton indique son action : une lune, Icons.dark_mode, lorsque le lecteur est en mode clair, et un soleil, Icons.light_mode, lorsqu’il est en mode sombre.

Chaque couleur de l’écran provenant du thème change avec lui : l’arrière-plan, le texte, le curseur et les boutons. La pochette de l’album conserve sa propre couleur, comme une image.

Défi

Facile

Ajoute le mode sombre :

un champ bool _dark = false;
un darkTheme: à partir de la couleur de départ Colors.deepPurple avec brightness: Brightness.dark, et un themeMode: choisi en fonction de _dark
dans les actions: de AppBar, un IconButton qui affiche Icons.light_mode en mode sombre et Icons.dark_mode en mode clair, et qui inverse _dark dans setState

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;
  bool _playing = false;

  @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'),
                ],
              ),
              const SizedBox(height: 16),
              Row(
                children: [
                  Expanded(
                    child: IconButton(
                      iconSize: 40,
                      icon: const Icon(Icons.skip_previous),
                      onPressed: () {},
                    ),
                  ),
                  Expanded(
                    child: IconButton(
                      iconSize: 64,
                      icon: Icon(_playing ? Icons.pause : Icons.play_arrow),
                      onPressed: () {
                        setState(() {
                          _playing = !_playing;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: IconButton(
                      iconSize: 40,
                      icon: const Icon(Icons.skip_next),
                      onPressed: () {},
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}