Trình phát nhạc: thanh trượt tiến trình

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 28 trên 30.

Trình phát cho biết bài hát đã phát đến đâu và cho phép bạn kéo đến một vị trí khác. Đó là Slider, có giá trị được lưu trong trạng thái.

Bên dưới là hai mốc thời gian: thời lượng đã phát ở bên trái, độ dài bài hát ở bên phải. Một Row có Spacer ở giữa sẽ đẩy chúng về hai đầu, giúp chúng thẳng hàng với hai đầu của thanh trượt trên mọi điện thoại.

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

Thử thách

Dễ

Thêm thanh tiến trình bên dưới tên nghệ sĩ:

một trường double _position = 0.3; trong State
một SizedBox(height: 16), sau đó là Slider hiển thị _position, lưu giá trị mới trong setState khi thanh trượt di chuyển
một Row bên dưới, với 1:12 ở mép trái và 3:45 ở mép phải

Tự làm thử

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