Menu
CoddyTech

Числа из текстового поля

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 25 из 34.

Поле всегда содержит String, даже если в нём отображаются цифры: '12' — это текст, а '12' * 7 — не 84. Чтобы выполнять вычисления с этим значением, преобразуй его в int:

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

null означает «нет значения»: 'hello' — не число, поэтому значения нет. Тип результата — int?, то есть целое число или null. Прежде чем выполнять вычисления, задай значение, которое будет использоваться вместо него, с помощью ??:

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

Читай a ?? b как «a или b, если a равно null». Есть также int.parse, без «try», но при вводе текста, который не является числом, приложение останавливается с ошибкой, а люди вводят самые разные вещи.

На телефоне keyboardType: TextInputType.number открывает цифровую клавиатуру, поэтому люди почти никогда не вводят буквы.

challenge icon

Задание

Средне
  • Сделай так, чтобы при выборе поля открывалась цифровая клавиатура.
  • В onChanged преобразуй текст в int с помощью int.tryParse, используя 0, если это не число, и сохрани результат в _age.
  • Для возраста 5 покажи That is 35 in dog years: возраст, умноженный на 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)),
          ],
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Добавляем интерактивность

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter