maheshj01 / searchfield

A highly customizable simple and easy to use flutter Widget to add a searchfield to your Flutter Application.This Widget allows you to search and select from list of suggestions.
MIT License
81 stars 59 forks source link

[Proposal]Show Suggestions inline within a widget tree #147

Open sabari7320 opened 3 months ago

sabari7320 commented 3 months ago

this is mycodesclass

code ```dart SearchFieldwithSingleSelection extends StatelessWidget { final String label; final List itemList; final TextEditingController itemController; //final String itemKey; final ValueChanged onChanged; const SearchFieldwithSingleSelection({ Key? key, required this.label, required this.itemList, required this.itemController, //required this.itemKey, required this.onChanged, }) : super(key: key); @override Widget build(BuildContext context) { return Container( child: SearchField( suggestionState:Suggestion.expand, suggestionDirection: SuggestionDirection.down, offset: Offset(0, -110), searchInputDecoration: InputDecoration( border: InputBorder.none, labelText: label, enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: kGreyColor), borderRadius: BorderRadius.circular(10), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: kGreyColor), borderRadius: BorderRadius.circular(10), ), disabledBorder: OutlineInputBorder( borderSide: BorderSide(color: kGreyColor), borderRadius: BorderRadius.circular(10), ), errorBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(10), ), hintStyle: TextStyle(color: Colors.black), contentPadding: const EdgeInsets.symmetric( vertical: 5, horizontal: 10, ), ), onSuggestionTap: (SearchFieldListItem x) { onChanged(x.item!); }, suggestions: itemList .map( (e) => SearchFieldListItem( e.toString(), item: e.toString(), child: Text(e.toString()), ), ) .toList(), controller: itemController, ), ); } } and i am calling like this SearchFieldwithSingleSelection( label: 'Designation', itemList: designationList, itemController: designationController, onChanged: (selectedItem) { setState(() { if(! desList.contains(selectedItem)){ desList.add(selectedItem); } }); FocusManager.instance.primaryFocus?.unfocus(); print(" desListLIST: ${ desList}"); }, ), ```
sabari7320 commented 3 months ago

Uploading Screenrecorder-2024-06-11-21-24-44-432 (1) (1).mp4…

sabari7320 commented 3 months ago

Uploading Screenrecorder-2024-06-11-21-24-44-432 (1) (1).mp4…

maheshj01 commented 3 months ago

Hi @sabari7320, I don't really understand what issue you are referrig to can you please edit and rephrase your issue? With minimal and complete code sample that I can run to reproduce the issue and possibly an screenshot/recordings to support your report.

Thanks

sabari7320 commented 3 months ago

https://github.com/maheshmnj/searchfield/assets/94843546/311a32c5-0455-4291-9634-30186d524cdc

maheshj01 commented 3 months ago

Hey @sabari7320, Thanks for the clarification. This is currenlty not possible with Searchfield. Since the suggestions are basically an overlay drawn on top of the UI as an Overlay and not in a Widget Tree. I think the only way to solve is to bring back inline Support for Suggestions which was removed https://github.com/maheshmnj/searchfield/commit/5b6189e2b47f306cfb77c38d59e0989725246ebd

I think this perfectly makes a valid use case to have a suggestions in a widget tree.

For now I think you can try something like unfocus when the user Scrolls the UI to close the Searchfield.

maheshj01 commented 3 months ago

this feature was proposed back then https://github.com/maheshmnj/searchfield/issues/95

maheshj01 commented 3 months ago

@sabari7320 How about you close the Searchfield when you scroll the UI?

Searchfield(
 focusNode: focus,
...
 )
   scrollController.addListener(() {
      if (scrollController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        focus.unfocus();
      }
    });

You can write your custom logic, when you would like to hide the suggestions.

This approach seems better than showing the suggestions in a widget tree which would abruptly add and remove suggestions in the widget tree. lmkwyt