A highly customizable Flutter widget for detecting and handling interactive triggers like mentions, hashtags, and links within a text field. It offers a seamless way to manage suggestion overlays with full generic type support and built-in markup parsing.
Follow these steps to integrate Flutter Trigger Input into your project:
- Initialize the Controller Create an instance of TriggerInputController. This controller manages the detection logic and the state of your input field.
final TriggerInputController _controller = TriggerInputController();- Add the TriggerInputField Widget Place the TriggerInputField in your widget tree. Pass the _controller and your initial list of suggestions (initSuggestList). This widget automatically detects trigger characters (like @) as the user types.
TriggerInputField(
controller: _controller,
initSuggestList: suggestions, // Your list of SuggestionInfo objects
),- Listen for Suggestions To display a custom suggestion UI (like a ListView above the keyboard), listen to the suggestionInfos notifier. It updates in real-time based on the user's search keyword.
ValueListenableBuilder<List<SuggestionInfo>>(
valueListenable: _controller.suggestionInfos,
builder: (context, suggestions, child) {
if (suggestions.isEmpty) return const SizedBox.shrink();
return MySuggestionList(items: suggestions);
},
)If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.