Menu
CoddyTech

מחשבון טיפ: אנשים

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

לעיתים קרובות מתחלקים בחשבון. הוסף שורה עם מספר האנשים ושני כפתורי סמל, מינוס ופלוס, כמו המונה שבנית בשיעור מונה עולה ויורד.

תמיד יש לפחות אדם אחד שמשלם, ולכן כפתור המינוס מאפיר כשמגיעים ל־1. כפתור IconButton מאפיר באותו אופן כמו כפתורים אחרים, באמצעות onPressed: null. כשהפונקציה קצרה, אפשר לכתוב אותה ישירות בתוך ? ::

onPressed: _people > 1
    ? () {
        setState(() {
          _people--;
        });
      }
    : null,

רכיב SizedBox(width: 16) בשורה מרחיק מעט את הכפתורים מהטקסט.

challenge icon

אתגר

קל
  • השאר את מספר האנשים ב־int _people = 1;
  • מתחת לסכום הטיפ, הוסף Row עם People: 1, כפתור IconButton עם Icons.remove ואחד עם Icons.add.
  • הפלוס מוסיף אדם. המינוס מפחית אדם אחד, והוא מושבת כשהמספר הוא 1.

נסו בעצמכם

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> {
  double _bill = 0;
  double _tipPercent = 10;

  @override
  Widget build(BuildContext context) {
    final double tip = _bill * _tipPercent / 100;
    return Scaffold(
      appBar: AppBar(title: const Text('Tip Calculator')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: 'Bill',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _bill = double.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 8),
            Text('Bill: ${_bill.toStringAsFixed(2)}'),
            const SizedBox(height: 24),
            Text('Tip: ${_tipPercent.round()}%', style: const TextStyle(fontSize: 20)),
            Slider(
              value: _tipPercent,
              min: 0,
              max: 30,
              divisions: 6,
              onChanged: (double value) {
                setState(() {
                  _tipPercent = value;
                });
              },
            ),
            Text('Tip amount: ${tip.toStringAsFixed(2)}'),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

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

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

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