Liczby z pola tekstowego

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 25 z 34.

Pole zawsze przechowuje wartość typu String, nawet gdy wyświetla cyfry: '12' to tekst, a '12' * 7 nie daje 84. Aby wykonać na nim obliczenia, zamień go na int:

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

null oznacza „brak wartości”: 'hello' nie jest liczbą, więc żadnej wartości nie ma. Typ wyniku to int?, czyli int albo null. Zanim wykonasz obliczenia, podaj wartość, której użyjesz zamiast niej, za pomocą ??:

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

Odczytuj a ?? b jako „a albo b, jeśli a ma wartość null”. Istnieje też int.parse, bez „try”, ale zatrzymuje aplikację z błędem, gdy tekst nie jest liczbą, a ludzie wpisują najróżniejsze rzeczy.

Na telefonie keyboardType: TextInputType.number otwiera klawiaturę z cyframi, więc ludzie rzadko wpisują litery.

Wyzwanie

Średni

Spraw, aby pole otwierało klawiaturę numeryczną.
W onChanged zamień tekst na int za pomocą int.tryParse, użyj 0, jeśli tekst nie jest liczbą, i zapisz wynik w _age.
Wyświetl That is 35 in dog years dla wieku 5 lat: wiek pomnożony przez 7.

Spróbuj swoich sił

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