Nombres dans un champ de texte

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

Un champ contient toujours une String, même lorsqu’il affiche des chiffres : '12' est du texte, et '12' * 7 ne vaut pas 84. Pour effectuer des calculs avec cette valeur, convertis-la en int :

int.tryParse('12')    // 12
int.tryParse('hello') // null

null signifie « aucune valeur » : 'hello' n’est pas un nombre, il n’y en a donc pas. Le type du résultat est int?, un int ou null. Avant d’effectuer un calcul, donne-lui une valeur de remplacement, avec ?? :

int age = int.tryParse(value) ?? 0;

Lis a ?? b comme « a, ou b si a est null ». Il y a aussi int.parse, sans « try », mais cette méthode arrête l’application avec une erreur si le texte n’est pas un nombre, et les gens saisissent toutes sortes de choses.

Sur un téléphone, keyboardType: TextInputType.number ouvre un clavier numérique, ce qui fait que les gens saisissent rarement des lettres.

Défi

Moyen

Fais en sorte que le champ ouvre le clavier numérique.
Dans onChanged, convertis le texte en int avec int.tryParse, en utilisant 0 si ce n’est pas un nombre, et conserve le résultat dans _age.
Affiche That is 35 in dog years pour un âge de 5 : l’âge multiplié par 7.

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> {
  String _ageText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dog Years')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your age',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _ageText = value;
                });
              },
            ),
            const SizedBox(height: 24),
            Text('That is ? in dog years', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}