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

حاسبة الإكرامية: الأشخاص

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

غالبًا ما يُقسَّم مبلغ الفاتورة بين عدة أشخاص. أضف صفًا يتضمن عدد الأشخاص وزري أيقونات، أحدهما للطرح والآخر للجمع، مثل العداد الذي أنشأته في «عداد للأعلى وللأسفل».

يدفع شخص واحد على الأقل دائمًا، لذا يصبح زر الطرح رماديًا عند 1. يصبح IconButton رماديًا بالطريقة نفسها التي تصبح بها الأزرار الأخرى، باستخدام onPressed: null. عندما تكون الدالة قصيرة، يمكنك كتابتها مباشرةً داخل ? ::

onPressed: _people > 1
    ? () {
        setState(() {
          _people--;
        });
      }
    : null,

تُبقي SizedBox(width: 16) في الصف الأزرار بعيدة قليلًا عن النص.

challenge icon

التحدي

سهل
  • احتفِظ بعدد الأشخاص في int _people = 1;
  • أضِف أسفل مبلغ الإكرامية عنصر Row يحتوي على People: 1، وعنصر IconButton مع Icons.remove وآخر مع Icons.add.
  • يضيف زر الجمع شخصًا. ويُزيل زر الطرح شخصًا، ويظهر باللون الرمادي عندما يكون العدد 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;

  @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)}'),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

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

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

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