Виджет TextField

Виджет TextField рисует поле ввода с рамкой и подсказками. Текст хранят в TextEditingController или задают через onChanged. Оформление передают в InputDecoration, тип клавиатуры - в TextInputType.

Синтаксис

TextField(
	controller: controller,
	decoration: InputDecoration(
		labelText: 'abcde',
	),
	keyboardType: TextInputType.text,
)

Параметры

Параметр	Описание
`controller`	Контроллер текста и выделения. Тип `TextEditingController`.
`decoration`	Подпись, подсказка и рамка. Тип `InputDecoration`.
`keyboardType`	Какую клавиатуру открыть. Значения у `TextInputType`.
`obscureText`	Если `true`, символы скрывают точками для пароля.
`onChanged`	Вызывается при каждом изменении строки.
`maxLines`	Число строк. `1` для одной строки, больше для многострочного ввода.

Пример

Давайте выведем поле с подписью по центру экрана:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: Padding(
						padding: const EdgeInsets.all(24),
						child: TextField(
							decoration: const InputDecoration(
								labelText: 'abcde',
								border: OutlineInputBorder(),
							),
						),
					),
				),
			),
		),
	);
}

На экране появится рамка с подписью 'abcde' и мигающим курсором внутри.

Пример

Давайте подключим контроллер и выведем длину строки:

import 'package:flutter/material.dart';

void main()
{
	runApp(const MaterialApp(home: FieldDemo()));
}

class FieldDemo extends StatefulWidget
{
	const FieldDemo({super.key});

	@override
	State<FieldDemo> createState() => _FieldDemoState();
}

class _FieldDemoState extends State<FieldDemo>
{
	final controller = TextEditingController(text: '12345');

	@override
	void dispose()
	{
		controller.dispose();
		super.dispose();
	}

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: Column(
					mainAxisSize: MainAxisSize.min,
					children: [
						TextField(
							controller: controller,
							decoration: const InputDecoration(
								hintText: 'abcde',
							),
						),
						Text('len: ${controller.text.length}'),
					],
				),
			),
		);
	}
}

На экране поле уже содержит '12345', под ним подпись с числом символов.

Смотрите также

виджет TextFormField,
который добавляет проверку внутри формы
класс TextEditingController,
который хранит текст поля
класс InputDecoration,
который задаёт подпись и рамку
класс TextInputType,
который выбирает раскладку клавиатуры