مشغل الموسيقى: معلومات الأغنية
جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 27 من 30.
تحت العمل الفني يأتي اسم الأغنية والفنان. وكما هو الحال مع الاسم على بطاقة عمل، ينبغي أن يكون اسم الأغنية أول ما تقع عليه العين: كبيرًا وعريضًا. أما اسم الفنان فهو سطر رمادي أكثر هدوءًا أسفله.
العمل الفني شكل كبير، والعنوان شكل صغير، لذا يحتاجان إلى مساحة بينهما، أكبر من المسافة بين العنوان واسم الفنان، فهما ينتميان معًا. إن التباعد الذي يجمع العناصر في مجموعات هو ما يجعل الشاشة سهلة القراءة.
التحدي
سهلأسفل العمل الفني، أضف:
- عنصر
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),
),
),
),
],
),
],
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تصميم يتكيف مع الشاشة
1التشارك في الصف
Expanded يملأ الصفمشاركة المساحة باستخدام flexFlexible يحتضن عنصره الفرعيSpacer يباعد بين العناصر4الأحجام ونقاط التوقف
العرض الكامل: double.infinityعرض أقصىحجم الشاشة: MediaQueryنقاط التوقف باستخدام LayoutBuilder7مشروع: مشغل الموسيقى
مشغل الموسيقى: غلاف الألبوممشغل الموسيقى: معلومات الأغنيةتدرّب بنفسك: مترجم Flutter عبر الإنترنت