الأرقام من حقل نص

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

يحتوي الحقل دائمًا على String، حتى عندما يعرض أرقامًا: '12' نص، و'12' * 7 لا تساوي 84. لإجراء العمليات الحسابية عليه، حوّله إلى int:

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

تعني null «لا توجد قيمة»: فـ'hello' ليس عددًا، لذا لا توجد قيمة. نوع النتيجة هو int?، أي عدد صحيح أو قيمة خالية. قبل إجراء العملية الحسابية، أعطه قيمة بديلة تستخدمها، مع ??:

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

اقرأ a ?? b هكذا: «a، أو b إذا كانت a خالية». توجد أيضًا int.parse، من دون try، لكنها توقف التطبيق مع ظهور خطأ عند إدخال نص ليس عددًا، والناس يكتبون شتى الأشياء.

على الهاتف، يؤدي keyboardType: TextInputType.number إلى فتح لوحة مفاتيح للأرقام، لذا نادرًا ما يكتب الناس أحرفًا.

التحدي

متوسط

اجعل الحقل يفتح لوحة مفاتيح الأرقام.
في onChanged، حوّل النص إلى int باستخدام int.tryParse، واستخدم 0 إذا لم يكن رقمًا، واحفظه في _age.
اعرض That is 35 in dog years عندما يكون العمر 5: العمر مضروبًا في 7.

جرّب بنفسك

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