I want to use the Material Design text field component in SwiftUI. There is a Material Design Text Field Component written for UIKit but not one for SwiftUI. Is it possible to use this Material Design Text Field Component in SwiftUI?
3 Answers
As far as I am concern its not possible to directly use material-design in SwiftUI. But you can integrate your UIKit view into your SwiftUI view(Do it with every view though its a bit tedious) and you can use material-design inside your SwiftUI view. Thats how I am using it now.
Comments
I have created a sdk to MDC textfields with more customizations and features.
Made without using UIKit.
Check here - https://github.com/vishnuo-o/SwiftUIDevKit
1 Comment
soundflix
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
You can create your own textfield components with material-ui styled, and I find it easy using swiftui.
import SwiftUI
struct CustomFieldText: View {
@Binding var name: String
var label: String
var required: Bool = true
var indicator: Bool = false
@State private var onKeyIn = false
var body: some View {
ZStack {
VStack(alignment: .leading) {
HStack {
Text(label)
if required {
Text("*")
}
Spacer()
}
.multilineTextAlignment(.leading)
.font(.custom("ZonaPro-SemiBold", size: self.onKeyIn || self.name != "" ? 14 : 18))
.foregroundColor(.white)
.offset(y: self.onKeyIn || self.name != "" ? -30 : 0)
.animation(.spring(response: 0.5, dampingFraction: 1, blendDuration: 0))
Rectangle().frame(height: 3)
.cornerRadius(10)
.foregroundColor(Color(#colorLiteral(red: 0.8392156863, green: 0.8784313725, blue: 0.8784313725, alpha: 1)))
}
VStack {
TextField(self.name, text: self.$name)
.font(.custom("ZonaPro-SemiBold", size: 18))
.autocapitalization(.none)
.textContentType(.nickname)
.foregroundColor(.white)
.padding(.bottom, 15)
.padding(.top, 5)
.onTapGesture {
self.onKeyIn = true
}
.zIndex(1)
}
VStack {
if indicator && self.name.count > 0 {
HStack {
Spacer()
Text("Verifying")
.font(.custom("ZonaPro-Light", size: 10))
.foregroundColor(Color.white)
}
}
}
}
}}
and how to use it?
CustomFieldText(name: self.$auth.email, label: "Your Email ID")
