Multi Trigger Autocomplete

https://github.com/xsahil03x/multi_trigger_autocomplete
Admin
A Flutter widget that adds trigger-based autocomplete functionality to applications, supporting...
Tokens:1,702
Snippets:7
Trust Score:9.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Opening iOS Project in Xcode

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md

This command is used to open the iOS specific part of a Flutter project in Xcode. This allows developers to manage assets, configure build settings, and perform other iOS-specific development tasks directly within Xcode.

```Shell
open ios/Runner.xcworkspace
```

--------------------------------

### Importing Multi Trigger Autocomplete Package

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This Dart snippet shows the necessary import statement to use the `multi_trigger_autocomplete` package in a Dart file. It makes the `MultiTriggerAutocomplete` widget and related classes available for use within your Flutter application's code.

```Dart
import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';
```

--------------------------------

### Adding Multi Trigger Autocomplete Dependency

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This snippet shows how to add the `multi_trigger_autocomplete` package as a dependency in a Flutter project's `pubspec.yaml` file. Replace `[version]` with the latest available version of the package to ensure you are using the most up-to-date features and bug fixes.

```YAML
dependencies:
  multi_trigger_autocomplete: ^[version]
```

--------------------------------

### Wrapping MaterialApp with Portal Widget

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This Dart snippet demonstrates how to wrap the top-most widget, typically `MaterialApp` or `CupertinoApp`, with the `Portal` widget. This is a prerequisite for `multi_trigger_autocomplete` as it uses `flutter_portal` to render autocomplete options above other widgets, ensuring proper overlay behavior and correct positioning of the suggestions.

```Dart
Portal(
  child: MaterialApp(
    ...
  )
);
```

--------------------------------

### Implementing MultiTriggerAutocomplete with Multiple Triggers

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This Dart snippet illustrates the core usage of the `MultiTriggerAutocomplete` widget. It configures the widget with `optionsAlignment` and defines three `AutocompleteTrigger` instances for '@' (mentions), '#' (hashtags), and ':' (emojis), each with a custom `optionsViewBuilder` and logic to accept selected options. It also specifies a `fieldViewBuilder` to integrate a custom text field, `ChatMessageTextField`, for input.

```Dart
MultiTriggerAutocomplete(
  optionsAlignment: OptionsAlignment.topStart,
  autocompleteTriggers: [
    // Add the triggers you want to use for autocomplete
    AutocompleteTrigger(
      trigger: '@',
      optionsViewBuilder: (context, autocompleteQuery, controller) {
        return MentionAutocompleteOptions(
          query: autocompleteQuery.query,
          onMentionUserTap: (user) {
            final autocomplete = MultiTriggerAutocomplete.of(context);
            return autocomplete.acceptAutocompleteOption(user.id);
          },
        );
      },
    ),
    AutocompleteTrigger(
      trigger: '#',
      optionsViewBuilder: (context, autocompleteQuery, controller) {
        return HashtagAutocompleteOptions(
          query: autocompleteQuery.query,
          onHashtagTap: (hashtag) {
            final autocomplete = MultiTriggerAutocomplete.of(context);
            return autocomplete
                .acceptAutocompleteOption(hashtag.name);
          },
        );
      },
    ),
    AutocompleteTrigger(
      trigger: ':',
      optionsViewBuilder: (context, autocompleteQuery, controller) {
        return EmojiAutocompleteOptions(
          query: autocompleteQuery.query,
          onEmojiTap: (emoji) {
            final autocomplete = MultiTriggerAutocomplete.of(context);
            return autocomplete.acceptAutocompleteOption(
              emoji.char,
              // Passing false as we don't want the trigger [:] to
              // get prefixed to the option in case of emoji.
              keepTrigger: false,
            );
          },
        );
      },
    ),
  ],
  // Add the text field widget you want to use for autocomplete
  fieldViewBuilder: (context, controller, focusNode) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ChatMessageTextField(
        focusNode: focusNode,
        controller: controller,
      ),
    );
  },
),
```

