Виджет Autocomplete

Виджет Autocomplete принимает optionsBuilder и рисует поле через fieldViewBuilder. Список вариантов показывают в optionsViewBuilder.

Синтаксис

Autocomplete<String>(
	optionsBuilder: (text) => const ['abcde', '12345'],
	fieldViewBuilder: (context, controller, focusNode, onFieldSubmitted) {
		return TextField(controller: controller, focusNode: focusNode);
	},
)

Параметры

Параметр	Описание
`optionsBuilder`	Возвращает `Iterable` вариантов для текущего ввода.
`fieldViewBuilder`	Строит поле ввода, обычно `TextField`.
`onSelected`	Вызывается, когда пользователь выбрал вариант.
`optionsViewBuilder`	Кастомный список подсказок под полем.
`displayStringForOption`	Текст пункта в списке.

Пример

Давайте выведем поле с двумя подсказками:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: SizedBox(
					width: 240,
					child: Autocomplete<String>(
						optionsBuilder: (text) {
							const all = ['abcde', '12345'];
							if (text.isEmpty) return all;
							return all.where((o) => o.startsWith(text));
						},
					),
				),
				),
			),
		),
	);
}

На экране поле ввода, при фокусе появится список с 'abcde' и '12345'.

Пример

Давайте сузим список по префиксу:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: SizedBox(
					width: 240,
					child: Autocomplete<String>(
						initialValue: TextEditingValue(text: '12'),
						optionsBuilder: (text) => ['12345'].where((o) => o.startsWith(text)),
					),
				),
				),
			),
		),
	);
}

На экране в поле уже '12', в списке останется вариант '12345'.

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

виджет TextField,
который принимает текст с клавиатуры
класс TextEditingController,
который хранит текст и выделение
класс FocusNode,
который хранит фокус поля
виджет TextFormField,
который связывает поле с формой