מחשבון טיפ: אנשים
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 32 מתוך 34.
לעיתים קרובות מתחלקים בחשבון. הוסף שורה עם מספר האנשים ושני כפתורי סמל, מינוס ופלוס, כמו המונה שבנית בשיעור מונה עולה ויורד.
תמיד יש לפחות אדם אחד שמשלם, ולכן כפתור המינוס מאפיר כשמגיעים ל־1. כפתור IconButton מאפיר באותו אופן כמו כפתורים אחרים, באמצעות onPressed: null. כשהפונקציה קצרה, אפשר לכתוב אותה ישירות בתוך ? ::
onPressed: _people > 1
? () {
setState(() {
_people--;
});
}
: null,רכיב SizedBox(width: 16) בשורה מרחיק מעט את הכפתורים מהטקסט.
אתגר
קל- השאר את מספר האנשים ב־
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)}'),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
8פרויקט: מחשבון טיפ
מחשבון טיפ: החשבוןמחשבון טיפ: הטיפתרגלו בעצמכם: קומפיילר Flutter אונליין