Müzik Çalar: Kontroller

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 29 / 30.

Son satırda düğmeler bulunur: önceki, oynat ve sonraki. Herhangi bir telefonda genişliği eşit paylaşmalı, oynat düğmesi de tam ortada olmalıdır.

Her IconButton öğesini Expanded içine almak, her birine satırın üçte birini verir ve düğme kendi üçte birlik bölümünün ortasında yer alır. Öne çıkması için oynat düğmesine daha büyük bir iconSize: ver.

Oynat düğmesi değişir: şarkı çalarken Icons.pause, çalmıyorken Icons.play_arrow gösterir. Bunun için durum içinde bir bool ve simgeyi seçmek üzere bir ? : kullanılır.

Görev

Kolay

Sürelerin altında, bir SizedBox(height: 16) sonrasında üç Expanded IconButton bileşeninden oluşan bir Row ekle:

Icons.skip_previous, iconSize: 40
oynat düğmesi, iconSize: 64: yeni bool _playing = false; alanı true olduğunda Icons.pause, false olduğunda Icons.play_arrow; düğmeye dokunmak, setState içinde _playing değerini tersine çevirir
Icons.skip_next, iconSize: 40

Kendin dene

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