Odtwarzacz muzyki: Okładka albumu

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 26 z 30.

Czas wykorzystać całą sekcję. W następnych pięciu lekcjach zbudujesz ekran „Teraz odtwarzane” aplikacji muzycznej: okładkę albumu z plakietką, tytuł utworu i nazwę wykonawcy, suwak postępu, przyciski sterowania odtwarzaniem oraz tryb ciemny.

Odtwarzacz muzyki to dobry test układu: każdy element musi zmieścić się na ekranie telefonu, przyciski sterowania muszą równomiernie dzielić dostępną szerokość, a okładka ma mieć na sobie etykietę.

MyApp jest już elementem StatefulWidget, ponieważ suwak, przycisk odtwarzania i tryb ciemny będą wymagały stanu. Na razie State niczego nie przechowuje.

Zacznij od okładki. Stack umieszcza plakietkę na obrazku, a Positioned — w jego rogu.

Wyzwanie

Łatwy

Umieść okładkę albumu w elemencie Stack, a na niej plakietkę HD w prawym górnym rogu, 12 pikseli od góry i prawej krawędzi:

plakietka to Container z dopełnieniem EdgeInsets.symmetric(horizontal: 8, vertical: 4) oraz BoxDecoration w kolorze Colors.black54 i zaokrąglonymi narożnikami o wartości 8
jej element podrzędny to HD w kolorze białym i pogrubieniu

Spróbuj swoich sił

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