الأعداد العشرية باستخدام toStringAsFixed

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 26 من 34.

العدد الذي يحتوي على فاصلة عشرية هو double. وتتم قراءته من النص بالطريقة نفسها، باستخدام double.tryParse:

double.tryParse('2.5') ?? 0   // 2.5
int.tryParse('2.5') ?? 0      // 0: ليس عددًا صحيحًا

غالبًا ما تُنتج العمليات الحسابية على الأعداد العشرية أرقامًا طويلة بعد الفاصلة: 5 * 0.621371 تساوي 3.106855، و10 / 3 تساوي 3.3333333333333335. لعرض عدد ثابت من المنازل العشرية، استخدم toStringAsFixed. فهي تقرّب العدد وتُعيد سلسلة نصية:

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

لا تحتوي لوحة الأرقام على فاصلة عشرية افتراضيًا. وتضيف TextInputType.numberWithOptions(decimal: true) فاصلةً عشرية.

التحدي

متوسط

يحوّل التطبيق الكيلومترات إلى أميال، لكنه يقرأ الأعداد الصحيحة فقط ويعرض أعدادًا عشرية طويلة.

اقرأ قيمة الحقل باستخدام double.tryParse، لكي تعمل القيمة 2.5، واجعل _km من النوع double.
اجعل لوحة مفاتيح الحقل لوحة أرقام تتضمن فاصلة عشرية.
اعرض الأميال بمنزلتين عشريتين: That is 3.11 miles مقابل 5 كم.

جرّب بنفسك

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