Dezimalzahlen mit toStringAsFixed

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

Eine Zahl mit Dezimalpunkt ist ein double. Sie wird genauso aus Text gelesen, mit double.tryParse:

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0: keine ganze Zahl

Berechnungen mit Doubles ergeben oft lange Nachkommastellen: 5 * 0.621371 ist 3.106855, und 10 / 3 ist 3.3333333333333335. Um eine feste Anzahl von Nachkommastellen anzuzeigen, verwende toStringAsFixed. Die Methode rundet und gibt einen String zurück:

(10 / 3).toStringAsFixed(2)   // '3.33'
3.106855.toStringAsFixed(1)   // '3.1'

Die Zahlentastatur hat standardmäßig keinen Dezimalpunkt. TextInputType.numberWithOptions(decimal: true) fügt einen hinzu.

Aufgabe

Mittel

Die App rechnet Kilometer in Meilen um, liest aber nur ganze Zahlen ein und zeigt lange Dezimalzahlen an.

Lies das Feld mit double.tryParse aus, damit 2.5 funktioniert, und mache _km zu einem double.
Gib dem Feld die Zahlentastatur mit Dezimaltrennzeichen.
Zeige die Meilen mit zwei Dezimalstellen an: That is 3.11 miles für 5 km.

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> {
  int _km = 0;

  @override
  Widget build(BuildContext context) {
    final double miles = _km * 0.621371;
    return Scaffold(
      appBar: AppBar(title: const Text('Distance')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: 'Kilometers',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _km = int.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 24),
            Text('That is $miles miles', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}