Pemutar Musik: Terang dan Gelap

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

Orang mendengarkan musik pada malam hari, jadi pemutar dilengkapi mode gelap, dengan tombol di bilah atas untuk menggantinya.

AppBar menerima actions:, sebuah list tombol yang ditampilkan di ujung kanannya. Salah satu IconButton di sana mengubah bool dalam state, dan themeMode: mengikutinya. Ikon tombol menunjukkan fungsinya: bulan, Icons.dark_mode, saat pemutar menggunakan tema terang, dan matahari, Icons.light_mode, saat pemutar menggunakan tema gelap.

Semua warna di layar yang berasal dari tema berubah bersamanya: latar belakang, teks, slider, dan tombol. Gambar album mempertahankan warnanya sendiri, seperti sebuah gambar.

Tantangan

Mudah

Tambahkan mode gelap:

sebuah field bool _dark = false;
darkTheme: dari seed Colors.deepPurple dengan brightness: Brightness.dark, dan themeMode: yang dipilih berdasarkan _dark
di bagian actions: milik AppBar, sebuah IconButton yang menampilkan Icons.light_mode saat mode gelap aktif dan Icons.dark_mode saat mode terang aktif, yang membalik nilai _dark di dalam setState

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;
  bool _playing = false;

  @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'),
                ],
              ),
              const SizedBox(height: 16),
              Row(
                children: [
                  Expanded(
                    child: IconButton(
                      iconSize: 40,
                      icon: const Icon(Icons.skip_previous),
                      onPressed: () {},
                    ),
                  ),
                  Expanded(
                    child: IconButton(
                      iconSize: 64,
                      icon: Icon(_playing ? Icons.pause : Icons.play_arrow),
                      onPressed: () {
                        setState(() {
                          _playing = !_playing;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: IconButton(
                      iconSize: 40,
                      icon: const Icon(Icons.skip_next),
                      onPressed: () {},
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}