Trinkgeldrechner: Zurücksetzen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 34 von 34.

Der letzte Schliff ist eine Schaltfläche Reset, mit der alles zurückgesetzt wird: leeres Feld, 10 % Trinkgeld, 1 Person.

Die Zahlen befinden sich im State, also kann setState sie zurücksetzen. Beim Feld ist es kniffliger: Es verwaltet seinen eigenen Text, und wenn du _bill auf 0 setzt, wird es dadurch nicht geleert. Im Feld würde 40 stehen, während die App mit 0 arbeitet. Um es zu leeren, braucht das Feld einen Controller, wie unter „Ein Feld mit einem Controller auslesen“:

final TextEditingController _billController = TextEditingController();

void _reset() {
  _billController.clear();
  setState(() {
    _bill = 0;
    // und das Trinkgeld und die Personen
  });
}

Das Feld behält sein onChanged: Der Controller ist nur dafür da, dass _reset es leeren kann. Denk daran, ihn freizugeben.

Aufgabe

Einfach

Gib dem Feld einen TextEditingController namens _billController und gib ihn frei.
Füge am Ende einen mit Reset beschrifteten TextButton hinzu, der das Feld leert und den Rechnungsbetrag auf 0, das Trinkgeld auf 10 und die Anzahl der Personen auf 1 zurücksetzt.

Probier es selbst

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