מחשבון טיפ: הטיפ
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 31 מתוך 34.
עכשיו, הטיפ. Slider מ־0 עד 30 אחוז, בקפיצות של 5, מאפשר לבחור אותו, והאפליקציה מציגה כמה כסף זה.
שמרו את האחוז ב־State בתור double שמתחיל ב־10. סכום הטיפ אינו דבר ששומרים: הוא נגזר מהחשבון ומהאחוז, לכן חשבו אותו בתחילת build, בתור final:
final double tip = _bill * _tipPercent / 100;בכל setState, מהשדה או מהמחוון, המסך נבנה שוב, ו־tip מחושב מחדש עם הערכים החדשים.
אתגר
קל- מתחת לחשבון, הצג
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)}'),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
8פרויקט: מחשבון טיפ
מחשבון טיפ: החשבוןמחשבון טיפ: הטיפתרגלו בעצמכם: קומפיילר Flutter אונליין