Creating Conditional Modifiers for SwiftUI Views
Tags: swift, swiftui
Published: 2023-10-27 04:04:25

---
title: Creating Conditional Modifiers for SwiftUI Views
published: true
date: 2022-11-17 09:49:46 UTC
tags: Swift,SwiftUI
canonical_url: https://swift.my.id/membuat-conditional-modifier-untuk-view-swiftui/
---

![Creating Conditional Modifiers for SwiftUI Views](https://swift.my.id/content/images/2022/11/Screenshot-2022-11-17-at-16.08.18.jpg)

**View modifiers** are adjustments applied to a view or other view modifiers in SwiftUI to control the style or appearance of a view. For example, you can use `.padding` to adjust padding or `.background` to set the background of a view.

## #View Modifier with a Ternary Condition

Sometimes, you may want to add a modifier to a view only when a specific condition is met. For instance, if a value is true, you want to add a red background; otherwise, you don't want any background. This can generally be achieved by adding a **ternary condition**, as shown in the example below.

```swift
import SwiftUI

struct ContentView: View {
    @State private var showColor: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("Toggle warna background"){
                showColor = !showColor
            }
            
            Text("Hello, world!")
                .padding()
                .background(Color( showColor ? .red : .clear))
        }
        .padding()

    }
}
```

![Creating Conditional Modifiers for SwiftUI Views](https://swift.my.id/content/images/2023/10/Screen-Recording-2022-11-17-at-16.27.18.gif)

The mentioned **ternary condition** is `.background(Color(showColor ? .red : .clear))`. While this approach is simple, it requires you to specify all conditions explicitly. This falls short of the requirement mentioned above, which is to add a modifier only when specific conditions are met.

## #View Modifier with Conditional Modifier

Another solution is to create a **conditional modifier**. With this approach, you can add a modifier only when specific conditions are met. To achieve this, create an **View**  **extension** for View as shown below.

```swift
extension View {
    @ViewBuilder func `if`<Content: View>(_ condition: Bool, modifier: (Self) -> Content) -> some View {
        if condition {
            modifier(self)
        } else {
            self
        }
    }
}
```

Then, modify the code as follows to use the **conditional modifier**.

```swift
struct ContentView: View {
    @State private var showColor: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Button("Toggle warna background"){
                showColor = !showColor
            }
            
            Text("Hello, world!")
                .padding()
                // gunakan conditional modifier
                .if(showColor){ view in
                    view.background(Color(.red))
                }
        }
        .padding()
    }
}
```

Take note of the line `.if(showColor) { view in`. Here, we apply the conditional modifier, adding the `.background` modifier to the view if the condition is met.

With this conditional modifier, your modifiers are easier to read and understand.

{% embed https://github.com/meshwara/SwifiUI-Conditional-Modifier.git %}

Give it a try, and hopefully, this small improvement will be beneficial.