Flutter Query Field

Sergey Yamshchikov
2 min readDec 26, 2020

--

Search is one of the most used feature within apps available on the market. And there dozen of implementations:

Flutter has number of widgets which make it easy to implement. But most of them incorporate search result list and I haven’t found any for iOS. And what I wanted was:

  • Search field similar to TextField (just a widget, not an additional screen, no predefined result list)
  • Material and Cupertino styles
  • Platform Widgets support

Material and Cupertino search fields not that different from internal perspective, both have dismiss button and clear text button, for both the buttons appears only when the field has focus or not empty. Material search usually has additional controls (e.g. profile button, voice input, e.t.c). And Cupertino has fancy animations involved in appearance of the buttons.

I’ve tried to follow the guidelines and mimic behaviour from Google and Apple, and came up with this:

And I decided to share it as a library .

It has: light mode, dark mode, material and cupertino styles, and PlatformQueryField to allow your app automatically decide which widget is appropriate for current platform.

Happy coding

--

--