Menu
CoddyTech
flag Ar iconالعربيةdown icon

مشغل الموسيقى: غلاف الألبوم

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

حان وقت استخدام القسم بأكمله. في الدروس الخمسة التالية، ستنشئ شاشة «يُشغَّل الآن» لتطبيق موسيقى: غلاف الألبوم مع شارة، واسم الأغنية والفنان، وشريط تمرير للتقدم، وأزرار التشغيل، ووضعًا داكنًا.

يُعد مشغل الموسيقى اختبارًا جيدًا للتخطيط: إذ يجب أن يلائم كل جزء الهاتف، وأن تتقاسم عناصر التحكم العرض بالتساوي، وأن تحمل الصورة ملصقًا فوقها.

إن MyApp هو بالفعل StatefulWidget، لأن شريط التمرير وزر التشغيل والوضع الداكن ستحتاج إلى حالة. في الوقت الحالي، لا يحتوي State على شيء.

ابدأ بالصورة. يضع Stack الشارة فوق الصورة، ويضعها Positioned في إحدى الزوايا.

challenge icon

التحدي

سهل

ضع صورة غلاف الألبوم داخل Stack، وفوقها شارة HD في الزاوية العلوية اليمنى، على بُعد 12 بكسل من الأعلى واليمين:

  • الشارة عبارة عن Container مع حشوة EdgeInsets.symmetric(horizontal: 8, vertical: 4) وBoxDecoration بلون Colors.black54 وزوايا دائرية بمقدار 8
  • العنصر الابن فيها هو HD باللون الأبيض وبخط عريض

جرّب بنفسك

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: [
              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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تصميم يتكيف مع الشاشة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت