Trình phát nhạc: điều khiển

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 29 trên 30.

Hàng cuối cùng chứa các nút: trước, phát và tiếp theo. Trên mọi điện thoại, chúng cần chia đều chiều rộng, với nút phát nằm chính giữa.

Bọc mỗi IconButton trong Expanded để mỗi nút chiếm một phần ba hàng, và nút nằm chính giữa phần đó. Đặt iconSize: lớn hơn cho nút phát để nút nổi bật hơn.

Nút phát thay đổi: nút hiển thị Icons.pause khi bài hát đang phát và Icons.play_arrow khi bài hát không phát. Dùng một bool trong state và ? : để chọn biểu tượng.

Thử thách

Dễ

Bên dưới thời gian, sau một SizedBox(height: 16), thêm một Row gồm ba widget IconButton được đặt trong Expanded:

Icons.skip_previous, iconSize: 40
Nút phát, iconSize: 64: hiển thị Icons.pause khi trường mới bool _playing = false; có giá trị true, hiển thị Icons.play_arrow khi trường này có giá trị false; khi nhấn vào nút, đảo giá trị của _playing trong setState
Icons.skip_next, iconSize: 40

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