Bahşiş Hesaplayıcı: Kişiler

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 32 / 34.

Bir hesap genellikle paylaşılır. A Counter Up and Down'da oluşturduğun sayaç gibi, kişi sayısını ve eksi ile artı simgeli iki düğmeyi içeren bir satır ekle.

Ödeme yapan kişi sayısı her zaman en az bir olduğundan, eksi düğmesi sayı 1 olduğunda gri görünür. Bir IconButton, diğer düğmelerle aynı şekilde, onPressed: null olduğunda gri görünür. İşlev kısa olduğunda, doğrudan ? : içine yazabilirsin:

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

Satırdaki bir SizedBox(width: 16), düğmelerle metin arasında biraz boşluk bırakır.

Görev

Kolay

int _people = 1; içindeki kişi sayısını koru.
Bahşiş tutarının altına People: 1 içeren bir Row, Icons.remove içeren bir IconButton ve Icons.add içeren bir tane daha ekle.
Artı bir kişi ekler. Eksi bir kişi çıkarır ve sayı 1 olduğunda devre dışı görünür.

Kendin dene

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)}'),
          ],
        ),
      ),
    );
  }
}