Decimales con toStringAsFixed

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 26 de 34.

Un número con punto decimal es un double. Se lee del texto de la misma manera, con double.tryParse:

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0: no es un número entero

Los cálculos con números double suelen dar resultados con muchos decimales: 5 * 0.621371 es 3.106855, y 10 / 3 es 3.3333333333333335. Para mostrar una cantidad fija de decimales, usa toStringAsFixed. Redondea y devuelve una cadena:

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

El teclado numérico no incluye un punto decimal de forma predeterminada. TextInputType.numberWithOptions(decimal: true) añade uno.

Desafío

Intermedio

La aplicación convierte kilómetros en millas, pero solo lee números enteros y muestra muchos decimales.

Lee el campo con double.tryParse, para que funcione 2.5, y haz que _km sea un double.
Configura el teclado numérico del campo para que incluya un punto decimal.
Muestra las millas con dos decimales: That is 3.11 miles para 5 km.

Pruébalo tú mismo

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