{"id":13549825,"url":"https://github.com/xsahil03x/multi_trigger_autocomplete","last_synced_at":"2025-08-04T12:33:43.230Z","repository":{"id":44678755,"uuid":"512941043","full_name":"xsahil03x/multi_trigger_autocomplete","owner":"xsahil03x","description":"A flutter widget to add trigger based autocomplete functionality to your app.","archived":false,"fork":false,"pushed_at":"2023-11-17T15:07:04.000Z","size":11744,"stargazers_count":84,"open_issues_count":8,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T18:52:03.451Z","etag":null,"topics":["autocomplete","autocomplete-search","autocomplete-suggestions","autocompletetextfield","autocompletetextview","command","dart","emoji","flutter","hashtag","mentions","trigger"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/multi_trigger_autocomplete","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xsahil03x.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-07-11T23:52:51.000Z","updated_at":"2025-03-09T19:52:39.000Z","dependencies_parsed_at":"2024-01-16T19:04:33.854Z","dependency_job_id":null,"html_url":"https://github.com/xsahil03x/multi_trigger_autocomplete","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"f0f687c74e2674a701836efaa71c024cc478ff1d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/xsahil03x/multi_trigger_autocomplete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fmulti_trigger_autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fmulti_trigger_autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fmulti_trigger_autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fmulti_trigger_autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xsahil03x","download_url":"https://codeload.github.com/xsahil03x/multi_trigger_autocomplete/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Fmulti_trigger_autocomplete/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268696894,"owners_count":24292382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","autocomplete-search","autocomplete-suggestions","autocompletetextfield","autocompletetextview","command","dart","emoji","flutter","hashtag","mentions","trigger"],"created_at":"2024-08-01T12:01:25.966Z","updated_at":"2025-08-04T12:33:43.178Z","avatar_url":"https://github.com/xsahil03x.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Multi Trigger Autocomplete\n\n[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://opensource.org/licenses/MIT) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/LICENSE) [![Dart CI](https://github.com/xsahil03x/multi_trigger_autocomplete/workflows/multi_trigger_autocomplete/badge.svg)](https://github.com/xsahil03x/multi_trigger_autocomplete/actions) [![CodeCov](https://codecov.io/gh/xsahil03x/multi_trigger_autocomplete/branch/master/graph/badge.svg)](https://codecov.io/gh/xsahil03x/multi_trigger_autocomplete) [![Version](https://img.shields.io/pub/v/multi_trigger_autocomplete.svg)](https://pub.dartlang.org/packages/multi_trigger_autocomplete)\n\nA flutter widget to add trigger based autocomplete functionality to your app.\n\n**Show some ❤️ and star the repo to support the project**\n\n\u003cp\u003e\n  \u003cimg src=\"https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/asset/package_demo.gif?raw=true\" alt=\"An animated image of the MultiTriggerAutocomplete\" height=\"400\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\nAdd the following to your  `pubspec.yaml`  and replace  `[version]`  with the latest version:\n\n```yaml\ndependencies:\n  multi_trigger_autocomplete: ^[version]\n```\n\n## Usage\n\nTo use this package you must first wrap your top most widget\nwith [Portal](https://pub.dev/documentation/flutter_portal/latest/flutter_portal/Portal-class.html) as this package\nuses [flutter_portal](https://pub.dev/packages/flutter_portal)\nto show the options view.\n\n(Credits to: [Remi Rousselet](https://github.com/rrousselGit))\n\n\u003e `Portal`, is the equivalent of [Overlay].\n\u003e\n\u003e This widget will need to be inserted above the widget that needs to render\n\u003e _under_ your overlays.\n\u003e\n\u003e If you want to display your overlays on the top of _everything_, a good place\n\u003e to insert that `Portal` is above `MaterialApp`:\n\u003e\n\u003e ```dart\n\u003e Portal(\n\u003e   child: MaterialApp(\n\u003e     ...\n\u003e   )\n\u003e );\n\u003e ```\n\u003e\n\u003e (works for `CupertinoApp` too)\n\u003e\n\u003e This way `Portal` will render above everything. But you could place it\n\u003e somewhere else to change the clip behavior.\n\nImport the package:\n\n```dart\nimport 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';\n```\n\nUse the widget:\n\n```dart\nMultiTriggerAutocomplete(\n  optionsAlignment: OptionsAlignment.topStart,\n  autocompleteTriggers: [\n    // Add the triggers you want to use for autocomplete\n    AutocompleteTrigger(\n      trigger: '@',\n      optionsViewBuilder: (context, autocompleteQuery, controller) {\n        return MentionAutocompleteOptions(\n          query: autocompleteQuery.query,\n          onMentionUserTap: (user) {\n            final autocomplete = MultiTriggerAutocomplete.of(context);\n            return autocomplete.acceptAutocompleteOption(user.id);\n          },\n        );\n      },\n    ),\n    AutocompleteTrigger(\n      trigger: '#',\n      optionsViewBuilder: (context, autocompleteQuery, controller) {\n        return HashtagAutocompleteOptions(\n          query: autocompleteQuery.query,\n          onHashtagTap: (hashtag) {\n            final autocomplete = MultiTriggerAutocomplete.of(context);\n            return autocomplete\n                .acceptAutocompleteOption(hashtag.name);\n          },\n        );\n      },\n    ),\n    AutocompleteTrigger(\n      trigger: ':',\n      optionsViewBuilder: (context, autocompleteQuery, controller) {\n        return EmojiAutocompleteOptions(\n          query: autocompleteQuery.query,\n          onEmojiTap: (emoji) {\n            final autocomplete = MultiTriggerAutocomplete.of(context);\n            return autocomplete.acceptAutocompleteOption(\n              emoji.char,\n              // Passing false as we don't want the trigger [:] to\n              // get prefixed to the option in case of emoji.\n              keepTrigger: false,\n            );\n          },\n        );\n      },\n    ),\n  ],\n  // Add the text field widget you want to use for autocomplete\n  fieldViewBuilder: (context, controller, focusNode) {\n    return Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: ChatMessageTextField(\n        focusNode: focusNode,\n        controller: controller,\n      ),\n    );\n  },\n),\n```\n\n## Demo\n\n| Mention Autocomplete                                                 | Hashtag Autocomplete                                                        | Emoji Autocomplete                                                      |\n|----------------------------------------------------------------------|-----------------------------------------------------------------------------|-------------------------------------------------------------------------|\n| \u003cimg src=\"https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/asset/mention_demo.gif?raw=true\" height=\"400\" alt=\"Mention Autocomplete\"/\u003e | \u003cimg src=\"https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/asset/hashtag_demo.gif?raw=true\" height=\"400\" alt=\"Hashtag Autocomplete\"/\u003e | \u003cimg src=\"https://github.com/xsahil03x/multi_trigger_autocomplete/blob/master/asset/emoji_demo.gif?raw=true\" height=\"400\" alt=\"Emoji Autocomplete\"/\u003e |\n\n## Customization\n\n### MultiTriggerAutocomplete\n\n```dart\nMultiTriggerAutocomplete(\n  // Defines the autocomplete trigger that will be used to match the\n  // text.\n  autocompleteTriggers: autocompleteTriggers,\n  \n  // Defines the alignment of the options view relative to the\n  // fieldView.\n  //\n  // By default, the options view is aligned to the bottom of the\n  // fieldView.\n  optionsAlignment: OptionsAlignment.topStart,\n  \n  // Defines the width to make the options as a multiple of the width\n  // of the fieldView.\n  //\n  // Setting this to 1 makes the options view width matches the width\n  // of the fieldView.\n  //\n  // Use null to remove this constraint.\n  optionsWidthFactor: 1.0,\n  \n  // Defines the duration of the debounce period for the\n  // [TextEditingController].\n  //\n  // This is the time between the last character typed and the matching\n  // is performed.\n  debounceDuration: const Duration(milliseconds: 350),\n  \n  // Defines the initial value to set in the internal\n  // [TextEditingController].\n  //\n  // This value will be ignored if [TextEditingController] is provided.\n  initialValue: const TextEditingValue(text: 'Hello'),\n  \n  // Defines the [TextEditingController] that will be used for the\n  // fieldView.\n  //\n  // If this parameter is provided, then [focusNode] must also be\n  // provided.\n  textEditingController: TextEditingController(text: 'Hello'),\n  \n  // Defines the [FocusNode] that will be used for the fieldView.\n  //\n  // If this parameter is provided, then [textEditingController] must\n  // also be provided.\n  focusNode: FocusNode(),\n  \n  // Defines the fieldView that will be used to input the text.\n  //\n  // By default, a [TextFormField] is used.\n  fieldViewBuilder: (context, controller, focusNode) {\n    return TextField(\n      controller: controller,\n      focusNode: focusNode,\n    );\n  },\n),\n```\n\n### AutocompleteTrigger\n\n```dart\nAutocompleteTrigger(\n  // The trigger string/character that will be used to trigger the\n  // autocomplete.\n  trigger: '@',\n  \n  // If true, the [trigger] should only be recognised at\n  // the start of the input text.\n  //\n  // valid example: \"@luke hello\"\n  // invalid example: \"Hello @luke\"\n  triggerOnlyAtStart: false,\n  \n  // If true, the [trigger] should only be recognised after\n  // a space.\n  //\n  // valid example: \"@luke\", \"Hello @luke\"\n  // invalid example: \"Hello@luke\"\n  triggerOnlyAfterSpace: true,\n  \n  // A minimum number of characters can be provided to only show\n  // suggestions after the user has input enough characters.\n  //\n  // example:\n  // \"Hello @l\" -\u003e Shows zero suggestions.\n  // \"Hello @lu\" -\u003e Shows suggestions for @lu.\n  minimumRequiredCharacters: 2,\n  \n  // The options view builder is used to build the options view\n  // that will be shown when the [trigger] is detected.\n  optionsViewBuilder: (context, autocompleteQuery, controller) {\n    return MentionAutocompleteOptions(\n      query: autocompleteQuery.query,\n      onMentionUserTap: (user) {\n        // Accept the autocomplete option.\n        final autocomplete = MultiTriggerAutocomplete.of(context);\n        return autocomplete.acceptAutocompleteOption(user.id);\n      },\n    );\n  },\n)\n```\n\n## License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Fmulti_trigger_autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxsahil03x%2Fmulti_trigger_autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Fmulti_trigger_autocomplete/lists"}