Числа из текстового поля
Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 25 из 34.
Поле всегда содержит String, даже если в нём отображаются цифры: '12' — это текст, а '12' * 7 — не 84. Чтобы выполнять вычисления с этим значением, преобразуй его в int:
int.tryParse('12') // 12
int.tryParse('hello') // nullnull означает «нет значения»: 'hello' — не число, поэтому значения нет. Тип результата — 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. - Для возраста 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)),
],
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Добавляем интерактивность
1Кнопки
Ваша первая кнопкаВывод в консольТекстовые и контурные кнопкиКнопки с иконкамиПлавающая кнопка действия7Переключатели и ползунки
Включаем и выключаем переключателемОтмечаем флажокВыбираем значение ползунком3Виджеты с состоянием
Свой класс виджетаПоказать SnackBarsetState перерисовывает экранСоздание StatefulWidgetСчётчик вверх и внизHot Reload сохраняет состояние6Текстовые поля
Ваше первое текстовое полеРеагируем на вводЧитаем поле с помощью ControllerЧисла из текстового поляДесятичные числа с toStringAsFixedПотренируйтесь самостоятельно: Онлайн-компилятор Flutter