Padding property for Suggestions

[AndriiReverchuk]

Dear Developers,

I hope this message finds you well. First of all, I would like to express my sincere appreciation for your work on the "Search Field" package. It has proven to be a valuable tool, and I am impressed with its functionalities and ease of use.

After using the package extensively, I have identified an area where a feature enhancement could significantly improve the user experience. Specifically, I would like to request the ability to set padding top and bottom for the suggestions displayed in the search field.

Having the option to adjust the padding for suggestions would provide greater flexibility in terms of the package's customization and appearance, as it would allow users to tailor the suggestion list to their specific design requirements. This, in turn, would help create a more visually appealing and user-friendly interface for the end-users.

To better illustrate my point, I have attached an image that demonstrates how the current padding appears in the suggestions list and how the desired padding adjustment could improve the overall presentation. I believe this visual aid will help clarify my request and emphasize the potential benefits of this feature enhancement.

I understand that you have a busy schedule and many other feature requests to consider, but I genuinely believe that this enhancement would be a valuable addition to the "Search Field" package. I would be grateful if you could consider implementing this feature in a future update.

If you need further clarification or have any questions about my request, please feel free to contact me. I look forward to your response and thank you in advance for your time and consideration.

Best regards,
Andrii

[maheshmnj]

Dear @AndriiReverchuk,

Thank you for using the "SearchField" package and for providing your valuable feedback. I appreciate your efforts to help me improve the package.

I am pleased to inform you that it is indeed possible to set padding on top and bottom for the suggestions displayed in the search field using the child property of SearchFieldListItem which allows you to pass a custom widget to SearchField suggestions e.g Padding widget in Flutter. The below code sample shows how to achieve this by wrapping the child of the SearchFieldListItem with a Padding widget and specifying the desired padding values.

Here is an example of how you can modify the code to set padding for the suggestions:

SearchField(
            onSearchTextChanged: (query) {
              final filter = suggestions
                  .where((element) =>
                      element.toLowerCase().contains(query.toLowerCase()))
                  .toList();
              return filter
                  .map((e) => SearchFieldListItem<String>(
                        e,
                      ))
                  .toList();
            },
            key: const Key('searchfield'),
            hint: 'Search by country name',
            itemHeight: 50,
            suggestions: suggestions
                .map((e) => SearchFieldListItem<String>(e,
                    child: Padding( // pass a custom child widget here
                      padding: const EdgeInsets.symmetric(vertical: 4.0),
                      child: Text(e, 
                          style: TextStyle(fontSize: 24, color: Colors.red)),
                    )))
                .toList(),
            focusNode: focus,
            suggestionState: Suggestion.expand,
            onSuggestionTap: (SearchFieldListItem<String> x) {
              focus.unfocus();
            },
          ),
        )

I hope this solution helps you achieve what you are trying to do. If you have any further questions or need further assistance, please do not hesitate to write back I would be happy to answer your question.

Best regards,
Mahesh 😊

[AndriiReverchuk]

Dear @maheshmnj,

I hope this email finds you well. I am writing to express my gratitude for your quick reply to my previous email. Your prompt response is much appreciated.

However, I would like to bring to your attention that the result provided was not exactly what I was expecting. In order to give you a better understanding of my expectations, I have attached a video file to this email. Please take some time to review it carefully, as it demonstrates the specific outcome I am looking for.
https://github.com/maheshmnj/searchfield/assets/66751960/0784149a-9121-4ced-b1eb-0245a5f49c5c

I understand that misunderstandings can happen, and I appreciate your continued assistance in resolving this matter. If you have any questions or require further clarification, please do not hesitate to reach out. Your expertise and guidance are invaluable to me.

Once again, thank you for your swift response, and I look forward to hearing from you soon with the correct results.

Best regards,
Andrii

[maheshmnj]

Thanks for the clarification @AndriiReverchuk I have released a new version v0.8.1 with a fix that should help achieve your use case. The padding property has been added to SuggestionDecoration

Without padding

  suggestionsDecoration: SuggestionDecoration(
              // padding defaults to zero if not specified),
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(10))),

output

With padding

 suggestionsDecoration: SuggestionDecoration(
                padding: EdgeInsets.only(top: 10.0, left: 20, bottom: 20),
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(10))),

Sample output

Closing as fixed, In case you still have any issues please do not hesitate to write back and I would be happy to answer your questions and thank you for your help improving the package.