Example project with search feature implementation #96
Conversation
…ced TextField handling
… default example simple
| )) | ||
| else | ||
| _buildSearchResults(context, emojiSize, cellSize), | ||
| _buildSearchBar(context, value.text.isEmpty) |
There was a problem hiding this comment.
Currently it's not possible to remove the focus from the searchBar. How about aligning it with Whatsapp keyboard that collapse to SearchResults after pressing on the search-icon already and provides a back button to show the emoji-keyboard again. Just an suggestion since you were not happy with the current example.
There was a problem hiding this comment.
I've added a back button. It's not exactly as in Whatsapp: they, for example show some common emojis with empty search text. I think it's a good start, but there are so many usability options you can think about which in the end come down to personal preferences. That's why search implementation outside of the library itself makes a lot of sense.
| late final _utils = EmojiPickerInternalUtils(); | ||
| late final _utils = EmojiPickerUtils(); |
There was a problem hiding this comment.
Nice 👍 will make it bit easier for people who copy & paste the code for custom View
| /// A widget that represents an individual clickable emoji cell. | ||
| /// Can have a long pressed listener [onSkinToneDialogRequested] that | ||
| /// provides necessary data to show a skin tone popup. | ||
| class EmojiCell extends StatelessWidget { |
There was a problem hiding this comment.
I was thinking you want to extract this logic in order to use it outside of the emoji-keyboard but also inside. In this PR the EmojiCell is only used in your example. Does it make sense to use it internal as well?
There was a problem hiding this comment.
That was the plan. Somehow, when I was stashing code to move between my workstations, the main changes for the default_emoji_picker_view.dart file got lost. Luckily, I was able to recover it, so it's all good now.
| children: [ | ||
| if (!_isSearchFocused) | ||
| IconButton( | ||
| onPressed: _searchFocusNode.requestFocus, |
There was a problem hiding this comment.
Not a blocker, but I would close the EmojiPicker when the search field is focused. Let me know if you want to change it or not. Then I will merge 👍
There was a problem hiding this comment.
This is a matter of personal preference, I think. Our internal search method returns empty list for an empty search phrase, so we need a bigger change to replicate WhatsApp behavior. Therefore, to me it makes sense to keep showing full picker UI until user starts typing. This has no effect on the library, though, so I've changed it to show search results whenever search field gets focused.
Enhancements suggested in #94 and #95
This turned out to be a bigger change than I expected and still, the search example is not that elegant, as for me. Majority of the code is dedicated to handling skin tone popup and it follows the internals of picker quite closely. It does the job, but maybe there are ways to make it tidier.
One of the options I see would be making an independent
SearchResultswidget that can encapsulate the complexity of this feature, but it would require some sort of config approach that can share some settings with picker and introduce search-only options. I think this goes beyond the scope of this PR.