chips_input_autocomplete

Description:

chips input autocomplete

Chips Input Autocomplete #

📚 Table of Contents #

Features
Getting Started
Usage
Examples
Parameters
Author

🚀 Features #

Dynamic Chip Creation: Users can type to create chips dynamically. Ideal for tags, contacts, or any categorization.
Autocomplete Suggestions: Offers suggestions as the user types, based on predefined options.
Customizable Appearance: Full control over the chip's appearance, including background, border, and text colors.
Form Integration: Easily integrates with forms, allowing for validation and submission of chip data.
Extensive Customization: Beyond styling, customize behavior like adding chips on selection, limiting selections, and more.

🏁 Getting Started #
To get started with chips_input_autocomplete, check out the Installation and Usage. Detailed documentation under API reference.
🛠️ Usage #
To use chips_input_autocomplete in your Flutter project, follow these steps:
Basic Chip Input #
This example demonstrates how to create a basic chip input field where users can type to create chips dynamically.
const List<String> yourOptionsList = ['Option 1', 'Option 2', 'Option 3'];

ChipsInputAutocomplete(
options: yourOptionsList,
)
copied to clipboard
Validate Input #
Only allow chips that match predefined options. This example uses a validation method to ensure only valid options are added as chips.
ChipsInputAutocomplete(
options: yourOptionsList,
validateInputMethod: (String? input) {
if (yourOptionsList.contains(input)) {
return null; // Input is valid
} else {
return 'Only predefined options are allowed'; // Input is invalid
}
},
)
copied to clipboard
Get chips data #
Use a controller to get the selected chips data.
final ChipsAutocompleteController controller = ChipsAutocompleteController();

ChipsInputAutocomplete(
controller: controller,
)

// Get selected chips data
List<String> selectedChips = controller.chips; // selectedChips = ['Chiptext 1', 'Chiptext 2']
copied to clipboard
Async fetched options #
Use a controller to manage the options asynchronously. This example fetches options from an API and sets them in the controller.
final ChipsAutocompleteController controller = ChipsAutocompleteController();

@override
void initState() {
getTagsOptions();
super.initState();
}

Future<void> getTagsOptions() async {
controller.options = await fetchTags();
}

ChipsInputAutocomplete(
controller: controller,
)
copied to clipboard
For more detailed examples and usage, refer to the pub.dev example.
⚙️ Usage Examples #
The appearance may differ from the current default theme. The following examples demonstrate the various configurations and behaviors of the chips_input_autocomplete widget. For current appearance, refer to the pub.dev example.




🧷 Parameters #
Basic Configuration #

controller: Manages chips, autocomplete options, and the textfield.
options: A list of strings for autocomplete options. Can also be set via the controller.
createCharacter: Character that triggers chip creation. (default: ,)
placeChipsSectionAbove: Determines if the chips section is above / left or below / right the textfield.

Chip Appearance #

secondaryTheme: When true, uses a secondary theme for the chips. Based on the selected chip theme of material design 3.
chipTheme: Theme for the chips. Defaults to material design 3. More Details under ChipThemeData.
deleteIcon: Icon for deleting a chip. Defaults to a close icon. Can be null to remove.
chipClipBehavior : Clip behavior for the chips. (default: Clip.none)
deleteButtonTooltipMessage : Tooltip message for the delete button. (default: Delete)

Text Field Appearance and Configuration #

focusNode: FocusNode for the textfield.
decorationTextField: Style of the textfield.
keyboardType: Keyboard type for the textfield.
enableSuggestions: Whether to show suggestions.
showCursor: Whether to show the cursor.
cursorWidth: Width of the cursor.
cursorColor: Color used for the cursor.
cursorRadius: Radius of the cursor.
cursorHeight: Height of the cursor.

Container Appearance #

widgetContainerDecoration: Decoration for the main widget container.
paddingInsideWidgetContainer: Padding inside the main widget container.
spacing: Spacing between chips. (default: 5.0)
runSpacing: Spacing between lines of chips. If unset, defaults to spacing.
optionsMaxWidth: Maximum width of the options view. Defaults to textfield width if unset.

Additional Configuration #

initialChips: Initial chips to be displayed.
autoFocus: Whether the widget should autofocus.
formKey: Form key for accessing or validating the form outside the widget.
validateInputMethod: Validation method returning a string if input is invalid. Null means always valid.
validateChipsMethod: Validation method returning a string if all chips are invalid. Null means always valid.
autovalidateMode: Autovalidate mode for the form. (default: AutovalidateMode.disabled)
enabled: Whether the widget and textfield is enabled.
addChipOnSelection: Adds a chip when an option is selected. If false, adds the option to the text field.
showClearButton: Whether to show the clear IconButton.
clearWithConfirm: Whether to show a confirmation dialog when clearing all chips.
eraseKeyLabel: Key label used for erasing a chip. Defaults to Backspace.
showOnlyUnselectedOptions: Whether to show only options that are not already selected. (default: true)

Callbacks and Event Handling #

onChanged: Callback when the chips value changes.
onChangedTextField: Callback when the text field changes.
onEditingComplete: Callback when editing is complete.
onSaved: Callback when the form is saved.
onChipDeleted: Callback when a chip is deleted, with chip content and index.
onChipAdded: Callback when a chip is added, with chip content.
onChipsCleared: Callback when all chips are cleared.
useDefaultOnChipDeleted: Whether to use the default onChipDeleted method. Maybe set to false for a different logic. For example, when chips are updated from a different source.
useDefaultOnChipAdded: Whether to use the default onChipAdded method. Maybe set to false for a different logic. For example, when chips are updated from a different source.
useDefaultOnChipsCleared: Whether to use the default onChipsCleared method. Maybe set to false for a different logic. For example, when chips are updated from a different source.

🧑‍💻 Author #
@BruckCode @JohannesPauli