Musikplayer: Steuerelemente

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

Die letzte Zeile enthält die Schaltflächen: zurück, Wiedergabe und weiter. Sie sollten die Breite gleichmäßig aufteilen, wobei die Wiedergabe-Schaltfläche auf jedem Smartphone genau in der Mitte sitzt.

Wenn du jede IconButton in Expanded einschließt, erhält jede ein Drittel der Zeile, und die Schaltfläche sitzt in der Mitte ihres Drittels. Gib der Wiedergabe-Schaltfläche einen größeren Wert für iconSize:, damit sie hervorsticht.

Die Wiedergabe-Schaltfläche ändert sich: Sie zeigt Icons.pause, während der Song läuft, und Icons.play_arrow, wenn er nicht läuft. Dafür brauchst du einen bool-Wert im Zustand und einen ? :-Operator, um das Symbol auszuwählen.

Aufgabe

Einfach

Füge unter den Zeitangaben nach einem SizedBox(height: 16) eine Row mit drei Expanded-IconButton-Widgets hinzu:

Icons.skip_previous, iconSize: 40
die Wiedergabetaste, iconSize: 64: Icons.pause, solange ein neues Feld bool _playing = false; den Wert true hat, und Icons.play_arrow, solange es false ist; beim Antippen wird _playing in setState umgeschaltet
Icons.skip_next, iconSize: 40

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;

  @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'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}