Musikplayer: Songinformationen

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

Unter dem Cover stehen der Song und der Künstler. Wie der Name auf einer Visitenkarte ist der Song die Zeile, die das Auge zuerst finden sollte: groß und fett. Der Künstler ist eine dezente graue Zeile darunter.

Das Cover ist eine große Form und der Titel eine kleine, daher brauchen sie Abstand voneinander – mehr als der Titel und der Künstler, die zusammengehören. Abstände, die Elemente gruppieren, machen einen Bildschirm leicht lesbar.

Aufgabe

Einfach

Füge unter dem Artwork Folgendes hinzu:

ein SizedBox(height: 24)
Midnight Drive, Größe 24 und fett
ein SizedBox(height: 4)
The Night Owls in Colors.grey

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