Menu
CoddyTech
flag Ar iconالعربيةdown icon

حاسبة الإكرامية: الإكرامية

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 31 من 34.

بعد ذلك، الإكرامية. يختارها Slider من 0 إلى 30 بالمئة بخطوات مقدارها 5، ويعرض التطبيق مقدار المال الذي تمثله.

احتفظ بنسبة الإكرامية في الحالة كقيمة double تبدأ من 10. مبلغ الإكرامية ليس شيئًا تخزّنه؛ فهو يُستنتج من الفاتورة والنسبة، لذا احسبه في بداية build كقيمة final:

final double tip = _bill * _tipPercent / 100;

كل استدعاء لـ setState، سواء أكان من الحقل أم من شريط التمرير، يعيد بناء الشاشة، ويُعاد حساب tip باستخدام القيم الجديدة.

challenge icon

التحدي

سهل
  • أسفل الفاتورة، اعرض 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)}'),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس إضافة التفاعلية

تدرّب بنفسك: مترجم Flutter عبر الإنترنت