Reproductor de música: Controles

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 29 de 30.

La última fila contiene los botones: anterior, reproducir y siguiente. Deben compartir el ancho de forma uniforme, con el botón de reproducción exactamente en el medio, en cualquier teléfono.

Al envolver cada IconButton en Expanded, cada uno ocupa un tercio de la fila y el botón queda en el centro de su tercio. Dale al botón de reproducción un iconSize: más grande para que destaque.

El botón de reproducción cambia: muestra Icons.pause mientras suena la canción y Icons.play_arrow cuando no suena. Eso es un bool en el estado y un ? : para elegir el icono.

Desafío

Fácil

Debajo de los tiempos, después de un SizedBox(height: 16), añade un Row con tres widgets Expanded IconButton:

Icons.skip_previous, iconSize: 40
el botón de reproducción, iconSize: 64: Icons.pause mientras un nuevo campo bool _playing = false; sea verdadero, Icons.play_arrow mientras sea falso; al tocarlo, cambia el valor de _playing en setState
Icons.skip_next, iconSize: 40

Pruébalo tú mismo

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