Trinkgeldrechner: Die Rechnung

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

Jetzt wird der ganze Abschnitt angewendet. In den nächsten fünf Lektionen erstellst du einen Trinkgeldrechner: Gib den Rechnungsbetrag ein, wähle ein Trinkgeld aus, gib an, wie viele Personen ihn teilen, und sieh, wie viel jede Person bezahlt.

Die App ist ein StatefulWidget mit einer Column innerhalb eines Padding. Im ersten Teil geht es um den Rechnungsbetrag: ein Feld für Zahlen mit Dezimalpunkt, das mit double.tryParse ausgelesen und im State als double gespeichert wird.

Zeige den Rechnungsbetrag unter dem Feld mit zwei Nachkommastellen an, damit du sehen kannst, dass die App ihn richtig ausgelesen hat. Geldbeträge haben immer zwei Nachkommastellen: 42.50, nicht 42.5.

Aufgabe

Mittel

Ersetze die Zeile Type the bill to start durch ein TextField mit der Beschriftung Bill, einem Rahmen und einer numerischen Tastatur mit Dezimalpunkt.
Speichere den Rechnungsbetrag in double _bill = 0;, lies ihn mit double.tryParse ein oder verwende 0.
Zeige unter dem Feld Bill: 42.50 mit zwei Dezimalstellen an.

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> {
  @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: [
            const Text('Type the bill to start', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}