Textfield background image Aspect fit is restricting the width in iPad in swiftUI

Question

In iPhone designs looks fine. But in iPad, the TextField width is not increasing. And if I change the content mode to fill both fields are overlapping. How can I fix this?

    var body: some View {
       
        VStack (alignment: .center,spacing :35){
            
            TextField("Enter Username", text: $username).frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Image("userinput").resizable().aspectRatio(contentMode: .fit)).multilineTextAlignment(.center).padding([.leading,.trailing],15)
                            
            TextField("Enter Password", text: $username).frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Image("pswrd").resizable().aspectRatio(contentMode: .fit)).multilineTextAlignment(.center).padding([.leading,.trailing],15)
                
            Button("SIGN IN") {
               action = true
                print("Just tapped")
            }.frame(minWidth: 0 , maxWidth: .infinity).frame(height: 55).background(Color(red: 46/255, green: 152/255, blue: 182/255)).foregroundColor(.white).cornerRadius(5).padding([.leading,.trailing],50)
       
    }
}

Answer 1

The text field's width is definitely increasing (try adding a .border(Color.gray) to test). But, I assume your userinput or pswrd images look something like this?

This is bad practice. You don't want to make your image contain dynamic stuff like the text field's border, because images are fixed and can't stretch.

Instead, make your image only contain the image, then use HStack to put it on the left.

struct ContentView: View {
    @State var username = ""
    @State var password = ""
    
    var body: some View {
        VStack(alignment: .center, spacing: 35) {
            
            HStack {
                Image("userinput")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                TextField("Enter Username", text: $username)
                    .multilineTextAlignment(.center)
            }
            .frame(height: 55)
            .border(Color.gray)
            .padding([.leading, .trailing], 15)
            
            HStack {
                Image("pswrd")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                TextField("Enter Password", text: $password)
                    .multilineTextAlignment(.center)
            }
            .frame(height: 55)
            .border(Color.gray)
            .padding([.leading, .trailing], 15)
            
            Button("SIGN IN") {
                print("Just tapped")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 55)
            .background(Color(red: 46/255, green: 152/255, blue: 182/255))
            .foregroundColor(.white)
            .cornerRadius(5)
            .padding([.leading, .trailing], 50)
            
        }
    }
}

Result:

iPhone	iPad

Answer 2

Are you sure that the width of the TextField is not increasing? I copied and pasted the code in Xcode but the frame is working just fine and is increasing/decreasing with screen size.

The problem would be in the image. You inserted an image with fixed Properties on top of the textField. I recommend applying it manually and checking your image.

https://thehappyprogrammer.com/custom-textfield-in-swiftui/

This website may help you in creating your textfields.

If you want an Image beside the textfield you can insert it in Hstack for better optimization. For example

        HStack {
            Image(systemName: "person.fill").frame(width: 55, height: 55).background(Color(.systemGray5)).foregroundColor(.blue)
            TextField("Enter Username", text: $username).frame(minWidth: 0 , maxWidth: UIScreen.main.bounds.width/2).frame(height: 55)
        }.border(Color.gray)

Change the Colors and the person image to your liking. I also recommend know about GeometryReader and UIScreen.main.bounds, they are really good in designing the best user interface.