Angka dari Kolom Teks

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 25 dari 34.

Sebuah field selalu berisi String, meskipun menampilkan angka: '12' adalah teks, dan '12' * 7 bukan 84. Untuk menghitung dengannya, ubah menjadi int:

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

null berarti "tidak ada nilai": 'hello' bukan angka, jadi tidak ada nilainya. Tipe hasilnya adalah int?, yaitu int atau null. Sebelum menghitung, berikan nilai pengganti untuk digunakan dengan ??:

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

Baca a ?? b sebagai "a, atau b jika a bernilai null". Ada juga int.parse, tanpa "try", tetapi fungsi ini menghentikan aplikasi dengan error jika teksnya bukan angka, dan orang bisa mengetik macam-macam.

Di ponsel, keyboardType: TextInputType.number membuka keyboard angka, sehingga orang jarang mengetik huruf.

Tantangan

Sedang

Buat field membuka keyboard angka.
Di onChanged, ubah teks menjadi int dengan int.tryParse, gunakan 0 jika teks bukan angka, lalu simpan nilainya di _age.
Tampilkan That is 35 in dog years untuk usia 5: usia dikali 7.

Coba sendiri

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