Fill safe area with color

Question

I want to fill the remaining white space with one color but i can't find any way to do that and i'm beginner on ios development

Photo of my app:

Use `.edgesIgnoringSafeArea(.all)` to ignore safe areas. From there, you can calculate the size of the safe area using GeometryReader. — Tamás Sengel, Aug 24 '21 at 20:06
https://swiftuirecipes.com/blog/navigation-bar-styling-in-swiftui — RTXGamer, Aug 24 '21 at 20:24
Edit your question and post your code used to generate this view — Leo Dabus, Aug 25 '21 at 01:18
Does this answer your question? [SwiftUI - How do I change the background color of a View?](https://stackoverflow.com/questions/56437036/swiftui-how-do-i-change-the-background-color-of-a-view) — Adrien, Aug 27 '21 at 16:28

score 1 · Answer 1 · answered Aug 25 '21 at 04:34

1

Using the property .ignoresSafeArea() on your view can expand the boundaries of your settings view outside of the safe areas.

The documentation can be found here

answered Aug 25 '21 at 04:34

Stoic

945
12
22

2

But this might also affect child views and preventing TextField from respecting it, more precisely the bottom one and end up being covered by the keyboard. – Leo Dabus Aug 25 '21 at 07:25

score 1 · Accepted Answer · answered Aug 25 '21 at 08:16

Put your content into a ZStack and use a view with .ignoresSafeArea(.all) as background.

struct MainView: View {
    var body: some View {
        ZStack {
            GradientBackground(colors: [.red, .green])
                .edgesIgnoringSafeArea(.all)
            VStack(alignment: .leading) {
                HStack {
                    Text("Setttings")
                        .foregroundColor(.white)
                        .font(.title)
                        .bold()
                    Spacer()
                }
                .padding(16)
                .background(Rectangle().fill(Color.blue))
                Spacer()
            }
        }
    }
}

struct GradientBackground: View {
    let colors: [Color]
    var body: some View {
        LinearGradient(gradient: .init(colors: colors), startPoint: .top, endPoint: .bottom)
    }
}

Fill safe area with color

2 Answers2