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