מחשבון טיפ: לכל אדם
חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 33 מתוך 34.
עכשיו התשובה שהאפליקציה נועדה לספק: כמה כל אדם משלם. היא נובעת מכל השאר, ולכן זהו עוד final אחד בראש build, אחרי tip:
final double each = (_bill + tip) / _people;הסוגריים חשובים. Dart מבצעת חילוק לפני חיבור, כמו בשיעור מתמטיקה, לכן _bill + tip / _people יחלק רק את הטיפ.
לסכום מוסיפים סימן דולר, ובמחרוזת של Dart התו $ מתחיל משתנה. כדי להציג את הסימן עצמו, מוסיפים לפניו קו נטוי הפוך: \$. לאחר מכן מופיע ${...} האמיתי:
Text('Each person pays \$${each.toStringAsFixed(2)}')אתגר
קל- בחלק העליון של
build, חשבו כמה כל אדם משלם: החשבון בתוספת הטיפ, מחולקים בין האנשים. - בתחתית, הציגו את הסכום בגודל
28ובמודגש:Each person pays $44.00עבור חשבון בסך 40, טיפ של 10% ואדם אחד.
נסו בעצמכם
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;
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++;
});
},
),
],
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
8פרויקט: מחשבון טיפ
מחשבון טיפ: החשבוןמחשבון טיפ: הטיפתרגלו בעצמכם: קומפיילר Flutter אונליין