SwiftUI Stack fill remaining height - ios

Question

I am a beginner in Swift and in iOS development. I am currently trying to create a sing in form with linear background on the top.
I've placed background view to gradient variable. Now I am trying to place my form after background on the top. But it doesn't fill the remaining space. I've tried using Spacer, but then form aligns to the bottom of the screen. How can I expand and align VStack with the form right after the gradient and make it fill the remaining height of the screen.
Here is my code
var gradient: some View {
ZStack(alignment: .top) {
LinearGradient(
stops: [
.init(color: .red, location: 0.4),
.init(color: .orange, location: 0.7),
.init(color: .yellow, location: 0.8)
],
startPoint: .leading,
endPoint: .trailing)
.frame(maxWidth: .infinity, maxHeight: 300, alignment: .top)
.mask(
RoundedRectangle(cornerRadius: 96)
.fill(Color.black)
.frame(width: .infinity, height: .infinity)
)
.blur(radius: 64)
}
.ignoresSafeArea()
.frame(height: .infinity, alignment: .top)
.offset(y: -100)
}
var body: some View {
VStack() {
gradient
Spacer()
VStack () {
VStack (spacing: 8) {
Text("Sign In")
.font(.title)
.fontWeight(.bold)
Text("Access to your account")
.font(.callout)
.foregroundColor(.secondary)
}
VStack (spacing: 18) {
TextField("Username", text: $username)
.modifier(TextFieldOutlined())
TextField("Password", text: $password)
.modifier(TextFieldOutlined())
}
.padding()
}
}
.frame(height: .infinity)
.padding(.bottom, 48)
.ignoresSafeArea()
}
Now it looks like this. With form Stack selected. It don't know why it is not filling the remaining height.

Answer 1

If I understand what you're looking for, you'd like the top portion of the screen to be a fixed size for the gradient, and then the form centered in the remaining part of the screen. You could do this by making the VStack expand using Spacers, modifying the body code to:
var body: some View {
VStack() {
gradient
VStack () {
// Add spacing above the form
Spacer()
VStack (spacing: 8) {
Text("Sign In")
.font(.title)
.fontWeight(.bold)
Text("Access to your account")
.font(.callout)
.foregroundColor(.secondary)
}
VStack (spacing: 18) {
TextField("Username", text: $username)
.modifier(TextFieldOutlined())
TextField("Password", text: $password)
.modifier(TextFieldOutlined())
}
.padding()
// Add spacing below the form
Spacer()
}
}
.padding(.bottom, 48)
.ignoresSafeArea()
}
Some of the padding, as currently written, will keep the form from being perfectly vertically centered, so you may want to tweak that.
Without your TextFieldOutlined() modifier, it looks like this in my preview (gradient is selected and outlined for emphasis):