Desimal dengan toStringAsFixed

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

Angka dengan titik desimal adalah double. Angka ini dibaca dari teks dengan cara yang sama, menggunakan double.tryParse:

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0: bukan bilangan bulat

Perhitungan dengan double sering menghasilkan angka desimal yang panjang: 5 * 0.621371 adalah 3.106855, dan 10 / 3 adalah 3.3333333333333335. Untuk menampilkan jumlah angka desimal yang tetap, gunakan toStringAsFixed. Fungsi ini membulatkan angka dan mengembalikan string:

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

Keyboard angka tidak memiliki titik desimal secara bawaan. TextInputType.numberWithOptions(decimal: true) menambahkan titik desimal.

Tantangan

Sedang

Aplikasi ini mengubah kilometer menjadi mil, tetapi hanya membaca bilangan bulat dan menampilkan angka desimal yang panjang.

Baca kolom dengan double.tryParse, agar 2.5 bisa digunakan, dan jadikan _km bertipe double.
Atur keyboard angka dengan titik desimal untuk kolom tersebut.
Tampilkan jarak dalam mil dengan dua angka desimal: That is 3.11 miles untuk 5 km.

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