Как использовать виджет автозаполнения во Flutter?

В некоторых случаях было бы полезно, если бы вы могли предоставить клиентам список вариантов на выбор, если у вас есть текстовое поле в вашем приложении Flutter. В результате пользователям не нужно вводить весь текст, что улучшает взаимодействие с пользователем.

Поэтому для этого мы увидим в этой статье виджет автозаполнения. Пользователь может вводить текст и выбирать из списка вариантов с помощью этого виджета. Вы должны вызвать конструктор, чтобы использовать виджет автозаполнения. Получение поддержки от специализированного разработчика Flutter уменьшит количество сбоев в реализации виджета. Инженер Flutter также поможет в создании приложений корпоративного уровня.

const Autocomplete‹T расширяет объект›(

{Ключ? ключ,

требуется AutocompleteOptionsBuilder‹T› optionsBuilder,

AutocompleteOptionToString‹T› displayStringForOption = RawAutocomplete.defaultStringForOption,

АвтозаполнениеFieldViewBuilder fieldViewBuilder = _defaultFieldViewBuilder,

Автозаполнение при выборе‹T›? onSelected,

двойные параметрыMaxHeight = 200.0,

AutocompleteOptionsViewBuilder‹T›? опцииViewBuilder,

Значение редактирования текста? Начальное значение}

)

Свойства класса автозаполнения:

1. Ключевой ключ: ключ для виджета, который управляет тем, как он заменяется другим виджетом.

2. требуется AutocompleteOptionsBuilder‹ T › optionsBuilder: с учетом текущего значения TextEditingValue этот метод возвращает объекты доступных для выбора вариантов.

3. AutocompleteOptionToString‹ T › displayStringForOption: возвращает отображаемую строку параметра.

4. AutocompleteFieldViewBuilder fieldViewBuilder: используется для создания поля, значения которого используются для создания вариантов. Если значение не указано, по умолчанию будет создано стандартное текстовое поле в стиле материала.

5. AutocompleteOnSelected‹ T ›? onSelected: когда пользователь выбирает параметр, этот метод вызывается.

6. AutocompleteOptionsBuilder‹ T ›? optionsViewBuilder: создан из списка объектов опций для создания выбираемых виджетов опций.

Объект T — это универсальный тип класса Autocomplete. Это указывает на то, что элемент опции может быть любым объектом, а не только строкой.

OptionsBuilder — обязательный именованный аргумент. Для этого параметра вы должны передать функцию, которая возвращает список альтернатив, из которых пользователь может выбирать.

Создайте свой собственный AutocompleteOptionsBuilder и передайте его как optionsBuilder, чтобы настроить набор параметров, доступных для выбора. AutocompleteOptionsBuilder — это функция, которая принимает параметр TextEditingValue и возвращает T Iterable. Вы можете отфильтровать список отображаемых параметров на основе текущего текста, используя предоставленное значение TextEditingValue.

Автозаполнение‹Строка›(

optionsBuilder: (TextEditingValue textEditingValue) {

if (textEditingValue.text == '') {

return const Iterable‹String›.empty();

}

возврат data.where((String option) {

возврат option.contains(textEditingValue.text.toLowerCase());

});

},

onSelected: (выбор строки) {

debugPrint('Вы только что выбрали $selection');

},

);

Вы можете зафиксировать событие, отправив функцию обратного вызова в качестве аргумента onSelected, когда пользователь выбирает элемент из вариантов. Параметр T передается функции обратного вызова, которая возвращает значение void.

Давайте посмотрим на полный пример виджета автозаполнения.

импортировать ‘package:flutter/material.dart’;

void main() {

runApp(const MyApp());

}

класс MyApp расширяет StatelessWidget {

const MyApp({Ключ? Ключ}): super(Ключ: Ключ);

@переопределить

Сборка виджета (контекст BuildContext) {

возврат MaterialApp(

дом: Эшафот(

панель приложения: панель приложения (

title: const Text('Autocomplete Basic'),

),

тело: константный центр(

ребенок: Заполнение(

отступы: EdgeInsets.all(10.0),

ребенок: автозаполнение текста(),

),

);

}

класс AutocompleteText расширяет StatelessWidget {

const AutocompleteText({Key? key}): super(key: key);

static const List‹String› data = ‹String›[

'Адриан',

«Аксель»,

'Джонн',

'рысь',

«хамелеон»,

'Оливер',

«Уильям»,

'Итан',

«Эверетт»,

«Джейден»,

];