Số từ trường văn bản

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 25 trên 34.

Một trường luôn chứa giá trị kiểu String, ngay cả khi nó hiển thị chữ số: '12' là văn bản, còn '12' * 7 không phải là 84. Để tính toán với giá trị này, hãy chuyển nó thành int:

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

null nghĩa là “không có giá trị”: 'hello' không phải là số, nên không có giá trị nào. Kiểu dữ liệu của kết quả là int?, tức là một số nguyên hoặc null. Trước khi tính toán, hãy gán cho nó một giá trị thay thế để sử dụng, bằng ??:

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

Đọc a ?? b là “a, hoặc b nếu a là null”. Ngoài ra còn có int.parse, không có “try”, nhưng hàm này sẽ dừng ứng dụng và báo lỗi nếu gặp văn bản không phải là số, mà mọi người có thể nhập đủ thứ.

Trên điện thoại, keyboardType: TextInputType.number mở bàn phím số, nên mọi người hiếm khi nhập chữ cái.

Thử thách

Trung bình

Đặt trường nhập liệu để bàn phím số mở ra.
Trong onChanged, chuyển văn bản thành int bằng int.tryParse, dùng 0 nếu giá trị không phải là số, rồi lưu vào _age.
Hiển thị That is 35 in dog years khi tuổi là 5: lấy tuổi nhân với 7.

Tự làm thử

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