Números desde un campo de texto

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

Un campo siempre contiene un String, incluso cuando muestra dígitos: '12' es texto, y '12' * 7 no es 84. Para hacer cálculos con él, conviértelo en un int:

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

null significa «ningún valor»: 'hello' no es un número, así que no hay ninguno. El tipo del resultado es int?, un int o null. Antes de hacer cálculos, asígnale un valor alternativo para usar, con ??:

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

Lee a ?? b como «a, o b si a es null». También existe int.parse, sin «try», pero detiene la aplicación con un error si el texto no es un número, y la gente escribe todo tipo de cosas.

En un teléfono, keyboardType: TextInputType.number abre un teclado de dígitos, así que la gente casi nunca escribe letras.

Desafío

Intermedio

Haz que el campo abra el teclado numérico.
En onChanged, convierte el texto en un int con int.tryParse, usa 0 cuando no sea un número y guárdalo en _age.
Muestra That is 35 in dog years para una edad de 5: la edad multiplicada por 7.

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