Jeroen Leenarts
119 lines
3.4 KiB
Plaintext
119 lines
3.4 KiB
Plaintext
---
|
|
id: autocomplete_triggers
|
|
title: Adding Custom Autocomplete Triggers
|
|
---
|
|
|
|
Adding Custom Autocomplete Triggers
|
|
|
|
### Introduction
|
|
|
|
The [StreamMessageInput](../stream_chat_flutter/stream_message_input.mdx) widget provides a way to add custom autocomplete triggers using the `StreamMessageInput.customAutocompleteTriggers` property.
|
|
|
|
By default we provide autocomplete triggers for mentions and commands, but it's very easy to add your custom ones.
|
|
|
|
### Add Emoji Autocomplete Trigger
|
|
|
|
To add a custom emoji autocomplete trigger, you must first create an `AutoCompleteOptions` widget.
|
|
This widget will be used to show the autocomplete options.
|
|
|
|
For this example we're using two external dependencies:
|
|
|
|
- [emojis](https://pub.dev/packages/emojis)
|
|
- [`substring_highlight`](https://pub.dev/packages/substring_highlight)
|
|
|
|
```dart
|
|
import 'package:emojis/emoji.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
|
|
import 'package:substring_highlight/substring_highlight.dart';
|
|
|
|
/// Overlay for displaying emoji that can be used
|
|
class StreamEmojiAutocompleteOptions extends StatelessWidget {
|
|
/// Constructor for creating a [StreamEmojiAutocompleteOptions]
|
|
const StreamEmojiAutocompleteOptions({
|
|
super.key,
|
|
required this.query,
|
|
this.onEmojiSelected,
|
|
});
|
|
|
|
/// Query for searching emoji.
|
|
final String query;
|
|
|
|
/// Callback called when an emoji is selected.
|
|
final ValueSetter<Emoji>? onEmojiSelected;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final emojis = Emoji.all().where((it) {
|
|
final normalizedQuery = query.toUpperCase();
|
|
final normalizedShortName = it.shortName.toUpperCase();
|
|
|
|
return normalizedShortName.contains(normalizedQuery);
|
|
});
|
|
|
|
if (emojis.isEmpty) return const SizedBox.shrink();
|
|
|
|
return StreamAutocompleteOptions<Emoji>(
|
|
options: emojis,
|
|
optionBuilder: (context, emoji) {
|
|
final themeData = Theme.of(context);
|
|
return ListTile(
|
|
dense: true,
|
|
horizontalTitleGap: 0,
|
|
leading: Text(
|
|
emoji.char,
|
|
style: themeData.textTheme.headline6!.copyWith(
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
title: SubstringHighlight(
|
|
text: emoji.shortName,
|
|
term: query,
|
|
textStyleHighlight: themeData.textTheme.headline6!.copyWith(
|
|
color: Colors.yellow,
|
|
fontSize: 14.5,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
textStyle: themeData.textTheme.headline6!.copyWith(
|
|
fontSize: 14.5,
|
|
),
|
|
),
|
|
onTap: onEmojiSelected == null ? null : () => onEmojiSelected!(emoji),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Now it's time to use the `StreamEmojiAutocompleteOptions` widget.
|
|
|
|
```dart
|
|
StreamMessageInput(
|
|
customAutocompleteTriggers: [
|
|
StreamAutocompleteTrigger(
|
|
trigger: ':',
|
|
minimumRequiredCharacters: 2,
|
|
optionsViewBuilder: (
|
|
context,
|
|
autocompleteQuery,
|
|
messageEditingController,
|
|
) {
|
|
final query = autocompleteQuery.query;
|
|
return StreamEmojiAutocompleteOptions(
|
|
query: query,
|
|
onEmojiSelected: (emoji) {
|
|
// accepting the autocomplete option.
|
|
StreamAutocomplete.of(context).acceptAutocompleteOption(
|
|
emoji.char,
|
|
keepTrigger: false,
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
```
|