Pemutar Musik: Kontrol

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

Baris terakhir berisi tombol sebelumnya, putar, dan berikutnya. Lebarnya harus terbagi rata, dengan tombol putar tepat di tengah, di ponsel apa pun.

Membungkus setiap IconButton dengan Expanded memberi masing-masing sepertiga lebar baris, dan tombol berada di tengah bagiannya. Beri tombol putar nilai iconSize: yang lebih besar agar lebih menonjol.

Tampilan tombol putar berubah: tombol ini menampilkan Icons.pause saat lagu diputar dan Icons.play_arrow saat lagu tidak diputar. Gunakan bool dalam state dan ? : untuk memilih ikon.

Tantangan

Mudah

Di bawah waktu, setelah SizedBox(height: 16), tambahkan Row yang berisi tiga widget Expanded IconButton:

Icons.skip_previous, iconSize: 40
tombol putar, iconSize: 64: Icons.pause saat field baru bool _playing = false; bernilai true, Icons.play_arrow saat nilainya false; ketuk tombol ini untuk membalik nilai _playing di dalam setState
Icons.skip_next, iconSize: 40

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