Zahlen aus einem Textfeld

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 25 von 34.

Ein Feld enthält immer einen String, selbst wenn es Ziffern anzeigt: '12' ist Text, und '12' * 7 ist nicht 84. Um damit zu rechnen, wandelst du ihn in einen int um:

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

null bedeutet „kein Wert“: 'hello' ist keine Zahl, also gibt es keinen. Der Typ des Ergebnisses ist int?, also ein int oder null. Bevor du rechnest, gib ihm mit ?? einen Wert, der stattdessen verwendet wird:

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

Lies a ?? b als „a oder b, wenn a null ist“. Es gibt auch int.parse ohne „try“, aber bei Text, der keine Zahl ist, wird die App mit einem Fehler beendet, und Menschen geben alle möglichen Dinge ein.

Auf einem Smartphone öffnet keyboardType: TextInputType.number eine Zifferntastatur, sodass Menschen nur selten überhaupt Buchstaben eingeben.

Aufgabe

Mittel

Lass das Feld die Zifferntastatur öffnen.
Wandle in onChanged den Text mit int.tryParse in einen int um, verwende 0, wenn es sich nicht um eine Zahl handelt, und speichere den Wert in _age.
Zeige bei einem Alter von 5 That is 35 in dog years an: das Alter mal 7.

Probier es selbst

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