How to ignore safe area for a background with a linear gradient in swiftUI?

Question

With SwiftUI, I know how to set a background with a simple color all over screen. So only background ignore the safe area. But when I want to do this with a linear gradient, I don't know do this.

My view with a simple background :

import SwiftUI

struct Settings : View {
  var body: some View {
    ScrollView {
        VStack {
          Text("Boussole")
            .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
            .multilineTextAlignment(.leading)
            .font(.system(size: 28))
            .padding(.top, 15)
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
          Toggle(isOn: .constant(false)) {
            Text("Afficher le vrai nord")
              .font(.system(size: 20))
              .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
          }
          .padding(.top, 10)
          Toggle(isOn: .constant(true)) {
            Text("Activer la vibration")
              .font(.system(size: 20))
              .color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 1.0))
          }
          .padding(.top, 10)
          .padding(.bottom, 20)
          Divider()
        }
      .padding(.leading, 25)
      .padding(.trailing, 25)
    }
    .background(Color.gray.edgesIgnoringSafeArea(.all))
  }
}

So in this case, the safe area is ignored only for the background.

But how can I do this with this type of background ?

.background(LinearGradient(gradient: Gradient(colors: [Color(red: 189/255, green: 195/255, blue: 199/255, opacity: 1.0), .white]), startPoint: .topTrailing, endPoint: .bottomLeading), cornerRadius: 0)

I don't know how to place .edgesIgnoringSafeArea(.all)

Answer 1

Although this doesn't apply to the OP, in cases where the linear gradient's color changes are strictly vertical (i.e. startPoint is .top and endPoint is .bottom), then as an alternative to Mojtaba's solution, you can add a second (and third) .background using the Colors at the top and bottom of your gradient.

So,

.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)

Could become,

.background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)
.background(Color(.red).edgesIgnoringSafeArea(.top))
.background(Color(.white).edgesIgnoringSafeArea(.bottom))

This will work in portrait mode, not sure about landscape though!

Answer 2

You should use ZStack. Also, note that the LinearGradient is a View itself and there is no need to embed it in background modifier. So:

var body: some View {
    ZStack {
        LinearGradient(gradient: Gradient(colors: [.red, .orange]), startPoint: .topTrailing, endPoint: .bottomLeading)
            .edgesIgnoringSafeArea(.all)

        ScrollView {
            VStack {
                ForEach((1...100), id:\.self ) { Text("\($0)").padding() }
            }
        }
    }
}

Answer 3

This should fix the bottom trail for iPhone X, XS, 11 and so on

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.black,.blue]), startPoint: .top, endPoint: .bottom).edgesIgnoringSafeArea(.all)
            Text("The only label")
        }
    }
}