Pemutar Musik: Sampul Album

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

Saatnya menggunakan seluruh bagian ini. Dalam lima pelajaran berikutnya, kamu akan membuat layar Sedang Diputar untuk aplikasi musik: sampul album dengan lencana, lagu dan artis, slider progres, kontrol pemutaran, serta mode gelap.

Pemutar musik adalah uji tata letak yang bagus: setiap bagian harus pas di layar ponsel, kontrolnya berbagi lebar secara merata, dan sampulnya memiliki label di atasnya.

MyApp sudah menjadi StatefulWidget, karena slider, tombol putar, dan mode gelap akan memerlukan state. Untuk saat ini, State tidak menyimpan apa pun.

Mulailah dengan sampulnya. Stack menempatkan lencana di atas gambar, dan Positioned menempatkannya di sudut.

Tantangan

Mudah

Letakkan sampul album di dalam Stack, lalu letakkan lencana HD di atasnya, di sudut kanan atas, dengan jarak 12 piksel dari sisi atas dan kanan:

lencana tersebut adalah Container dengan padding EdgeInsets.symmetric(horizontal: 8, vertical: 4) dan BoxDecoration berwarna Colors.black54 dengan sudut sebesar 8
child-nya adalah teks HD berwarna putih dan tebal

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