Menu
CoddyTech

נגן מוזיקה: פרטי השיר

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 27 מתוך 30.

מתחת ליצירה מופיעים השיר והאמן. כמו השם בכרטיס ביקור, השיר הוא השורה שהעין אמורה למצוא ראשונה: גדולה ובולטת. האמן מופיע בשורה אפורה ועדינה יותר מתחתיו.

היצירה היא צורה גדולה והכותרת היא צורה קטנה, לכן צריך להיות ביניהן מרווח, גדול יותר מהמרווח בין הכותרת לאמן, ששייכים זה לזה. מרווחים שמקבצים דברים יחד הם שהופכים מסך לקריא.

challenge icon

אתגר

קל

מתחת ליצירת האמנות, הוסף:

  • 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),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה פריסות שמתאימות למסך

תרגלו בעצמכם: קומפיילר Flutter אונליין