Музыкальный плеер: обложка альбома

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 26 из 30.

Пора применить всё, что вы изучили в этом разделе. В следующих пяти уроках вы создадите экран «Сейчас играет» для музыкального приложения: обложку альбома со значком, название песни и имя исполнителя, ползунок прогресса, элементы управления воспроизведением и тёмный режим.

Музыкальный плеер — хороший способ проверить компоновку: все элементы должны помещаться на экране телефона, элементы управления должны равномерно делить ширину, а поверх обложки должна располагаться подпись.

MyApp уже является StatefulWidget, потому что для ползунка, кнопки воспроизведения и тёмного режима потребуется состояние. Пока что объект State ничего не хранит.

Начните с обложки. Stack размещает значок поверх изображения, а Positioned помещает его в угол.

Задание

Легко

Помести обложку альбома в Stack, а поверх неё — значок HD в правом верхнем углу, на расстоянии 12 пикселей от верхнего и правого краёв:

значок — это Container с внутренними отступами EdgeInsets.symmetric(horizontal: 8, vertical: 4) и BoxDecoration цвета Colors.black54 со скруглением углов 8
его дочерний элемент — HD белого цвета и полужирного начертания

Попробуйте сами

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