CupertinoSearchTextField — All Cupertino Widgets

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important classes, and more in this series. All the articles will be less than 2 minutes long, so you can read them every time :) In addition to that, they will be very easy to understand, following the motto

Make everything as simple as possible, but not simpler. ~ Albert Einstein

If you want to check out the other articles of this series, check out this list. Let’s get started!

Happy reading!

CupertinoSearchTextField

CupertinoSearchTextField is a CupertinoTextField that looks and behaves like the UISearchTextField of iOS. It is very easy to use, so let’s get started!

First, there is the controller property. This is for controlling the text field and getting the text that the user input. You can also call different functions when something has changed with onChanged, when the user submitted the field with onSubmitted or when the user clicks the X-Mark (suffix) with onSuffixTab. Of course, there is onTap too, that is called for each distinct tap.

Okay, great, this was all that we need to know about functionality for now. Now, let’s talk about UI and UX.

With backgroundColor you can set the background color, borderRadius sets the border-radius, you can set the BoxDecoration with decoration, set the padding and set the TextStyle with textStyle. There is also placeholder and placeholderStyle to customize the placeholder.

Great, these were quite basic properties. But now we want to customize our prefix icon (usually a magnifier icon) and our suffix icon (usually a X). But you can change the icons with prefixIcon and suffixIcon. prefixInsets and suffixInsets set the padding insets for the prefix & suffix. Lastly, there is suffixMode, which dictates when the suffix should be visible and itemColor to set the prefix & suffix color.

Great. Now let’s talk about the last important properties. autocorrectdetermines whether to autocorrect or not and autofocus determines whether this text field should focus itself if nothing else is already focused. You can enable/disable the search text field with enabled.

Great! There are some other properties, but we won’t talk about them in this article. Let’s take a look at an example.

Further reading & Conclusion

In this article, you have learned how to use the CupertinoSearchTextField.

Did you know that there are great packages that enhance your development enormously? For example Freezed, Isar, or Flutter Hooks. If you want to learn about these great packages, I have entire tutorials about them. Check them out here.

In the following few articles, I will introduce more Cupertino widgets, essential classes, and more stuff. If you don’t want to miss this, I recommend you follow me!

Thanks for reading, have a nice day!