Décimales avec toStringAsFixed

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 26 sur 34.

Un nombre avec un séparateur décimal est un double. Il se lit à partir d’un texte de la même manière, avec double.tryParse :

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0 : pas un nombre entier

Les calculs avec des nombres à virgule flottante donnent souvent de longues décimales : 5 * 0.621371 vaut 3.106855, et 10 / 3 vaut 3.3333333333333335. Pour afficher un nombre fixe de décimales, utilise toStringAsFixed. Cette méthode arrondit et renvoie une chaîne :

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

Par défaut, le clavier numérique ne comporte pas de séparateur décimal. TextInputType.numberWithOptions(decimal: true) en ajoute un.

Défi

Moyen

L’application convertit les kilomètres en miles, mais elle ne lit que des nombres entiers et affiche de longues décimales.

Lisez le champ avec double.tryParse pour que 2.5 fonctionne, et faites de _km un double.
Attribuez au champ un clavier numérique avec un séparateur décimal.
Affichez les miles avec deux décimales : That is 3.11 miles pour 5 km.

Essayez vous-même

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