Material Design-Like Text Field with SwiftUI
Learn to build beautiful, interactive text fields as seen in Google guidelines, using pure SwiftUI.
All Android users are familiar with the Material Design outlined text field:
Although UI designers often use it as a cross-platform UI element, iOS developers are often puzzled about how to implement it. No wonder. Android developers have it working out-of-the-box, whereas on Apple platforms text fields look different, if not just plain.
We iOS developers often end up explaining “different expectations from users of different platforms”, different visual principles, and the like. It’s of course true to a certain extent, but bringing some consistency to your app across supported platforms never hurts. Not to mention keeping your heart open to other ecosystems’ nice findings might make your apps look more attractive.
Introduced in recent years SwiftUI makes building fancy UI a piece of cake. Well, kind of. So, let’s try and build a similar to Material Design text field, using pure SwiftUI. And, to generate some heat, here’s what we’re going to implement:
