뮤직 플레이어: 컨트롤

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

마지막 행에는 이전, 재생, 다음 버튼이 있습니다. 어떤 휴대전화에서도 버튼들이 너비를 똑같이 나눠 가지며, 재생 버튼은 정확히 가운데에 있어야 합니다.

각 IconButton을 Expanded로 감싸면 버튼마다 행의 3분의 1을 차지하고, 각 버튼은 할당된 공간의 가운데에 놓입니다. 재생 버튼이 눈에 띄도록 더 큰 iconSize:를 지정하세요.

재생 버튼은 상태에 따라 바뀝니다. 노래가 재생 중일 때는 Icons.pause를 표시하고, 재생 중이 아닐 때는 Icons.play_arrow를 표시합니다. 상태에 bool을 두고 아이콘을 선택하는 데 ? :를 사용하면 됩니다.

챌린지

쉬움

시간 표시 아래에 SizedBox(height: 16)을 추가한 다음, Expanded 위젯 3개를 포함하는 Row를 추가하세요. 각 위젯에는 IconButton을 넣습니다.

Icons.skip_previous, iconSize: 40
재생 버튼, iconSize: 64: 새 필드 bool _playing = false;가 true일 때는 Icons.pause, false일 때는 Icons.play_arrow를 사용합니다. 버튼을 탭하면 setState에서 _playing의 값이 반전됩니다.
Icons.skip_next, iconSize: 40

직접 해보기

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> {
  double _position = 0.3;

  @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)),
              const SizedBox(height: 16),
              Slider(
                value: _position,
                onChanged: (value) {
                  setState(() {
                    _position = value;
                  });
                },
              ),
              const Row(
                children: [
                  Text('1:12'),
                  Spacer(),
                  Text('3:45'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}