[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9561":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":27,"discoverSource":28},9561,"flutter_typeahead","AbdulRahmanAlHamali\u002Fflutter_typeahead","AbdulRahmanAlHamali","A TypeAhead widget for Flutter, where you can show suggestions to users as they type",null,"Dart",854,396,14,2,0,1,3,54.4,"BSD 2-Clause \"Simplified\" License",false,"master",true,[],"2026-06-12 04:00:45","\u003Cmeta name='keywords' content='flutter, typeahead, autocomplete, customizable, floating'>\n\n[![Pub](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_typeahead)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_typeahead)\n\n# Flutter TypeAhead\n\nA TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to\nusers as they type\n\n\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FAbdulRahmanAlHamali\u002Fflutter_typeahead\u002Fmaster\u002Fflutter_typeahead.gif\" width=\"400\" height=\"auto\" alt=\"Flutter TypeAhead Demo\" \u002F>\n\n## Features\n\n- Shows suggestions in an floating box with the same width as your TextField\n- Allows controlling all aspects: suggestions, loading, errors, empty, animation, decoration, layout, etc.\n- Comes in both Material and Cupertino widget flavors\n\nFor installation, see [installation instructions](https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fflutter_typeahead\u002Finstall).\n\n## Usage\n\nYou can import the package with:\n\n```dart\nimport 'package:flutter_typeahead\u002Fflutter_typeahead.dart';\n```\n\nThe package comes in both Material and Cupertino widget flavors.\nAll parameters identical, the only changes are the visual defaults.\n\n### Basic\n\n```dart\nTypeAheadField\u003CCity>(\n  suggestionsCallback: (search) => CityService.of(context).find(search),\n  builder: (context, controller, focusNode) {\n    return TextField(\n      controller: controller,\n      focusNode: focusNode,\n      autofocus: true,\n      decoration: InputDecoration(\n        border: OutlineInputBorder(),\n        labelText: 'City',\n      )\n    );\n  },\n  itemBuilder: (context, city) {\n    return ListTile(\n      title: Text(city.name),\n      subtitle: Text(city.country),\n    );\n  },\n  onSelected: (city) {\n    Navigator.of(context).push\u003Cvoid>(\n      MaterialPageRoute(\n        builder: (context) => CityPage(city: city),\n      ),\n    );\n  },\n)\n```\n\n### Customizing the layout\n\nBy default, TypeAhead uses a `ListView` to render the items created by `itemBuilder`.  \nYou may specify a custom layout via the `listBuilder` property.\n\nFor example, to use a `GridView`:\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  listBuilder: (context, children) => GridView.count(\n    controller: scrollContoller,\n    crossAxisCount: 2,\n    crossAxisSpacing: 8,\n    mainAxisSpacing: 8,\n    shrinkWrap: true,\n    reverse: SuggestionsController.of\u003CCity>(context).effectiveDirection ==\n        VerticalDirection.up,\n    children: children,\n  ),\n);\n```\n\nNote: To inherit the correct `ScrollController`, please do not set `primary` to `false`.\nThe suggestions box will automatically provide an ambient `PrimaryScrollController`.\n\n### Customizing the TextField\n\nThe `TypeAheadField` will use a simple default `TextField` builder, if none is provided.\nTo customize your `TextField`, you can use the `builder` property.\n\nYou may also use a `TextFormField` or any other widget that connects to a `TextEditingController` and `FocusNode`.\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  builder: (context, controller, focusNode) {\n    return TextField(\n      controller: controller,\n      focusNode: focusNode,\n      obscureText: true,\n      decoration: InputDecoration(\n        border: OutlineInputBorder(\n          borderRadius: BorderRadius.circular(8),\n        ),\n        labelText: 'Password',\n      ),\n    );\n  },\n);\n```\n\nIt is crucial that you use the provided `controller` and `focusNode` properties,\nas they are required for the suggestions box to function.\n\n### Customizing the suggestions box\n\nThe `TypeAheadField` will use a simple default decoration builder.\nTo customize the suggestions box, you can create your own decoration builder.\nYou may also specify offsets and constraints to position the suggestions box.\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  decorationBuilder: (context, child) {\n    return Material(\n      type: MaterialType.card,\n      elevation: 4,\n      borderRadius: BorderRadius.circular(8),\n      child: child,\n    );\n  },\n  offset: Offset(0, 12),\n  constraints: BoxConstraints(maxHeight: 500),\n);\n```\n\n### Customizing the loading, error and empty message\n\nYou can use the `loadingBuilder`, `errorBuilder` and `emptyBuilder` to\ncustomize their corresponding widgets.\n\nFor example:\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  loadingBuilder: (context) => const Text('Loading...'),\n  errorBuilder: (context, error) => const Text('Error!'),\n  emptyBuilder: (context) => const Text('No items found!'),\n);\n```\n\nBy default, the suggestions box will maintain the old suggestions while new\nsuggestions are being retrieved. To show a circular progress indicator\nduring retrieval instead, set `keepSuggestionsOnLoading` to false.\n\n### Hiding the suggestions box\n\nYou may want to hide the suggestions box when it is in certain states.\nYou can do so with the following parameters:\n\n- `hideOnLoading`: Hide the suggestions box while suggestions are being retrieved. This ignores the `loadingBuilder`.\n- `hideOnEmpty`: Hide the suggestions box when there are no suggestions. This ignores the `emptyBuilder`.\n- `hideOnError`: Hide the suggestions box when there is an error retrieving suggestions. This ignores the `errorBuilder`.\n- `hideOnSelect`: Hide the suggestions box when a suggestion is selected. `True` by default.\n- `hideOnUnfocus`: Hide the suggestions box when the `TextField` loses focus. `True` by default.\n\nYou can also very generally hide the suggestions box by returning `null` from the `suggestionsCallback`.\nThis is different from returning an empty list, which will show the empty widget.\n\n### Customizing the animation\n\nAnimation duration can be customized using the `animationDuration` parameter.\nYou may also specify a custom animation using the `transitionBuilder` parameter.\n\nFor example:\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  transitionBuilder: (context, animation, child) {\n    return FadeTransition(\n      opacity: CurvedAnimation(\n        parent: animation,\n        curve: Curves.fastOutSlowIn,\n      ),\n      child: child,\n    ),\n  },\n);\n```\n\nTo disable animatons, return the `child` directly.\n\n### Customizing the debounce duration\n\nThe suggestions box does not fire for each character the user types. Instead,\nwe wait until the user is idle for a duration of time, and then call the\n`suggestionsCallback`. The duration defaults to ` 300 milliseconds``, but can be\nconfigured using the  `debounceDuration` parameter.\n\n### Customizing the direction\n\nBy default, the list grows towards the bottom. However, you can use the `direction` to specify either `VerticalDirection.down` or `VerticalDirection.up`.\n\nThe suggestions list will automatically reverse in case it is flipped.\nTo turn off this behavior, set `autoFlipDirection` to `false`.\n\n### Controlling the suggestions box\n\nYou may manually control many aspects of the suggestions box by using the `SuggestionsController` class.\n\nIt grants access to the following:\n\n- the current suggestions\n- the current loading state\n- the current error\n- the open\u002Fclosed state\n- the desired and effective direction\n- the stream of selected suggestions\n- the callback to trigger a resize\n\nWhen building a widget inside of the suggestions box, you can access the controller via `SuggestionsController.of(context)`.\n\n### Controlling the focus\n\nFocus plays an important role in the suggestions box. It is used to determine when to show and hide the suggestions box.\nHowever, in certain situations you may want to control the suggestions box independently of the focus.\n\nOptions to do so are as follows:\n\nOn the `TypeAheadField`:\n\n- `showOnFocus` (default: `true`): Show the suggestions box when the `TextField` gains focus.\n- `hideOnUnfocus` (default: `true`): Hide the suggestions box when the `TextField` loses focus.\n\nOn the `SuggestionsController`:\n\n- `open(gainFocus: false)`: Show the suggestions box without focusing it.\n- `close(retainFocus: true)`: Hide the suggestions box without unfocusing it.\n\n### Customizing everything\n\nTo create your own version of the TypeAhead widget, that is neither Material nor Cupertino, you can use the `RawTypeAheadField` widget.\n\nYou must then specify the following parameters:\n\n- `builder` (to build the `TextField`)\n- `loadingBuilder` (to build the loading widget)\n- `errorBuilder` (to build the error widget)\n- `emptyBuilder` (to build the empty widget)\n- `itemBuilder` (to build the suggestions)\n\nAs well as all the usual parameters, such as `suggestionsCallback`, `onSelected`, etc.\n\nThe `decorationBuilder` can be used to inject required wrappers like `Material` or `DefaultTextStyle`.\nFor more information, see the source code of the `TypeAheadField` widget.\n\n## FAQ\n\n### My suggestions arent changing when I type\n\nYou have most likely forgotten to pass the controller and focus node to the `TextField` in the `builder` property.\nThis is required for the suggestions box to function. Here is an example:\n\n```dart\nTypeAheadField(\n  \u002F\u002F ...\n  controller: myTextEditingController, \u002F\u002F your custom controller, or null\n  builder: (context, controller, focusNode) {\n    return TextField(\n      controller: controller, \u002F\u002F note how the controller is passed\n      focusNode: focusNode,\n      \u002F\u002F ...\n    );\n  },\n);\n```\n\n### My suggestions are not updating when I click on the TextField\n\nThe TypeAhead field caches the suggestions to avoid unnecessary calls to the `suggestionsCallback`.\nIf you want to force the suggestions to update, you can use the `SuggestionsController` to force a refresh.\n\n```dart\nmySuggestionsController.refresh();\n```\n\n### My suggestions box grows while scrolling, then disappears and reappears\n\nThe suggestions box uses the overlay to position itself relative to the text field.\nIts available size is based on the remaining screen space, which changes as you scroll.\nIf the scrollable virtualizes its children (removing offscreen widgets from the tree),\nthe text field gets unmounted and the suggestions box disappears.\n\nTo fix this:\n\n1. Ensure the scrollable keeps the TypeAheadField in the tree while scrolling.\n   Use a non-virtualizing scrollable like `SingleChildScrollView` with a `Column`.\n   Note that `ListView` (even with `shrinkWrap: true`) still culls offscreen children.\n\n2. Constrain the maximum height of the suggestions box with `constraints: BoxConstraints(maxHeight: 200)` so it doesn't grow with available space.\n\n### My suggestions box overlaps with other pages in a PageView\n\nWhen the TypeAheadField is inside a `PageView` or `TabBarView` with `constrainWidth: false`,\nthe suggestions box extends to the full overlay width, which can overlap adjacent pages.\n\nTo fix this, wrap each page in its own `Overlay`:\n\n```dart\nPageView(\n  children: [\n    Overlay(\n      initialEntries: [\n        OverlayEntry(\n          builder: (context) => MyPageWithTypeAhead(),\n        ),\n      ],\n    ),\n    \u002F\u002F ...\n  ],\n)\n```\n\nThis scopes the suggestions box to the page's own overlay, so it slides out naturally with the page.\n\n## Migrations\n\n### From 5.x to 6.x\n\nThe package no longer depends on `flutter_keyboard_visibility` or `pointer_interceptor`. The following changes have been made:\n\n- `hideWithKeyboard` has been removed. This parameter never worked as intended, since closing the keyboard also loses focus, which is already handled by `hideOnUnfocus`. If you were using `hideWithKeyboard: false`, use `hideOnUnfocus: false` instead.\n\n### From 4.x to 5.x\n\nSince version 5.x, the package is based on Dart 3 (null-safety enforced). To use this package, please upgrade your Flutter SDK.\n\nAdditionally, various changes have been made to the API surface to make the package more flexible and customizable. The following changes have been made:\n\n- `SuggestionsBoxDecoration` has been removed. You can now directly wrap the `SuggestionsBox` with any widget you wish via the `decorationBuilder` property.\n- `TextFieldConfiguration` has been removed. You can now directly build your own custom `TextField` via the `builder` property.\n  Note that you must use the provided `controller` and `focusNode` properties, as they are required for the suggestions box to function.\n- `SuggestionsBoxController` has been renamed to `SuggestionsController`.\n- `CupertinoSuggestionsBoxController` has been merged into `SuggestionsController`.\n- `SuggestionsController` now holds the full state of the suggestions box, meaning suggestions, loading and error state. It will also send notifications when state changes occur.\n- `SuggestionsController` now offers streams for when a suggestion is selected.\n- `SuggestionsBox` should now automatically resize in all situations. Manual resize calls are no longer required.\n- `TypeAheadFormField` has been removed. You can use the `builder` property to build your own `TextFormField`.\n- Various parameters have been renamed to be shorter and more concise. Notable changes include:\n  - `suggestionsBoxController` -> `suggestionsController`\n  - `layoutArchitecture` -> `listBuilder`\n  - `noItemsFoundBuilder`-> `emptyBuilder`\n  - `onSuggestionSelected` -> `onSelected`\n  - `suggestionsBoxVerticalOffset` -> `offset` (now also includes horizontal offset)\n  - `hideSuggestionsOnKeyboardHide` -> `hideWithKeyboard`\n    Note: In v4, `hideSuggestionsOnKeyboardHide` also controlled whether the box closed on focus loss.\n    In v5, this is now two separate flags. If you were using `hideSuggestionsOnKeyboardHide: false`,\n    you will also need to set `hideOnUnfocus: false` to get the same behavior.\n  - `keepSuggestionsOnSuggestionSelected` -> `hideOnSelect` (inverted)\n  - `keepSuggestionsOnLoading`-> `retainOnLoading`\n- Some parameters have been removed:\n  - `intercepting`: This is now always true, since it doesnt interfere on mobile platforms and generally has no downsides.\n  - `onSuggestionsBoxToggle`: You can subscribe to the `SuggestionsController` to get notified when the suggestions box is toggled.\n  - `ignoreAccessibleNavigation`: The new `Overlay` code no longer requires to act differently when accessibility is enabled.\n  - `minCharsForSuggestions`: You can return `null` from `suggestionsCallback` instead.\n  - `animationStart`: You can use the animation in the builder and map it to customise this.\n  - `autoFlipListDirection`: This is now always true. You can use the list builder to disable this behavior.\n  - `getImmediateSuggestions`: You can use the `debounceDuration` to achieve the same effect.\n\n### From 2.x to 3.x\n\nSince version 3.x, the package is based on Dart 2.12 (null-safety).\nFlutter now also features the inbuilt Autocomplete widget, which has similar behavior to this package.\n\n## For more information\n\nVisit the [API Documentation](https:\u002F\u002Fpub.dartlang.org\u002Fdocumentation\u002Fflutter_typeahead\u002F).\n\n## Team\n\n| [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FAbdulRahmanAlHamali.png\" width=\"100px;\"\u002F>](https:\u002F\u002Fgithub.com\u002FAbdulRahmanAlHamali) | [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fsjmcdowall.png\" width=\"100px;\"\u002F>](https:\u002F\u002Fgithub.com\u002Fsjmcdowall) | [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FKaYBlitZ.png\" width=\"100px;\"\u002F>](https:\u002F\u002Fgithub.com\u002FKaYBlitZ) | [\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fclragon.png\" width=\"100px;\"\u002F>](https:\u002F\u002Fgithub.com\u002Fclragon) |\n| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |\n| AbdulRahman AlHamali                                                                                             | S McDowall                                                                                     | Kenneth Liang                                                                              | clragon                                                                                  |\n\n## Thank you\n\nThis project is the result of the collective effort of contributors who participated effectively by submitting pull requests, reporting issues, and answering questions.\nThank you for your proactiveness, and we hope `flutter_typeahead` made your lifes at least a little easier!\n\nIf you would like to contribute, please read the [Contribution Guidelines](CONTRIBUTING.md).\n","Flutter TypeAhead 是一个用于 Flutter 的自动完成（TypeAhead）组件，能够在用户输入时显示建议列表。其核心功能包括在浮动框中展示与文本框同宽的建议，并允许开发者全面控制建议、加载状态、错误处理、空状态、动画效果、样式布局等。该插件支持 Material 和 Cupertino 两种风格的UI设计，具有高度可定制性。适用于需要提供快速搜索或输入建议的应用场景，如地址查找、商品搜索等功能模块，能够显著提升用户体验。","2026-06-11 03:23:25","top_language"]