Müzik Çalar: Albüm Kapağı

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 26 / 30.

Tüm bölümü kullanma zamanı. Önümüzdeki beş derste bir müzik uygulamasının Şimdi Çalınıyor ekranını oluşturacaksın: rozetli albüm kapağı, şarkı ve sanatçı, bir ilerleme kaydırıcısı, oynatma kontrolleri ve koyu mod.

Müzik çalar, düzeni sınamak için iyi bir seçenektir: her parça telefona sığmalı, kontroller genişliği eşit paylaşmalı ve kapak görselinin üzerinde bir etiket bulunmalıdır.

MyApp zaten bir StatefulWidget, çünkü kaydırıcının, oynat düğmesinin ve koyu modun duruma ihtiyacı olacak. Şimdilik State hiçbir şey tutmuyor.

Kapak görseliyle başla. Bir Stack rozeti resmin üzerine yerleştirir, Positioned ise onu bir köşeye koyar.

Görev

Kolay

Albüm kapağını bir Stack içine yerleştir ve üzerine, sağ üst köşeye üstten ve sağdan 12 piksel uzaklıkta bir HD rozeti koy:

rozet, dolgusu EdgeInsets.symmetric(horizontal: 8, vertical: 4) olan ve köşeleri 8 olan Colors.black54 renkli bir BoxDecoration içeren bir Container öğesidir
içeriği beyaz ve kalın yazılmış HD metnidir

Kendin dene

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