Menu
CoddyTech

נגן מוזיקה: עטיפת האלבום

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

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

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

MyApp הוא כבר StatefulWidget, כי המחוון, כפתור ההפעלה ומצב כהה יזדקקו למצב. כרגע ה-State אינו מחזיק דבר.

התחילו עם העטיפה. Stack מציב את התג מעל התמונה, ו-Positioned מציב אותו בפינה.

challenge icon

אתגר

קל

מקמו את עטיפת האלבום בתוך 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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

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

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

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