SwiftUI - Can't fill screen on the bottom of sheet

Question

The bottom of my sheet is not filling up with color for some reason. Tried the below code, but can only fill the top safe space. Any clue?

var body: some View {
    GeometryReader { geometry in
        VStack {
            Text("Hi")
                .font(.title)
        }
        .frame(width: geometry.size.width, height: geometry.size.height)
        .background(LinearGradient(gradient: Gradient(colors: [Color(hex: 0x71A2B6), Color(hex: 0xF09D51)]), startPoint: .top, endPoint: .bottom))
        .edgesIgnoringSafeArea(.all)
    }
}

user_8697793 · Answer

You have set .frame(width: geometry.size.width, height: geometry.size.height) which will not cover the bottom area.

And if your goal is just to have your View fill the whole screen you may not need a GeometryReader.

You can try using a ZStack instead:

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color(hex: 0x71A2B6), Color(hex: 0xF09D51)]), startPoint: .top, endPoint: .bottom)
            VStack {
                Text("Hi")
                    .font(.title)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

user_4253437 · Answer

I moved .edgesIgnoringSafeArea(.all) down to cover the GeometryRender so that it would fill the device, thus providing the correct screen dimensions.

import SwiftUI

struct ContentView: View {

var body: some View {
    GeometryReader { geometry in
        VStack {
            Text("Hi")
                .font(.title)
        }
        .frame(width: geometry.size.width,
               height: geometry.size.height)
        .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]),
                                   startPoint: .top,
                                   endPoint: .bottom))

    }.edgesIgnoringSafeArea(.all)
    }
}

SwiftUI - Can't fill screen on the bottom of sheet

2 Answers