뮤직 플레이어: 곡 정보

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

그림 아래에는 곡명과 아티스트가 놓입니다. 명함에 적힌 이름처럼 곡명은 눈이 가장 먼저 찾아야 하는 문구이므로 크고 굵게 표시합니다. 아티스트는 그 아래에 차분한 회색 글씨로 표시합니다.

그림은 큰 형태이고 제목은 작은 형태이므로 둘 사이에는 공간이 필요합니다. 함께 묶여야 하는 제목과 아티스트 사이보다 더 넓은 공간이 필요합니다. 요소들을 묶어 주는 간격이 화면을 읽기 쉽게 만듭니다.

챌린지

쉬움

그림 아래에 다음을 추가합니다:

SizedBox(height: 24)
Midnight Drive, 크기 24 및 굵게 표시
SizedBox(height: 4)
Colors.grey로 표시된 The Night Owls

직접 해보기

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