מספרים מתוך שדה טקסט

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 25 מתוך 34.

שדה תמיד מכיל String, גם כשהוא מציג ספרות: '12' הוא טקסט, ו־'12' * 7 אינו 84. כדי לחשב איתו, המירו אותו ל־int:

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

null פירושו „אין ערך”: 'hello' אינו מספר, ולכן אין ערך. סוג התוצאה הוא int?, כלומר int או null. לפני שאתם מחשבים, תנו לו ערך חלופי לשימוש, בעזרת ??:

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

קראו את a ?? b כך: „a, או b אם a הוא null”. יש גם את 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)),
          ],
        ),
      ),
    );
  }
}