Search code examples
flutterflutter-dependenciestypeahead

Flutter typeahead showing all suggestions ontap field (UNWANTED)


I am using the typeahead package for flutter to show a textfield with the suggestions capability, but I am getting unwanted behavior. When the user first tap the field, I do not want to show any suggestions but it's showing a list of all suggestions like a dropdown field. I have even set getImmediateSuggestion: false but it's still doing this[![enter image description here][1]][1]

              alignment: Alignment.center,
              //padding: EdgeInsets.symmetric(vertical: 16),
              //height: (0.0725 * y),
              child: TypeAheadFormField(
                keepSuggestionsOnLoading: false,
                hideOnEmpty: true,
                hideOnLoading: true,
                //initialValue: '',
                enabled: false,
                hideOnError: true,
                textFieldConfiguration: TextFieldConfiguration(
                  //textAlign: TextAlign.left,
                  //autofocus: true,
                  
                  controller: _typeAheadController,
                  style: TextStyle(color: mainTextColor, fontSize:14, fontWeight: FontWeight.w400 ),
                  decoration: InputDecoration(
                      filled: true,
                      fillColor: cardColor,
                      labelStyle: TextStyle(fontSize: (0.04*x), color: mainTextColor, fontWeight: FontWeight.w400),
                      hintText: 'Type degree',
                      hintStyle: TextStyle(fontSize: (14), color: hintColor, fontWeight: FontWeight.w400),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide.none),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                        borderSide: BorderSide(color: hintColor, width: 0.8)
                      )
                    ),
                ),
                //suggestionsBoxController: ,
                getImmediateSuggestions: false,
                suggestionsCallback: (pattern){
                  return DegreeSearchService(uni: currentUniversity).getSuggestions(pattern);
                }, 
                itemBuilder: (context, suggestion){
                  return ListTile(
                    dense: true,
                    title: Text(suggestion, style: TextStyle(fontSize: 14,color: Colors.black),)
                  );
                }, 
                onSuggestionSelected: (suggestion){
                  _typeAheadController.text = suggestion;
                  currentDegree = suggestion;//enable next press
                  //pageController.animateToPage(++currentPage, duration: Duration(milliseconds: 250), curve: Curves.bounceInOut );

                }
              )
            ), ```


  [1]: https://i.sstatic.net/FUXjl.png

Solution

  • Try to change your suggestionsCallback to not show results if the pattern length is 0, for example:

    suggestionsCallback: (pattern){
      if (pattern.length > 1) {
        return DegreeSearchService(uni:currentUniversity).getSuggestions(pattern);
      }
    
    },