Số thập phân với toStringAsFixed

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 26 trên 34.

Một số có dấu thập phân là số double. Bạn có thể đọc số đó từ văn bản theo cách tương tự, với double.tryParse:

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0: không phải số nguyên

Các phép tính với số thực thường cho kết quả có nhiều chữ số thập phân: 5 * 0.621371 là 3.106855, còn 10 / 3 là 3.3333333333333335. Để hiển thị số chữ số thập phân cố định, hãy dùng toStringAsFixed. Phương thức này làm tròn và trả về một chuỗi:

(10 / 3).toStringAsFixed(2)   // '3.33'
3.106855.toStringAsFixed(1)   // '3.1'

Bàn phím số mặc định không có dấu thập phân. TextInputType.numberWithOptions(decimal: true) sẽ thêm dấu thập phân.

Thử thách

Trung bình

Ứng dụng đổi kilomet sang dặm, nhưng chỉ đọc số nguyên và hiển thị nhiều chữ số thập phân.

Đọc trường bằng double.tryParse để 2.5 hoạt động, và đổi _km thành double.
Đặt bàn phím số có dấu thập phân cho trường này.
Hiển thị dặm với hai chữ số thập phân: That is 3.11 miles cho 5 km.

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> {
  int _km = 0;

  @override
  Widget build(BuildContext context) {
    final double miles = _km * 0.621371;
    return Scaffold(
      appBar: AppBar(title: const Text('Distance')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: 'Kilometers',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _km = int.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 24),
            Text('That is $miles miles', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}