'Overlay a color over SwiftUI view?

For my SwiftUI notes app, I would like to overlay a color over the entire view, but I've only been able to cover half off the screen with the color. Other attempts at setting the color and an overlay has only resulted in errors so far. Is there a solution to this? Or should go about this another way? Image has been provided as well. 1

import SwiftUI

let dateFormatter2 = DateFormatter()

struct NoteItem2: Codable, Hashable, Identifiable {
    let id: Int
    let text: String
    var date = Date()
    var dateText: String {
        dateFormatter.dateFormat = "h:mm a"
        return dateFormatter.string(from: date)
    }
}

struct green_screen : View {
    @State var items: [NoteItem] = {
        guard let data = UserDefaults.standard.data(forKey: "notes") else { return [] }
        if let json = try? JSONDecoder().decode([NoteItem].self, from: data) {
            return json
        }
        return []
    }()
    
    @State var taskText: String = ""
    
    @State var showAlert = false
    
    @State var itemToDelete: NoteItem?
    
    var alert: Alert {
        Alert(title: Text("Hey!"),
              message: Text("Are you sure you want to delete this item?"),
              primaryButton: .destructive(Text("Delete"), action: deleteNote),
              secondaryButton: .cancel())
    }
    
    var inputView: some View {
        Color.green
            .overlay(
        HStack {
            TextField("Write a note for yourself...", text: $taskText)
                .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
                .clipped()
            Button(action: didTapAddTask, label: { Text("Add") }).padding(8)
        })
            .edgesIgnoringSafeArea(.all)
    }
    
    var body: some View {
        VStack {
            inputView
            Divider()
            List(items) { item in
                VStack(alignment: .leading) {
                    Text(item.dateText).font(.headline)
                    Text(item.text).lineLimit(nil).multilineTextAlignment(.leading)
                }
                .onLongPressGesture {
                    self.itemToDelete = item
                    self.showAlert = true
                }
            }
            .alert(isPresented: $showAlert, content: {
                alert
            })
        }
    }
    
    func didTapAddTask() {
        let id = items.reduce(0) { max($0, $1.id) } + 1
        items.insert(NoteItem(id: id, text: taskText), at: 0)
        taskText = ""
        save()
    }
    
    func deleteNote() {
        guard let itemToDelete = itemToDelete else { return }
        items = items.filter { $0 != itemToDelete }
        save()
    }
    
    func save() {
        guard let data = try? JSONEncoder().encode(items) else { return }
        UserDefaults.standard.set(data, forKey: "notes")
    }
}

struct green_screen_Previews: PreviewProvider {
    static var previews: some View {
        green_screen()
    }
}


Solution 1:[1]

First you have to add green color to entire view instead of the inputView.

var inputView: some View {
        GeometryReader{ geo in
            HStack {
                TextField("Write a note for yourself...", text: $taskText)
                    .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
                    .clipped()
                Button(action: didTapAddTask, label: { Text("Add") }).padding(8)
            }
            .frame( height: geo.size.height/2)
        }

    }

and main view

    VStack {
         inputView
    
         Divider()
    
         List(items) { item in
                    VStack(alignment: .leading) {
                        Text(item.dateText).font(.headline)
                        Text(item.text).lineLimit(nil).multilineTextAlignment(.leading)
                    }
                    .onLongPressGesture {
                        self.itemToDelete = item
                        self.showAlert = true
                    }
                }
                .listRowBackground(Color.green)
                .alert(isPresented: $showAlert, content: {
                    alert
                })
   }
   .background(Color.green) // <-- here
   .ignoresSafeArea() // <-- here

after this modification also you cannot see the color overlay on entire screen because of SwiftUI list block the view color from it's default background color.so you need to change it clear color,

init() {
   UITableView.appearance().separatorStyle = .none
   UITableViewCell.appearance().backgroundColor = .clear
   UITableView.appearance().backgroundColor = .clear
}

Result

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dilan