حاسبة الإكرامية: الفاتورة
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 30 من 34.
حان وقت تطبيق القسم كاملًا عمليًا. خلال الدروس الخمسة القادمة، ستنشئ حاسبة للإكرامية: أدخل قيمة الفاتورة، واختر الإكرامية، وحدد عدد الأشخاص الذين سيتقاسمونها، ثم اطّلع على المبلغ الذي سيدفعه كل شخص.
التطبيق عبارة عن StatefulWidget يحتوي على Column داخل Padding. الجزء الأول هو الفاتورة: حقل لإدخال الأرقام التي تحتوي على فاصلة عشرية، وتُقرأ باستخدام double.tryParse، وتُحفَظ في الحالة على هيئة double.
اعرض قيمة الفاتورة أسفل الحقل بمنزلتين عشريتين، حتى تتمكن من التأكد من أن التطبيق قرأها بشكل صحيح. تُكتب المبالغ المالية دائمًا بمنزلتين عشريتين: 42.50، وليس 42.5.
التحدي
متوسط- استبدل السطر
Type the bill to startبحقلTextFieldيحمل التسميةBill، مع حدّ ولوحة مفاتيح للأرقام تتضمن فاصلة عشرية. - احتفظ بقيمة الفاتورة في
double _bill = 0;، واقرأها باستخدامdouble.tryParse، أو استخدم 0. - اعرض أسفل الحقل
Bill: 42.50بمنزلتين عشريتين.
جرّب بنفسك
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> {
@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: [
const Text('Type the bill to start', style: TextStyle(fontSize: 20)),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير5اتخاذ القرارات
bool والعامل ? :اتخاذ القرارات باستخدام if وelseAnd وOr وNot في Dartإظهار وإخفاء عنصر واجهةتعطيل زر بصريًا8مشروع: حاسبة الإكرامية
حاسبة الإكرامية: الفاتورةحاسبة الإكرامية: الإكراميةتدرّب بنفسك: مترجم Flutter عبر الإنترنت