Bahşiş Hesaplayıcı: Sıfırlama

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

Son dokunuş, her şeyi baştan başlatan bir Reset düğmesidir: boş alan, %10 bahşiş, 1 kişi.

Sayılar State içindedir, bu yüzden setState onları başlangıç değerlerine döndürebilir. Alan ise biraz uğraştırır: kendi metnini tutar ve _bill değerini 0 yapmak alanı boşaltmaz. Uygulama 0 ile çalışırken alanda 40 görürsünüz. Alanı boşaltmak için, Bir Alanı Denetleyiciyle Oku bölümünde olduğu gibi, alanın bir denetleyiciye ihtiyacı vardır:

final TextEditingController _billController = TextEditingController();

void _reset() {
  _billController.clear();
  setState(() {
    _bill = 0;
    // ve bahşiş ile kişi sayısı
  });
}

Alan kendi onChanged değerini korur: denetleyici yalnızca _reset alanı temizleyebilsin diye vardır. Onu bellekten temizlemeyi unutmayın.

Görev

Kolay

Alana _billController adlı bir TextEditingController verin ve işiniz bittiğinde onu temizleyin.
En alta, alanı boşaltan ve hesap tutarını 0'a, bahşişi 10'a, kişi sayısını 1'e döndüren, Reset etiketli bir TextButton ekleyin.

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;
  int _people = 1;

  @override
  Widget build(BuildContext context) {
    final double tip = _bill * _tipPercent / 100;
    final double each = (_bill + tip) / _people;
    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++;
                    });
                  },
                ),
              ],
            ),
            const SizedBox(height: 24),
            Text(
              'Each person pays \$${each.toStringAsFixed(2)}',
              style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}