Pemutar Musik: Penggeser Progres

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 28 dari 30.

Pemutar menampilkan posisi lagu saat ini dan memungkinkan kamu menyeret penggeser ke posisi lain. Itu adalah Slider, yang nilainya tersimpan dalam state.

Di bawahnya ada dua waktu: durasi yang sudah diputar di sebelah kiri, dan panjang lagu di sebelah kanan. Row dengan Spacer di antaranya mendorong keduanya ke ujung masing-masing, sehingga sejajar dengan ujung slider di ponsel apa pun.

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

Tantangan

Mudah

Tambahkan bilah progres di bawah nama artis:

sebuah field double _position = 0.3; di dalam State
sebuah SizedBox(height: 16), lalu sebuah Slider yang menampilkan _position dan menyimpan nilai baru di setState saat slider digeser
sebuah Row di bawahnya, dengan 1:12 di tepi kiri dan 3:45 di tepi kanan

Coba sendiri

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