Musikplayer: Hell- und Dunkelmodus

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 30 von 30.

Nachts hören Menschen Musik, deshalb erhält der Player einen Dunkelmodus mit einer Schaltfläche in der oberen Leiste, um ihn umzuschalten.

Eine AppBar nimmt actions: entgegen, eine Liste von Schaltflächen, die an ihrem rechten Ende angezeigt werden. Eine IconButton dort schaltet einen bool im Zustand um, und themeMode: richtet sich danach. Das Symbol der Schaltfläche zeigt an, was sie bewirkt: ein Mond, Icons.dark_mode, wenn der Player hell ist, und eine Sonne, Icons.light_mode, wenn er dunkel ist.

Alle Farben auf dem Bildschirm, die vom Theme stammen, ändern sich mit ihm: der Hintergrund, der Text, der Schieberegler und die Schaltflächen. Das Albumcover behält seine eigene Farbe, wie es bei einem Bild der Fall wäre.

Aufgabe

Einfach

Füge den Dunkelmodus hinzu:

ein Feld bool _dark = false;
ein darkTheme: auf Grundlage des Seeds Colors.deepPurple mit brightness: Brightness.dark und themeMode:, das anhand von _dark ausgewählt wird
in den actions: der AppBar einen IconButton, der bei aktiviertem Dunkelmodus Icons.light_mode und bei aktiviertem Hellmodus Icons.dark_mode anzeigt und _dark in setState umschaltet

Probier es selbst

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