Musikplayer: Fortschrittsregler

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

Ein Player zeigt an, wie weit du im Lied bist, und lässt dich zu einer anderen Stelle ziehen. Das ist ein Slider, dessen Wert im Zustand gespeichert ist.

Darunter stehen zwei Zeitangaben: links, wie viel bereits abgespielt wurde, rechts die Länge des Liedes. Eine Row mit einem Spacer dazwischen schiebt sie an die beiden Enden, sodass sie auf jedem Smartphone mit den Enden des Sliders übereinstimmen.

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

Aufgabe

Einfach

Füge die Fortschrittsleiste unter dem Künstler hinzu:

ein Feld double _position = 0.3; in State
ein SizedBox(height: 16), dann ein Slider, der _position anzeigt und beim Verschieben den neuen Wert in setState speichert
eine Row darunter mit 1:12 am linken Rand und 3:45 am rechten Rand

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