Ответ
Основной виджет для ввода текста в Flutter — TextField и его расширенная форма TextFormField для работы с формами. Также есть варианты для iOS-стиля.
1. TextField: Базовый виджет для однострочного или многострочного ввода.
TextField(
controller: myController, // Для управления текстом
decoration: InputDecoration(
labelText: 'Имя',
hintText: 'Введите ваше имя',
border: OutlineInputBorder(), // Рамка
prefixIcon: Icon(Icons.person),
),
keyboardType: TextInputType.emailAddress, // Тип клавиатуры
obscureText: true, // Для пароля
maxLines: 3, // Многострочное поле
onChanged: (text) { print('Текст изменился: $text'); },
)
2. TextFormField: Наследуется от TextField и интегрируется с Form для валидации.
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Поле обязательно для заполнения';
}
return null; // Валидация пройдена
},
onSaved: (value) { _name = value; },
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// Обработка данных
}
},
child: Text('Отправить'),
),
],
),
)
3. CupertinoTextField: Виджет в стиле iOS (Cupertino).
CupertinoTextField(
placeholder: 'Поиск',
prefix: Icon(CupertinoIcons.search),
clearButtonMode: OverlayVisibilityMode.editing, // Кнопка очистки
)
4. Autocomplete (из пакета material.dart): Виджет с автодополнением, появившийся в стабильном виде в более поздних версиях Flutter.
Дополнительные возможности и пакеты:
- Обработка ввода:
TextEditingControllerдля чтения/установки текста,FocusNodeдля управления фокусом. - Маски ввода: Пакеты
flutter_masked_text2илиinput_formattersсTextInputFormatterдля форматирования (телефон, дата). - Богатый текст (Rich Editor): Пакеты
flutter_quillилиzefyr. - Поиск с подсказками: Пакет
flutter_typeahead.
Выбор виджета зависит от дизайна (Material/Cupertino) и необходимости валидации. TextFormField — это стандарт для форм в приложениях под Android.
Ответ 18+ 🔞
А, ну так, значит, про поля для ввода в Flutter. Ёпта, смотри, тут в принципе всё просто, но есть нюансы, как говорится. Основных виджета, на которых всё держится — два, как близнецы, но один для простоты, а второй — для серьёзных дел с проверками.
1. TextField: Это, типа, база, голый костяк. Хочешь просто строку ввести — он твой друг. Хочешь пароль скрыть — пожалуйста. Даже в несколько строк развернуть можно.
TextField(
controller: myController, // Ну это чтобы за текстом следить, как за ребёнком
decoration: InputDecoration(
labelText: 'Имя',
hintText: 'Введите ваше имя',
border: OutlineInputBorder(), // Классическая рамка, без неё как-то голо
prefixIcon: Icon(Icons.person),
),
keyboardType: TextInputType.emailAddress, // Чтобы клавиатура с @ сразу выскакивала
obscureText: true, // Включил — и пароль точками, секретность полная
maxLines: 3, // А вот так из строки — в целое письмо
onChanged: (text) { print('Текст изменился: $text'); }, // Слушаем каждое чириканье
)
2. TextFormField: А вот это уже тяжёлая артиллерия. Наследник первого, но с гонором. Создан специально, чтобы встраиваться в Form и устраивать проверки, как на таможне. Чувствуешь подвох? Я — да.
final _formKey = GlobalKey<FormState>(); // Ключик от всей формы, без него нихуя
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) { // Вот этот чувак — вышибала. Он решает, пройдёт текст или нет.
if (value == null || value.isEmpty) {
return 'Поле обязательно для заполнения'; // Попался, голодранец!
}
return null; // Валидация пройдена, проходи, хороший человек
},
onSaved: (value) { _name = value; }, // Сохраняем, когда всё чики-пуки
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) { // Проверяем всех вышибал
_formKey.currentState!.save(); // Сохраняем всё, что навводили
// Ну и дальше делаем что надо с данными
}
},
child: Text('Отправить'),
),
],
),
)
Вот это связка, блядь, — Form + TextFormField + validator — это и есть стандартный способ заставить пользователя ввести что-то осмысленное, а не "ася киса".
3. CupertinoTextField: Ну а это для тех, у кого iPhone в кармане чешется. Виджет в стиле iOS, выглядит строго и по-яблочному.
CupertinoTextField(
placeholder: 'Поиск',
prefix: Icon(CupertinoIcons.search), // Иконка-лупа, куда ж без неё
clearButtonMode: OverlayVisibilityMode.editing, // Кнопка "очистить" появляется сама, когда печатаешь — удобно, ёпта
)
4. Autocomplete: Штука, которая додумывает за пользователя. Появилась в стабильном виде не так давно, из коробки, что радует.
Чего ещё можно накрутить, если мало:
- Обработка ввода:
TextEditingController— это твой пульт управления текстом.FocusNode— чтобы фокус туда-сюда переключать, как прожектором. - Маски ввода: Хочешь, чтобы телефон вводили в формате? Бери пакеты вроде
flutter_masked_text2или колдуй сTextInputFormatter. Без этого — дичь, люди введут что угодно. - Богатый текст (Rich Editor): Если нужно не просто текст, а целый документ с жирным шрифтом и картинками — это тебе не сюда. Смотри в сторону
flutter_quill. Там уже совсем другой уровень, ебать копать. - Умный поиск с подсказками: Пакет
flutter_typeahead— мощная штука, выпадающий список на основе того, что пользователь начал вводить.
Итог, чувак: Выбираешь по обстановке. Если делаешь под андроид и нужна форма с проверками — TextFormField твой брат. Если интерфейс в стиле iOS — CupertinoTextField. Для всего остального есть базовый TextField и куча пакетов на все случаи жизни. Главное — не запутаться.