הפיכת כפתור לאפור
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 21 מתוך 34.
בכפתור הראשון שלך, onPressed: null הפך את הכפתור לאפור. עכשיו אפשר להחליט בזמן שהאפליקציה פועלת: להעביר ל־onPressed את הפונקציה כשהכפתור מתאים, ולהעביר null כשהוא לא מתאים.
ElevatedButton(
onPressed: _count > 0 ? _decrease : null,
child: const Text('Minus'),
)האופרטור ? : בוחר בין המתודה לבין null. בכל פעם ש־setState בונה את המסך מחדש, ההשוואה מתבצעת שוב, ולכן הכפתור מאפיר וחוזר לפעול באופן אוטומטי.
כפתור אפור מבהיר לאנשים למה לא יקרה דבר עוד לפני שהם לוחצים עליו. כפתור שאפשר ללחוץ עליו אבל אינו עושה דבר בשקט פשוט נראה מקולקל.
אתגר
קלמספר הפריטים בעגלה יכול לרדת מתחת לאפס. השבת את הכפתור Remove כשאין פריטים, כך שאפשר יהיה ללחוץ עליו רק כאשר _items גדול מ־0.
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _items = 0;
void _add() {
setState(() {
_items++;
});
}
void _remove() {
setState(() {
_items--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Cart')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Items: $_items', style: const TextStyle(fontSize: 24)),
const SizedBox(height: 16),
ElevatedButton(onPressed: _add, child: const Text('Add')),
ElevatedButton(onPressed: _remove, child: const Text('Remove')),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
תרגלו בעצמכם: קומפיילר Flutter אונליין