{"id":9651,"date":"2024-02-21T04:25:06","date_gmt":"2024-02-21T04:25:06","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9651"},"modified":"2024-02-21T05:48:42","modified_gmt":"2024-02-21T05:48:42","slug":"customizing-the-autocomplete-widget-in-flutter","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/customizing-the-autocomplete-widget-in-flutter","title":{"rendered":"Customizing the AutoComplete Widget in Flutter"},"content":{"rendered":"<p>To achieve your goal of creating a reusable MyAutocomplete widget, you can define a custom stateful widget that encapsulates the Autocomplete logic and styling. Below is an example of how you can create a MyAutocomplete widget:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">class MyAutocomplete extends StatefulWidget {\r\n final List&lt;String&gt; options;\r\n final String label;\r\n final String hintText;\r\n\r\n const MyAutocomplete({\r\n   super.key,\r\n   required this.options,\r\n   required this.label,\r\n   required this.hintText,\r\n });\r\n\r\n @override\r\n State&lt;MyAutocomplete&gt; createState() =&gt; _MyAutocompleteState();\r\n}\r\nclass _MyAutocompleteState extends State&lt;MyAutocomplete&gt; {\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Autocomplete&lt;String&gt;(\r\n     optionsBuilder: (TextEditingValue textEditingValue) {\r\n       if (textEditingValue.text == '') {\r\n         return const Iterable&lt;String&gt;.empty();\r\n       }\r\n       return widget.options.where((String option) {\r\n         return option.contains(textEditingValue.text.toLowerCase());\r\n       });\r\n     },\r\n     fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {\r\n       return TextFormField(\r\n         controller: textEditingController,\r\n         decoration: InputDecoration(\r\n           labelText: widget.label,\r\n           hintText: widget.hintText,\r\n         ),\r\n         focusNode: focusNode,\r\n         onFieldSubmitted: (String value) {\r\n           onFieldSubmitted();\r\n           print('You just typed a new entry  $value');\r\n         },\r\n       );\r\n     },\r\n     onSelected: (String selection) {\r\n       print('You just selected $selection');\r\n     },\r\n   );\r\n }\r\n}<\/pre>\n<p>Now we can use reusable code as below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\">class MyWidget extends StatelessWidget {\r\n final List&lt;String&gt; list1 = ['aaa', 'bbb', 'ccc', 'aa1', 'aa2'];\r\n final String label1 = 'label1';\r\n final String hint1 = 'hint1';\r\n\r\n final List&lt;String&gt; list2 = ['aaa2', 'bbb2', 'ccc2'];\r\n final String label2 = 'label2';\r\n final String hint2 = 'hint2';\r\n\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Column(\r\n     children: [\r\n       MyAutocomplete(options: list1, label: label1, hintText: hint1),\r\n       const SizedBox(height: 16.0),\r\n       MyAutocomplete(options: list2, label: label2, hintText: hint2),\r\n       \/\/ Add more MyAutocomplete fields as needed\r\n     ],\r\n   );\r\n }\r\n}<\/pre>\n<p>&nbsp;<br \/>\n<strong>Output: <\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/qanda\/wp-content\/uploads\/2024\/02\/ScreenRecording2024-01-11at3.37.13PM0-ezgif.com-video-to-gif-converter.gif\" alt=\"Output- flutter autocomplete\" width=\"600\" height=\"427\" class=\"alignright size-full wp-image-9667\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To achieve your goal of creating a reusable MyAutocomplete widget, you can define a custom stateful widget that encapsulates the Autocomplete logic and styling. Below is an example of how you can create a MyAutocomplete widget: class MyAutocomplete extends StatefulWidget { final List&lt;String&gt; options; final String label; final String hintText; const MyAutocomplete({ super.key, required this.options, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-9651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9651"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9651"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9651\/revisions"}],"predecessor-version":[{"id":9669,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9651\/revisions\/9669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9652"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}