Be able to scroll content under the bottom bar with safeAreaInset modifier #swiftui #tip

SafeAreaInsetExample.swift

import SwiftUI

struct GradientBuilderView: View {
  @State private var gradientName = "New Gradient"
  @State private var stopCount = 7
  @State private var isEditing = false

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        ForEach(0..<stopCount, id: \.self) { index in
          RoundedRectangle(cornerRadius: 8)
            .fill(Color(hue: Double(index) / Double(stopCount), saturation: 1, brightness: 1))
            .frame(height: 44)
            .padding(.horizontal)
        }
      }
      .padding(.top)
    }
    // Allow content to scroll beneath bottom bar
    .safeAreaInset(edge: .bottom) {
      HStack {
        if isEditing {
          TextField("Name", text: $gradientName)
            .textFieldStyle(.roundedBorder)
            .padding(.horizontal)
        } else {
          Text(gradientName.isEmpty ? "Untitled Gradient" : gradientName)
            .font(.headline)
            .foregroundStyle(.primary)
            .padding(.horizontal)
        }

        Spacer()

        Text("\(stopCount) colors")
          .foregroundStyle(.secondary)
      }
      .padding()
      .background(.thinMaterial)
    }
    .toolbar {
      ToolbarItem(placement: .topBarTrailing) {
        Button(isEditing ? "Done" : "Edit") {
          isEditing.toggle()
        }
      }
    }
  }
}

// MARK: - Preview
#Preview {
  NavigationStack {
    GradientBuilderView()
      .navigationTitle("Gradients")
  }
}