Menu
CoddyTech

הפיכת כפתור לאפור

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 21 מתוך 34.

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

ElevatedButton(
  onPressed: _count > 0 ? _decrease : null,
  child: const Text('Minus'),
)

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

כפתור אפור מבהיר לאנשים למה לא יקרה דבר עוד לפני שהם לוחצים עליו. כפתור שאפשר ללחוץ עליו אבל אינו עושה דבר בשקט פשוט נראה מקולקל.

challenge icon

אתגר

קל

מספר הפריטים בעגלה יכול לרדת מתחת לאפס. השבת את הכפתור 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')),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

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

כל השיעורים ביחידה הוספת אינטראקטיביות

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