נגן מוזיקה: פרטי השיר
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 27 מתוך 30.
מתחת ליצירה מופיעים השיר והאמן. כמו השם בכרטיס ביקור, השיר הוא השורה שהעין אמורה למצוא ראשונה: גדולה ובולטת. האמן מופיע בשורה אפורה ועדינה יותר מתחתיו.
היצירה היא צורה גדולה והכותרת היא צורה קטנה, לכן צריך להיות ביניהן מרווח, גדול יותר מהמרווח בין הכותרת לאמן, ששייכים זה לזה. מרווחים שמקבצים דברים יחד הם שהופכים מסך לקריא.
אתגר
קלמתחת ליצירת האמנות, הוסף:
SizedBox(height: 24)Midnight Drive, בגודל24</code ובמודגש</li><li><code>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 אונליין