مشغل الموسيقى: شريط التقدم

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 28 من 30.

يعرض مشغّل الموسيقى مدى تقدّمك في الأغنية، ويتيح لك سحب المؤشر إلى موضع آخر. هذا عنصر Slider، وتُحفَظ قيمته في الحالة.

أسفله يظهر وقتان: مقدار ما تم تشغيله على اليسار، وطول الأغنية على اليمين. يضع عنصر Row، مع عنصر Spacer بينهما، الوقتين عند الطرفين، بحيث يتراصفان مع طرفي شريط التمرير على أي هاتف.

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

التحدي

سهل

أضف شريط التقدم أسفل اسم الفنان:

حقل double _position = 0.3; في State
عنصر SizedBox(height: 16)، ثم Slider يعرض _position، ويخزّن القيمة الجديدة في setState عند تحريكه
عنصر Row أسفله، يعرض 1:12 عند الحافة اليسرى و3:45 عند الحافة اليمنى

جرّب بنفسك

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