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!
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.
backgroundColor you can set the background color,
borderRadius sets the border-radius, you can set the
decoration, set the
padding and set the
textStyle. There is also
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
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
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!