{"id":32307161,"url":"https://github.com/eyoeldefare/textfield_tags","last_synced_at":"2026-02-20T22:02:18.006Z","repository":{"id":37391141,"uuid":"295420454","full_name":"eyoeldefare/textfield_tags","owner":"eyoeldefare","description":"Allows tags to be entered inside textfield","archived":false,"fork":false,"pushed_at":"2024-05-28T13:11:08.000Z","size":90820,"stargazers_count":124,"open_issues_count":12,"forks_count":62,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-16T02:32:25.877Z","etag":null,"topics":["flutter","tags","textfield"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/textfield_tags","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/eyoeldefare.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,"publiccode":null,"codemeta":null}},"created_at":"2020-09-14T13:12:23.000Z","updated_at":"2024-11-05T20:23:06.000Z","dependencies_parsed_at":"2024-06-18T21:17:07.760Z","dependency_job_id":"c2ba8087-922d-4c9d-b477-8589aad16e0d","html_url":"https://github.com/eyoeldefare/textfield_tags","commit_stats":{"total_commits":129,"total_committers":13,"mean_commits":9.923076923076923,"dds":0.4031007751937985,"last_synced_commit":"ffe918ba9b54ef3cce904d9f86c2521e097e1882"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eyoeldefare/textfield_tags","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyoeldefare%2Ftextfield_tags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyoeldefare%2Ftextfield_tags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyoeldefare%2Ftextfield_tags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyoeldefare%2Ftextfield_tags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eyoeldefare","download_url":"https://codeload.github.com/eyoeldefare/textfield_tags/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyoeldefare%2Ftextfield_tags/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29666432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T19:49:36.704Z","status":"ssl_error","status_checked_at":"2026-02-20T19:44:05.372Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["flutter","tags","textfield"],"created_at":"2025-10-23T07:14:32.218Z","updated_at":"2026-02-20T22:02:17.994Z","avatar_url":"https://github.com/eyoeldefare.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# textfield_tags\n\nTextfield_tags is a widget that allows developers to create tags inside a textfield. The widget comes with 2 default controllers that allow you to store tags as regular strings or objects. Alternatively, you can create your own controller by extending the base controller class to have custom tag controllers.\n\n## Environment\n\n`sdk: \"\u003e=2.12.0 \u003c4.0.0\"`\n\n`flutter: \"\u003e=1.17.0\"`\n\n## Installation\n\n```yaml \n  dependencies:\n      textfield_tags: ^3.0.1\n```\n\n`$ flutter pub get`\n\n## Getting Started\n\nTo get started using this widget, you will need to first import the package inside your project following the installation guide found on [Flutter.dev](https://pub.dev/packages/textfield_tags).\n\n## Usage\n\nTo use this widget, \n1. `import 'package:textfield_tags/textfield_tags.dart';` inside your dart file\n2. Follow one of the examples bellow and call the widget `TextFieldTags(...)`. \n3. The widget takes in 9 arguments: \n`List\u003cString\u003e? initialTags`, \n`ScrollController? scrollController`,\n`FocusNode? focusNode`, \n`TextEditingController? textEditingController`, `List\u003cString\u003e? textSeperators`, \n`LetterCase? letterCase`, \n`Validator? validator`, \n`InputFieldBuilder inputfieldBuilder`, \n`TextfieldTagsController? textfieldController`. \n\nRead the api documentation on these properties for more details or see the examples provided in the example folder.\n\n## Examples With Different Controllers\nBy default, the widget comes with 2 built-in controllers: one that allows you to manage string type tags and another one that allows you to use any type of tags including objects, ints, strings, etc. We will show examples of the two controllers in actions bellow.\n\n### Using `String` type tags (`StringTagControlle`)\nIf you only want to use string based tags, then the `StringTagController` is ideal for you. The example bellow shows how you can utilize the `StringTagController\u003cString\u003e()` controller to manage string tags.\n\n[See Full Example](https://github.com/eyoeldefare/textfield_tags/blob/master/example/lib/string_tag_examples.dart)\n\n``` dart\n  class MyWidget extends StatelessWidget {\n    const MyWidget({Key? key}) : super(key: key);\n\n    final _stringTagController = StringTagController();\n\n    @override\n    Widget build(BuildContext context) {\n      return TextFieldTags\u003cString\u003e(\n        textfieldTagsController: _stringTagController,\n        initialTags:['python','java'],\n        textSeparators: const [' ', ','],\n        validator: (String tag){\n          if (tag == 'php'){\n            return 'Php not allowed';\n          }\n          return null;\n        },\n        inputFieldBuilder: (context, inputFieldValues){\n          return TextField(\n            controller: inputFieldValues.textEditingController,\n            focusNode: inputFieldValues.focusNode, \n          );\n        }\n      );\n    }\n  }\n```\n\u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/string_1.gif\" width=250\u003e \u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/string_2.gif\" width=250\u003e \u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/string_3.gif\" width=250\u003e \n\n### Using dynamic tags (`DynamicTagController`)\nIf you want to store dynamic type of datas with each tags, then using `DyanmicTagController` will be ideal for you. This will offer you more flexibiliity and customization and will allow you to design the tags based on their own stored data. \n\n[See Full Example](https://github.com/eyoeldefare/textfield_tags/blob/master/example/lib/dynamic_tag_examples.dart)\n\n``` dart \n//Sample data model \nclass ButtonData {\n  final Color buttonColor;\n  final String emoji;\n  const ButtonData(this.buttonColor, this.emoji);\n}\n\nclass MyWidget extends StatelessWidget {\n    const MyWidget({Key? key}) : super(key: key);\n    final _dynamicTagController = DynamicTagController\u003cTagData\u003cButtonData\u003e\u003e()\n\n    @override\n    Widget build(BuildContext context) {\n      return TextFieldTags\u003cDynamicTagData\u003cButtonData\u003e\u003e(\n        textfieldTagsController: _dynamicTagController,\n        initialTags:[\n          DynamicTagData\u003cButtonData\u003e(\n            'cat',\n            const ButtonData(\n              Color.fromARGB(255, 132, 204, 255),\n              \"😽\",\n            ),\n          ),\n          DynamicTagData\u003cButtonData\u003e(\n            'penguin',\n            const ButtonData\u003cButtonData\u003e(\n              Color.fromARGB(255, 255, 131, 228),\n              '🐧',\n            ),\n          ),\n          DynamicTagData\u003cButtonData\u003e(\n            'tiger',\n            const ButtonData(\n              Color.fromARGB(255, 222, 255, 132),\n              '🐯',\n            ),\n          ),\n        ],\n        textSeparators: const [' ', ','],\n        validator: (DynamicTagData\u003cButtonData\u003e tag){\n          if (tag.tag == 'lion') {\n            return 'Not envited per tiger request';\n          } else if (_dynamicTagController.getTags!\n              .any((element) =\u003e element.tag == tag.tag)) {\n            return 'Already in the club';\n          }\n          return null;\n        },\n        inputFieldBuilder: (context, inputFieldValues){\n          return TextField(\n            controller: inputFieldValues.textEditingController,\n            focusNode: inputFieldValues.focusNode,\n          );\n        }\n      ); \n    }\n  }\n```\n\u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/dynamic_1.gif\" width=250\u003e \u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/dynamic_2.gif\" width=250\u003e \u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/dynamic_3.gif\" width=250\u003e \n\n### More Advanced Functionality Via A Custom Controller\n\nIf you feel like you want more functionality than what is offered by the 2 default controllers, then you can easily extend `TextfieldTagsController` class to your own custom class and inherit all its functionalities and add your own stuffs as bellow example shows.\n\nThe bellow example shows you how you can use a numbers\ntag picker that selects numbers between 2 and 10 with the exception of number 8.\n\n[See Full Example](https://github.com/eyoeldefare/textfield_tags/blob/master/example/lib/custom_tag_examples.dart)\n\n``` dart\n  // Create my own custom controller\n  class MyIntTagController\u003cT extends int\u003e extends TextfieldTagsController\u003cT\u003e {\n      @override\n      bool? onTagSubmitted(T value) {\n          String? validate = getValidator != null ? getValidator!(value) : null;\n          if (validate == null \u0026\u0026 value \u003e 2 \u0026\u0026 value \u003c 10) {\n            bool? addTag = super.addTag(value);\n            if (addTag == true) {\n              setError = null;\n              scrollTags();\n            }\n          } else if (validate != null) {\n            setError = validate;\n          } else {\n            setError = 'Must enter numbers between 2 and 10';\n          }\n          return null;\n      }\n\n      @override\n      set setError(String? error) {\n        super.setError = error;\n        notifyListeners();\n      }\n\n      doOtherThings(){\n        ...\n      }\n  }\n\n  class MyWidget extends StatelessWidget {\n    const MyWidget({Key? key}) : super(key: key);\n    final _myintTagController = MyIntTagController\u003cint\u003e();\n\n    @override\n    Widget build(BuildContext context) {\n      return TextFieldTags\u003cint\u003e(\n        textfieldTagsController: _myintTagController,\n        initialTags:[ 4, 5 ],\n        validator: (int tag){\n          if (tag == 8){\n            return '8 is not allowed';\n          }\n          return null;\n        },\n        inputFieldBuilder: (context, inputFieldValues){\n          return TextField(\n            controller: inputFieldValues.textEditingController,\n            focusNode: inputFieldValues.focusNode,\n          );\n        }\n      ); \n    }\n  }\n```\n\u003cimg src=\"https://raw.githubusercontent.com/eyoeldefare/textfield_tags/v3/images/custom_1.gif\" width=250\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyoeldefare%2Ftextfield_tags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feyoeldefare%2Ftextfield_tags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyoeldefare%2Ftextfield_tags/lists"}