Menu
CoddyTech

מחשבון טיפ: הטיפ

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

עכשיו, הטיפ. Slider מ־0 עד 30 אחוז, בקפיצות של 5, מאפשר לבחור אותו, והאפליקציה מציגה כמה כסף זה.

שמרו את האחוז ב־State בתור double שמתחיל ב־10. סכום הטיפ אינו דבר ששומרים: הוא נגזר מהחשבון ומהאחוז, לכן חשבו אותו בתחילת build, בתור final:

final double tip = _bill * _tipPercent / 100;

בכל setState, מהשדה או מהמחוון, המסך נבנה שוב, ו־tip מחושב מחדש עם הערכים החדשים.

challenge icon

אתגר

קל
  • מתחת לחשבון, הצג Tip: 10% ו־Slider מ־0 עד 30 עם 6 חלוקות, כשהערך ההתחלתי הוא 10.
  • מתחת למחוון, הצג Tip amount: 4.00 עבור חשבון של 40, עם שתי ספרות אחרי הנקודה העשרונית.

נסו בעצמכם

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;

  @override
  Widget build(BuildContext context) {
    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)}'),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

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

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

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