How to create a roundRectangle that will cover the lower part of screen

Question

I've tried to design the layout based on prototype but I can't really figure how to create a roundRectangle that can cover the lower bottom of screen with a Color background underlay of it

//
//  Home.swift
//  MealMe[![enter image description here][1]][1][![enter image description here][1]][1]
//
//  Created by Ting Qu on 9/2/24.
//

import SwiftUI

struct Home: View {
    var body: some View {
        Color.accentColor
            .ignoresSafeArea()
            .overlay {
                VStack{
                    HStack{
                        Text("Hi Grace")
                            .font(.title)
                            .bold()
                        
                        Spacer()
                        
                        Image(uiImage: UIImage(named: "AppIcon")!)
                            .resizable()
                            .scaledToFill()
                            .clipShape(Circle())
                            .overlay(
                                Circle()
                                    .stroke(Color.white, lineWidth: 2).shadow(radius: 4)
                            )
                            .frame(width: 42, height: 42)
                        
                    }
                    .padding()
                    
                    HStack{
                        Text("August")
                            .bold()
                        Spacer()
                        Image("Calendar")
                    }
                    .padding([.top, .horizontal])
                    
                    ScrollView(.horizontal, showsIndicators: false){
                        HStack{
                            ForEach(1...7, id:\.self){ index in
                                if index == 2{
                                    singlePickedDate(isSelected: true)
                                }
                                else{
                                    singlePickedDate(isSelected: false)
                                }
                            }
                        }
                    }
                    .scrollBounceBehavior(.basedOnSize)
                    
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color.white)
                    
                }
            }
    }
}

#Preview {
    Home()
}

My current code looks like this, I wonder how to make the roundRectangle to cover this part of screen

I want to achieve something like this

Answer 1

Just add . ignoresSafeArea to the RoundedRectangle:

RoundedRectangle(cornerRadius: 25)
    .fill(Color.white)
    .ignoresSafeArea() // 👈 HERE

Currently, the RoundedRectangle is just an empty shape. If you intend to show content here, then it would be best to show the RoundedRectangle as the .background behind the content. This way, the content can respect the safe area, but the background can extend to the edges of the screen. For example:

VStack {
    // main content
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background {
    RoundedRectangle(cornerRadius: 25)
        .fill(.white)
        .ignoresSafeArea()
}