מחשבון טיפ: איפוס
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 34 מתוך 34.
הנגיעה האחרונה היא כפתור Reset שמתחיל מחדש: שדה ריק, טיפ של 10%, אדם אחד.
המספרים נמצאים במצב, ולכן setState יכול להחזיר אותם לערכים הקודמים. השדה הוא החלק המורכב: הוא שומר את הטקסט שלו בעצמו, והגדרת _bill ל-0 אינה מרוקנת אותו. תראה 40 בשדה בזמן שהאפליקציה עובדת עם 0. כדי לרוקן אותו, השדה זקוק לבקר, כמו בקטע קריאת שדה באמצעות בקר:
final TextEditingController _billController = TextEditingController();
void _reset() {
_billController.clear();
setState(() {
_bill = 0;
// וגם את הטיפ ואת מספר האנשים
});
}השדה שומר על onChanged שלו: הבקר נועד רק כדי ש-_reset יוכל לנקות אותו. זכור לשחרר אותו.
אתגר
קל- הקצה לשדה
TextEditingControllerבשם_billController, ושחרר אותו. - בתחתית, הוסף
TextButtonעם התוויתResetשמרוקן את השדה ומחזיר את החשבון ל־0, את הטיפ ל־10 ואת מספר האנשים ל־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;
int _people = 1;
@override
Widget build(BuildContext context) {
final double tip = _bill * _tipPercent / 100;
final double each = (_bill + tip) / _people;
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)}'),
const SizedBox(height: 24),
Row(
children: [
Text('People: $_people', style: const TextStyle(fontSize: 20)),
const SizedBox(width: 16),
IconButton(
icon: const Icon(Icons.remove),
onPressed: _people > 1
? () {
setState(() {
_people--;
});
}
: null,
),
IconButton(
icon: const Icon(Icons.add),
onPressed: () {
setState(() {
_people++;
});
},
),
],
),
const SizedBox(height: 24),
Text(
'Each person pays \$${each.toStringAsFixed(2)}',
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
8פרויקט: מחשבון טיפ
מחשבון טיפ: החשבוןמחשבון טיפ: הטיפתרגלו בעצמכם: קומפיילר Flutter אונליין