حاسبة الإكرامية: لكل شخص
جزء من قسم إضافة التفاعلية في رحلة 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++;
});
},
),
],
),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًا8مشروع: حاسبة الإكرامية
حاسبة الإكرامية: الفاتورةحاسبة الإكرامية: الإكراميةتدرّب بنفسك: مترجم Flutter عبر الإنترنت