An autocomplete Textfield for flutter

Overview

autocomplete_textfield

An autocomplete textfield for flutter

pull requests

Feel free to submit pull requests for desired changes / features / bug fixes... It makes the maintenance of this code much easier as I no longer use Flutter frequently.

Pub Package Can Be Found At

Pub Package

Breaking Changes

TextField is set by default to call onSubmitted on a suggestion tap and also to clear the TextField on submit.

These can both be disabled with submitOnSuggestionTap and clearOnSubmit respectively.

Usage

AutoCompleteTextField supports any data type suggestions

new AutoCompleteTextField ()

The suggestions parameter must have data that matches

A global key of type GlobalKey > is required so that the clear() method can be called to clear AutoCompleteTextField.

Strings and itemFilter

Filtering is case sensitive so when using strings a common implementation of itemFilter is .
itemFilter: (item, query) { return item.toLowerCase().startsWith(query.toLowerCase()); }

Comments
  • Support null-safety

    Support null-safety

    Hello! thanks for the awesome package.

    Dart 2.12 and flutter 2.0.0 are now in stable with the null-safety feature.

    Migrating this package to null-safety would help a lot. :)

    Here's an official guide from dart doc https://dart.dev/null-safety/migration-guide

    opened by isorensen 10
  • Suggestions Pop up direction [feature request]

    Suggestions Pop up direction [feature request]

    Currently have the textFormfield at the bottom of the screen. So, all the suggestions appear behind the keyboard. Requesting a way to set the direction of the pop ups- either above or below the Textformfield.

    Screenshot_1593702675 Screenshot_1593702676

    question 
    opened by praharshbhatt 7
  • Dynamic data

    Dynamic data

    Hi there. I'm fetching a list of Users from API, i have debugged every thing, data is good. The issue is i'm unable to show suggestions.

    Mean while i can able to do that with static data, the suggestions are showing, but with API data filtering is working on that data, but suggestions list not showing. Any Idea..

    AutoCompleteTextField<UserDataModel>( key: key, clearOnSubmit: false, suggestions: usersList, style: TextStyle(color: Colors.white70), decoration: InputDecoration( hintText: 'Search Here', contentPadding: EdgeInsets.only(left: 10.2, top: 15.0), border: InputBorder.none, hintStyle: TextStyle(color: Colors.white70), suffixIcon: IconButton( iconSize: 30.0, color: Colors.white70, icon: Icon(Icons.search), onPressed: () {}, ), ), itemFilter: (item, query) { print(item.name); return item.name .toLowerCase() .contains(query.toLowerCase()); }, itemSorter: (a, b) { return a.name.compareTo(b.name); }, itemSubmitted: (item) { setState(() { searchTextField.textField.controller.text = item.name; }); }, itemBuilder: (context, item) { return row(item); }, ),

    opened by sajjadjaved01 6
  • Error when touching autocomplete field

    Error when touching autocomplete field

    Hello,

    I've updated flutter from 1.2.x to last stable release, 1.5.4 :

    [√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [version 6.3.9600], locale fr-FR)

    No changes to the code at all. I just tried to build the appbundle again and I got some errors regarding to this plugin. Using debug, this is the error message I get when I touch the autocomplete field (without typing anything) :

    I/flutter (12956): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════
    I/flutter (12956): The following NoSuchMethodError was thrown while dispatching notifications for FocusNode:
    I/flutter (12956): The method 'call' was called on null.
    I/flutter (12956): Receiver: null
    I/flutter (12956): Tried calling: call(true)
    I/flutter (12956): 
    I/flutter (12956): When the exception was thrown, this was the stack:
    I/flutter (12956): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
    I/flutter (12956): #1      new AutoCompleteTextFieldState.<anonymous closure> (package:autocomplete_textfield/autocomplete_textfield.dart:182:4)
    I/flutter (12956): #2      ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206:21)
    I/flutter (12956): #3      FocusNode._notify (package:flutter/src/widgets/focus_manager.dart:103:5)
    I/flutter (12956): #4      FocusManager._update (package:flutter/src/widgets/focus_manager.dart:474:20)
    I/flutter (12956): (elided 10 frames from package dart:async)
    I/flutter (12956): 
    I/flutter (12956): The FocusNode sending notification was:
    I/flutter (12956):   FocusNode#30503(FOCUSED)
    I/flutter (12956): ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    I experienced this with flutter-autocomplete-textfield 1.6.4 but I updated to last version 1.6.6 and I'm facing the same issue.

    I tried to rollback to flutter v1.2.2 and this issue doesn't occur.

    Has someone got the same issue?

    Thanks

    opened by aleaforny 6
  • Dynamic suggestions

    Dynamic suggestions

    Hi, is it possible to use a dynamic suggestion list? The idea is to retrieve a suggestion list from the backend based on what's typed by the user, so whenever the text changes, a new list is filled with suggestions. I'm using Consumer and Provider, updating the suggestion list onPointerDown, and calling notifyListeners after the retrieval of new items, but they are not displayed as suggestions. Is there anyway to contour this issue?

    opened by tezine 5
  • errorText not working

    errorText not working

    Hi, I would want to change the message of the "errorText" value of the decoration after the "textChanged" event.

    Then i have something like this:

    return AutoCompleteTextField<String>(textChanged: (text) {
    setState(() { if (test.length == 0) _notGood = true; else _notGood = false;},};
    [...],
    decoration: InputDecoration(errorText: _notGood ? 'Empty' : null,),);
    

    The problem is that it's not working because the decoration that i pass in parameter is passed in the constructor of the AutoCompleteTextFieldState<T> class and like that its stay in "final" i can't do nothing to change it and the build method is not refreshing the TextField.

    Here : https://github.com/felixlucien/flutter-autocomplete-textfield/blob/ff8d9ead701c2c5995c5d7e6417da33eb4adad28/lib/autocomplete_textfield.dart#L152

    Is there any way to bypass this or for you to make a fix ?

    Thank you !

    bug 
    opened by oom- 5
  • How to add inputFormatters?

    How to add inputFormatters?

      `AutoCompleteTextField textField;
       ....
       textField.key.currentState.textField.inputFormatters.add(
        WhitelistingTextInputFormatter(RegExp("^[A-Za-z0-9]+");`
    

    This gives null exception. Thank you!

    opened by john-ravi 5
  • Using multiple autoComplete Textfield in same widget tree cause global key exception

    Using multiple autoComplete Textfield in same widget tree cause global key exception

    Hi thanks for this amazing library, I was having an issue while using it and want to check if anyone knows how to solve.

    I want to use the 2-3 autocomplete text fields on the same screen. But when I add it and run the app, I get the error Multiple widgets used the same GlobalKey.

    This happens because the global key which is a required field cannot be used for more than 1 widget. There is a workaround by declaring our own key https://stackoverflow.com/questions/49862572/multiple-widgets-used-the-same-globalkey but autocomplete textfield do a type check and the above solution doesn't work.

    For my use case, I am not using clear, is it possible to not make key required for such use cases? or is there any other suggestion.

    opened by pranayairan 5
  • Suggestion's Position

    Suggestion's Position

    It'd be great if we could choose whether the suggestions appear above / under the textfield. On small phones when the keyboard comes up it is kinda difficult to see the suggestions.

    opened by tomcajot 4
  • Display selected item in autocomplete textfield

    Display selected item in autocomplete textfield

    I want to show the selected / clicked item from suggestion list in textfield. How do I do that ? I know textfield is now exposed in latest version, but I don’t know how to use controller with autocomplete textfield. Please see my detailed question here :

    https://stackoverflow.com/questions/53590156/how-to-set-value-in-autocompletetextfield

    opened by DK15 4
  • Not Showing items overlay in my view hierarchy but it manages to..

    Not Showing items overlay in my view hierarchy but it manages to..

    Not Showing items overlay in my view hierarchy but it manages to execute itemFilter and itemBuilder with desired results. Is there something in this layout below stopping to show results.

    Parents from top Scaffold -> Stack -> Container -> Card ->ListView:

    First LAyout:

    Container(
     child: textFieldCities,
    ),
    
    

    But showing the result using this layout with height set on containing Container

     Container(
        height: 300.0,
        child: textFieldStates,
      ),
    

    But this is ugly and not desired to manually put height and the resulting overlay glides through all this 300. height

    opened by john-ravi 4
  • Widget AutocompleteTextField don't trigger state changes in decoration property.

    Widget AutocompleteTextField don't trigger state changes in decoration property.

    My AutocompleteTextField widget doesn't changes after some code inside decoration property changes (after setState() is called in other widget).

    My hintText is not changing after the variable "nextSub" change it's value. My errorText is not changing when variable "_hasError" becomes true.

    I don't know if its something about the GlobalKey or maybe is missing some setState inside the class bellow:

    Link for better visualization of code: https://pastebin.com/Y2Qkwu71

    opened by Cardoso-CHM 6
  • word duplication issue in samsung and miui devices

    word duplication issue in samsung and miui devices

    I am working on project based on the flutter. My requirement is like I will have an text box by entering 4 letters in that text box I need to make an API call and I need to display the suggestion list. I am using this library for displaying the suggestion. The problem is all this API call and every thing is working fine but in the devices like Samsung and devices built on MI-UI versions when user enter the text with 4 characters as expected API call is happening and displaying the suggestions list but if the user tries to delete the last two characters and tried to enter some other charterers the words is getting duplicated. This issue is only happening in the above mentioned devices but it is not happening in other devices. I had checked a lot to solve this issue finally I came to know in Samsung devices there is a setting called predictive text inside the keyboard settings if we turn that thing to off we can able to solve this issue. But how can user knows this issue and what way we can solve this issue in MI-UI devices and one more thing is there are lot of text fields available inside of my application but this issue is only happening to this text field alone . Is there any programmatic way to turn of the predictive text which is not an unique settings across all the devices ?

    User enter text :-ABCD Text after deleting :-AB User tried to enter text is :-F Displayed text:- ABABF Expected output:-ABF

    `SimpleAutoCompleteTextField( keyboardType: TextInputType.text, controller: searchController, key: key, textCapitalization: TextCapitalization.none, // this will be used not to captalize first letters suggestions: SearchTabView.list, textChanged: (text) async { print(text);

      if (text.length >= 4) {   // after 4 letters it will make an api call
    
        // this method is used to check to make an api call or need to load data from the existing list
        await suggestionsList(text, autoSuggestionRequest, context, reload,
                autoCompleteTextField)
            .then((list) {
          suggestionlist = list;
          //reload(list);
        });
      }
    }`
    
    opened by ganeh04 0
  • option to append suggestion to textField rather than replacing its content

    option to append suggestion to textField rather than replacing its content

                                        `String newText = suggestion.toString();
                                        if (submitOnSuggestionTap) {
                                        textField.focusNode.unfocus();
                                        itemSubmitted(suggestion);
                                        if (clearOnSubmit) {
                                          clear();
                                        }
                                      } else {
                                        String newText = suggestion.toString();
    
                                        textChanged(newText);
                                      }
                                        textField.controller.text = 
                                            appendOnTap?  textField.controller.text +newText: newText;`                                                                               
    

    I think it would be really useful if something like the above snippet was implemented in updateOverlay , as it would allow for implementing "suggest as you type" kind of text areas with filters like the one below, which matches last typed single words with the suggestions list: itemFilter: (item, query) { return item .toLowerCase() .startsWith(query.toLowerCase().split(' ').last); },

    opened by matteoandreozzi 0
  • Overlay hidden by soft keyboard

    Overlay hidden by soft keyboard

    When the text field is at the bottom of page and is pushed up by soft keyboard the suggestions overlay gets hidden by the keyboard. Is there a way to display the overlay above the text field in this scenario? Or even better have it automatically choose to display below or above based on whether it has room to fully display or not?

    opened by rgb1380 1
  • Unable to Initialize autocomplete textfield on init method()

    Unable to Initialize autocomplete textfield on init method()

    I can initialize textfield controller in init function. but can't do with autocomplete textfield. it shows error while running code.

    this line: searchTextField.textField.controller.text = widget.custno;

    log: [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The getter 'textField' was called on null. E/flutter (23780): Receiver: null E/flutter (23780): Tried calling: textField E/flutter (23780): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5) E/flutter (23780): #1 _EditBillPageState.setValues.<anonymous closure> package:audit_shop/pages/bill_edit_page.dart:101 E/flutter (23780): #2 State.setState package:flutter/…/widgets/framework.dart:1148 E/flutter (23780): #3 _EditBillPageState.setValues package:audit_shop/pages/bill_edit_page.dart:95 E/flutter (23780): #4 _EditBillPageState.initState

    how do I resolve this?

    opened by iamprakash13 5
Owner
Felix
Felix
Flutter textfield validation lets you validate different textform fields in your Flutter app

Flutter textfield validation lets you validate different textform fields in your Flutter app

World-Package 2 Sep 15, 2022
A markdown renderer for Flutter.

Flutter Markdown A markdown renderer for Flutter. It supports the original format, but no inline HTML. Overview The flutter_markdown package renders M

Flutter 828 Aug 12, 2021
A masked text for Flutter.

flutter_masked_text Masked text input for flutter. Alert Hi guys! Unfortunately, I'm not developing mobile anymore. This repo will not receive updates

Ben-hur Santos Ott 264 Dec 21, 2022
Soft and gentle rich text editing for Flutter applications.

About Zefyr Soft and gentle rich text editing for Flutter applications. You are viewing early dev preview version of this package which is no longer a

Memspace 2.2k Jan 8, 2023
Flutter widget that automatically resizes text to fit perfectly within its bounds.

Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the project Resources: Do

Simon Leier 1.8k Jan 3, 2023
A Flutter package to parse text and make them into linkified text widget

?? Flutter Parsed text A Flutter package to parse text and extract parts using predefined types like url, phone and email and also supports Regex. Usa

Fayeed Pawaskar 213 Dec 27, 2022
A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX

flutter_tex Contents About Demo Video Screenshots How to use? Android iOS Web Examples Quick Example TeXView Document TeXView Markdown TeXView Quiz Te

Shahzad Akram 219 Jan 5, 2023
flutter 中文排版,支持分页上下对齐 两端对齐 翻页动画

text_composition flutter 中文排版 分页 上下对齐 两端对齐 多栏布局 弃用richText,使用Canvas,精确定位绘图位置,消除字体对排版影响 视频与截图 demo https://github.com/mabDc/text_composition/releases/t

西红柿大芝麻 50 Nov 3, 2022
Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase

Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase Use the Flutter PDF Viewer to download PDF documents and display them within your Flut

Johannes Milke 36 Dec 9, 2022
Flutter phone number input

phone_form_field Flutter phone input integrated with flutter internationalization Features Totally cross platform, this is a dart only package / depen

cedvdb 38 Dec 31, 2022
A simple Flutter package that makes turning a FAB into a text field easy.

flutter_text_field_fab A simple Flutter widget that makes turning a FAB into a text field easy.

Haefele Software 4 Jan 18, 2022
A low code editor with the full power of flutter.

flutter_blossom ?? Low code editor with the full power of flutter. Think in flutter, watch your ideas come to life, plan ahead and let your creativity

Flutter Blossom 0 Dec 2, 2021
Soft and gentle rich text editing for Flutter applications

Soft and gentle rich text editing for Flutter applications. Zefyrka is a fork of Zefyr package with the following improvements: support Flutter 2.0 op

null 85 Dec 21, 2022
A Flutter package provides some implementations of TextInputFormatter that format input with pre-defined patterns

A Flutter package provides some implementations of TextInputFormatter that format input with pre-defined patterns

HungHD 192 Dec 31, 2022
Rich Text renderer that parses Contentful Rich Text JSON object and returns a renderable Flutter widget

Contentful Rich Text Renderer for Flutter Rich Text renderer that parses Contentful Rich Text field JSON output and produces a Flutter Widget tree tha

Kumanu 45 Nov 10, 2022
Flutter App for beginner

i_am_rich A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Trần Văn Nguyên 1 Nov 17, 2021
A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.

Extended official text to build special text like inline image or @somebody quickly,it also support custom background,custom over flow and custom selection toolbar and handles.

FlutterCandies 509 Jan 4, 2023
Rich coin project of flutter

rich_coin flutter实现RichCoin项目。 Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 0 Nov 27, 2021
Arc Text Widget for Flutter

Flutter Arc Text Renders text along the arc. See demo. The story behind the plugin is here. Basic usage class MyApp extends StatelessWidget

Kirill Bubochkin 15 Oct 18, 2021