--------------------------------

### Defining AutocompleteTrigger in Dart

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This snippet illustrates how to define an `AutocompleteTrigger` for the `MultiTriggerAutocomplete` widget. It shows parameters such as `trigger`, `triggerOnlyAtStart`, `triggerOnlyAfterSpace`, `minimumRequiredCharacters`, and `optionsViewBuilder` to control when and how the autocomplete suggestions are displayed.

```Dart
AutocompleteTrigger(
  // The trigger string/character that will be used to trigger the
  // autocomplete.
  trigger: '@',
  
  // If true, the [trigger] should only be recognised at
  // the start of the input text.
  //
  // valid example: "@luke hello"
  // invalid example: "Hello @luke"
  triggerOnlyAtStart: false,
  
  // If true, the [trigger] should only be recognised after
  // a space.
  //
  // valid example: "@luke", "Hello @luke"
  // invalid example: "Hello@luke"
  triggerOnlyAfterSpace: true,
  
  // A minimum number of characters can be provided to only show
  // suggestions after the user has input enough characters.
  //
  // example:
  // "Hello @l" -> Shows zero suggestions.
  // "Hello @lu" -> Shows suggestions for @lu.
  minimumRequiredCharacters: 2,
  
  // The options view builder is used to build the options view
  // that will be shown when the [trigger] is detected.
  optionsViewBuilder: (context, autocompleteQuery, controller) {
    return MentionAutocompleteOptions(
      query: autocompleteQuery.query,
      onMentionUserTap: (user) {
        // Accept the autocomplete option.
        final autocomplete = MultiTriggerAutocomplete.of(context);
        return autocomplete.acceptAutocompleteOption(user.id);
      },
    );
  },
)
```

--------------------------------

### Configuring MultiTriggerAutocomplete in Dart

Source: https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/README.md

This snippet demonstrates how to configure the `MultiTriggerAutocomplete` widget in Dart. It covers various parameters like `autocompleteTriggers`, `optionsAlignment`, `optionsWidthFactor`, `debounceDuration`, `initialValue`, `textEditingController`, `focusNode`, and `fieldViewBuilder` to customize the autocomplete behavior and appearance.

```Dart
MultiTriggerAutocomplete(
  // Defines the autocomplete trigger that will be used to match the
  // text.
  autocompleteTriggers: autocompleteTriggers,
  
  // Defines the alignment of the options view relative to the
  // fieldView.
  //
  // By default, the options view is aligned to the bottom of the
  // fieldView.
  optionsAlignment: OptionsAlignment.topStart,
  
  // Defines the width to make the options as a multiple of the width
  // of the fieldView.
  //
  // Setting this to 1 makes the options view width matches the width
  // of the fieldView.
  //
  // Use null to remove this constraint.
  optionsWidthFactor: 1.0,
  
  // Defines the duration of the debounce period for the
  // [TextEditingController].
  //
  // This is the time between the last character typed and the matching
  // is performed.
  debounceDuration: const Duration(milliseconds: 350),
  
  // Defines the initial value to set in the internal
  // [TextEditingController].
  //
  // This value will be ignored if [TextEditingController] is provided.
  initialValue: const TextEditingValue(text: 'Hello'),
  
  // Defines the [TextEditingController] that will be used for the
  // fieldView.
  //
  // If this parameter is provided, then [focusNode] must also be
  // provided.
  textEditingController: TextEditingController(text: 'Hello'),
  
  // Defines the [FocusNode] that will be used for the fieldView.
  //
  // If this parameter is provided, then [textEditingController] must
  // also be provided.
  focusNode: FocusNode(),
  
  // Defines the fieldView that will be used to input the text.
  //
  // By default, a [TextFormField] is used.
  fieldViewBuilder: (context, controller, focusNode) {
    return TextField(
      controller: controller,
      focusNode: focusNode,
    );
  },
),
```
Tokens:
Raw