Music Player: Album Art

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 26 of 30.

Time to use the whole section. In the next five lessons you build the Now Playing screen of a music app: album art with a badge, the song and the artist, a progress slider, the play controls, and a dark mode.

A music player is a good layout test: every part has to fit the phone, the controls share the width evenly, and the art carries a label on top of it.

MyApp is already a StatefulWidget, because the slider, the play button and the dark mode will need state. For now the State holds nothing.

Start with the art. A Stack puts the badge on top of the picture, and Positioned puts it in a corner.

Challenge

Easy

Put the album art in a Stack, and on top of it an HD badge in the top right corner, 12 pixels from the top and the right:

the badge is a Container with EdgeInsets.symmetric(horizontal: 8, vertical: 4) of padding and a Colors.black54 BoxDecoration with corners of 8
its child is HD in white and bold

Try it yourself

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