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

مشغل الموسيقى: معلومات الأغنية

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

تحت العمل الفني يأتي اسم الأغنية والفنان. وكما هو الحال مع الاسم على بطاقة عمل، ينبغي أن يكون اسم الأغنية أول ما تقع عليه العين: كبيرًا وعريضًا. أما اسم الفنان فهو سطر رمادي أكثر هدوءًا أسفله.

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

challenge icon

التحدي

سهل

أسفل العمل الفني، أضف:

  • عنصر SizedBox(height: 24)
  • Midnight Drive، بحجم 24 وبخط عريض
  • عنصر SizedBox(height: 4)
  • The Night Owls بلون Colors.grey

جرّب بنفسك

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

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

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

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