[Proposal]Show Suggestions inline within a widget tree

[sabari7320]

No description provided.

[sabari7320]

this is mycodesclass

code

SearchFieldwithSingleSelection extends StatelessWidget {
  final String label;
  final List itemList;
  final TextEditingController itemController;
  //final String itemKey;
  final ValueChanged<String> 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<String> 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]

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

[maheshj01]

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]

Screenrecorder-2024-06-11-21-24-44-432.1.1.mp4

[maheshj01]

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 5b6189e

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]

this feature was proposed back then #95

[maheshj01]

@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