A Flutter Typeahead Component

Lately I have been spending time learning about streams in Flutter.  In my last post I dug into how to build a user interface based on streams using StreamBuilder.  If you have not read that article, check it out – Flutter: Building a Widget with StreamBuilder.  However it is not a precursor to this article so no worries if you came here just wanting to see about this Typeahead component.

My Motivation for building a Typeahead

As I mentioned I have been spending time becoming acquainted with streams in Flutter.  One of the ideas I had at the outset was to see how easy it would be to put together a component that fulfilled a pretty common use case and took advantage of streaming.  Hence I created the Typeahead component.  This is purely a “version 1” of this component and there could be much done to improve but of course simplicity is best when you begin something!

What does it look like?

On the surface, it looks just like a regular TextField:

When it is loading data, you will see a CircularProgressIndicator:

And when data has finished loading, all results are displayed below the TextField using a ListView.builder:

This component/widget won’t win any design awards, but I do think I accomplished the goal of keeping it simple 🙂  In order to make this really easy to include in your app, I have created it as a plugin and published it here: Flutter Typeahead Plugin

So go give it a try and provide feedback out on its github page.  If I get enough feedback I’ll put in some time to enhance the widget.  Thanks!

 

Leave a Reply

Your email address will not be published. Required fields are marked *