뮤직 플레이어: 진행 슬라이더

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

플레이어는 노래가 얼마나 재생되었는지 보여 주고, 다른 위치로 드래그할 수 있게 해 줍니다. 이는 값이 상태에 저장되는 Slider입니다.

그 아래에는 두 개의 시간이 표시됩니다. 왼쪽에는 재생된 시간, 오른쪽에는 노래의 길이가 표시됩니다. 두 시간 사이에 Spacer가 있는 Row를 사용하면 양쪽 끝으로 밀려나므로, 어떤 휴대폰에서도 슬라이더의 양 끝과 나란히 정렬됩니다.

const Row(
  children: [
    Text('0:00'),
    Spacer(),
    Text('4:00'),
  ],
)

챌린지

쉬움

아티스트 아래에 진행 막대를 추가하세요:

State에 double _position = 0.3; 필드를 추가합니다
SizedBox(height: 16)을 추가한 다음, _position을 표시하는 Slider를 추가하고 슬라이더를 움직일 때 새 값을 setState에 저장합니다
그 아래에 왼쪽 가장자리에 1:12, 오른쪽 가장자리에 3:45가 있는 Row를 추가합니다

직접 해보기

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),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 24),
              const Text(
                'Midnight Drive',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 4),
              const Text('The Night Owls', style: TextStyle(color: Colors.grey)),
            ],
          ),
        ),
      ),
    );
  }
}