Pemutar Musik: Info Lagu

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

Di bawah karya seni terdapat lagu dan artisnya. Seperti nama pada kartu nama, lagu adalah baris yang harus pertama kali ditemukan mata: besar dan tebal. Nama artis adalah baris abu-abu yang lebih redup di bawahnya.

Karya seni berbentuk besar, sedangkan judulnya kecil, jadi keduanya membutuhkan ruang di antaranya, lebih banyak daripada jarak antara judul dan nama artis, yang saling berkaitan. Jarak yang mengelompokkan berbagai elemen membuat layar mudah dibaca.

Tantangan

Mudah

Di bawah gambar, tambahkan:

SizedBox(height: 24)
Midnight Drive, berukuran 24 dan tebal
SizedBox(height: 4)
The Night Owls dengan warna Colors.grey

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