뮤직 플레이어: 앨범 아트

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 26번째.

이제 섹션 전체를 활용해 볼 차례입니다. 다음 다섯 개의 수업에서는 음악 앱의 지금 재생 중 화면을 만듭니다. 배지가 있는 앨범 아트, 노래와 아티스트, 진행 슬라이더, 재생 컨트롤, 다크 모드를 구현합니다.

음악 플레이어는 레이아웃을 시험하기에 좋습니다. 모든 부분이 휴대폰 화면에 맞아야 하고, 컨트롤은 너비를 균등하게 나눠 쓰며, 아트 위에는 레이블이 표시됩니다.

MyApp은 이미 StatefulWidget입니다. 슬라이더와 재생 버튼, 다크 모드에 상태가 필요하기 때문입니다. 지금은 State에 아무것도 들어 있지 않습니다.

아트부터 시작해 보세요. Stack을 사용하면 그림 위에 배지를 올릴 수 있고, Positioned를 사용하면 배지를 모서리에 배치할 수 있습니다.

챌린지

쉬움

앨범 아트를 Stack에 넣고, 그 위 오른쪽 상단 모서리에 위쪽과 오른쪽에서 12픽셀 떨어진 위치에 HD 배지를 배치하세요:

배지는 패딩이 EdgeInsets.symmetric(horizontal: 8, vertical: 4)이고 모서리가 8인 Colors.black54 BoxDecoration을 사용하는 Container입니다
배지의 자식은 흰색 굵은 글씨의 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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}