Musikplayer: Albumcover

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 26 von 30.

Jetzt ist es an der Zeit, den gesamten Abschnitt anzuwenden. In den nächsten fünf Lektionen baust du den „Now Playing“-Bildschirm einer Musik-App: Albumcover mit einem Abzeichen, Song und Interpret, einen Fortschrittsregler, die Wiedergabesteuerung und einen dunklen Modus.

Ein Musikplayer eignet sich gut als Layout-Test: Jedes Element muss auf das Smartphone passen, die Bedienelemente müssen sich die Breite gleichmäßig teilen, und auf dem Cover befindet sich eine Beschriftung.

MyApp ist bereits ein StatefulWidget, da der Regler, die Wiedergabetaste und der dunkle Modus einen Zustand benötigen. Im Moment enthält der State noch nichts.

Beginne mit dem Cover. Ein Stack platziert das Abzeichen über dem Bild, und Positioned setzt es in eine Ecke.

Aufgabe

Einfach

Platziere das Albumcover in einem Stack und darüber rechts oben ein HD-Abzeichen, 12 Pixel vom oberen und rechten Rand entfernt:

Das Abzeichen ist ein Container mit EdgeInsets.symmetric(horizontal: 8, vertical: 4) als Innenabstand und einer BoxDecoration mit Colors.black54 und Ecken mit einem Radius von 8
Sein Inhalt ist HD in Weiß und fett

Probier es selbst

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