נגן מוזיקה: פקדים
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 29 מתוך 30.
השורה האחרונה מכילה את הכפתורים: הקודם, הפעלה והבא. הם צריכים להתחלק ברוחב באופן שווה, כך שכפתור ההפעלה יהיה בדיוק באמצע, בכל טלפון.
עטיפת כל IconButton ב-Expanded מקצה לכל אחד שליש מהשורה, והכפתור ממוקם באמצע השליש שלו. תנו לכפתור ההפעלה ערך iconSize: גדול יותר כדי שיבלוט.
כפתור ההפעלה משתנה: הוא מציג את Icons.pause בזמן שהשיר מתנגן, ואת Icons.play_arrow כשהוא לא מתנגן. לשם כך משתמשים ב-bool במצב וב-? : כדי לבחור את הסמל.
אתגר
קלמתחת לזמנים, לאחר SizedBox(height: 16), הוסף Row שמכיל שלושה רכיבי Expanded מסוג IconButton:
Icons.skip_previous,iconSize: 40- כפתור ההפעלה,
iconSize: 64:Icons.pauseכאשר השדה החדשbool _playing = false;הוא true, ו-Icons.play_arrowכאשר הוא false; לחיצה עליו הופכת את הערך של_playingבתוךsetState Icons.skip_next,iconSize: 40
נסו בעצמכם
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> {
double _position = 0.3;
@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),
),
),
),
],
),
const SizedBox(height: 24),
const Text(
'Midnight Drive',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
const Text('The Night Owls', style: TextStyle(color: Colors.grey)),
const SizedBox(height: 16),
Slider(
value: _position,
onChanged: (value) {
setState(() {
_position = value;
});
},
),
const Row(
children: [
Text('1:12'),
Spacer(),
Text('3:45'),
],
),
],
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטים4גדלים ונקודות שבירה
רוחב מלא: double.infinityרוחב מרביגודל המסך: MediaQueryנקודות שבירה באמצעות LayoutBuilder7פרויקט: נגן מוזיקה
נגן מוזיקה: עטיפת האלבוםנגן מוזיקה: פרטי השירתרגלו בעצמכם: קומפיילר Flutter אונליין