נגן מוזיקה: מצב בהיר וכהה
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 30 מתוך 30.
אנשים מאזינים למוזיקה בלילה, ולכן הנגן מקבל מצב כהה, עם כפתור בסרגל העליון שמאפשר להחליף אליו.
ל־AppBar יש actions:, רשימת כפתורים שמוצגים בקצה הימני שלו. אחד מהם, IconButton, משנה ערך bool במצב, ו־themeMode: נקבע בהתאם. הסמל של הכפתור מציין מה הוא עושה: ירח, Icons.dark_mode, כשהנגן בהיר, ושמש, Icons.light_mode, כשהוא כהה.
כל הצבעים במסך שמגיעים מהערכת הנושא משתנים יחד איתה: הרקע, הטקסט, המחוון והכפתורים. עטיפת האלבום שומרת על הצבעים שלה, כמו תמונה.
אתגר
קלהוסף מצב כהה:
- שדה
bool _dark = false; - הגדרת
darkTheme:עם צבע הזרעColors.deepPurpleועםbrightness: Brightness.dark, והגדרתthemeMode:שנבחרת לפי_dark - ב-
actions:שלAppBar, הוסףIconButtonשמציג אתIcons.light_modeכשהמצב כהה ואתIcons.dark_modeכשהמצב בהיר, ומחליף את הערך של_darkבתוךsetState
נסו בעצמכם
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;
bool _playing = false;
@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'),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: IconButton(
iconSize: 40,
icon: const Icon(Icons.skip_previous),
onPressed: () {},
),
),
Expanded(
child: IconButton(
iconSize: 64,
icon: Icon(_playing ? Icons.pause : Icons.play_arrow),
onPressed: () {
setState(() {
_playing = !_playing;
});
},
),
),
Expanded(
child: IconButton(
iconSize: 40,
icon: const Icon(Icons.skip_next),
onPressed: () {},
),
),
],
),
],
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטים4גדלים ונקודות שבירה
רוחב מלא: double.infinityרוחב מרביגודל המסך: MediaQueryנקודות שבירה באמצעות LayoutBuilder7פרויקט: נגן מוזיקה
נגן מוזיקה: עטיפת האלבוםנגן מוזיקה: פרטי השירתרגלו בעצמכם: קומפיילר Flutter אונליין