<p data-selectable-paragraph="">One of the struggling topics a learner faces with SwiftUI is presenting alerts and sheets. SwiftUI brings a cool reactive syntax, but sometimes it also has some hassles. In this article, we&#8217;ll look at a dynamic, easy way to show a SwiftUI alert or sheet.</p>
<h2 id="77ce" class="kg kh il bn ki kj kk kl km kn ko kp kq jt kr ks kt jx ku kv kw kb kx ky kz la gp" data-selectable-paragraph="">In Summary</h2>
<p id="58b7" class="pw-post-body-paragraph ji jj il jk b jl lb jn jo jp lc jr js jt ld jv jw jx le jz ka kb lf kd ke kf ie gp" data-selectable-paragraph="">We store alert and sheets in containers. Containers are stored in the view model. By assigning values(alert or sheet) to the containers, the view updates and shows the alert or sheet.</p>
<h2 id="e040" class="kg kh il bn ki kj kk kl km kn ko kp kq jt kr ks kt jx ku kv kw kb kx ky kz la gp" data-selectable-paragraph="">Starting from scratch</h2>
<p id="d6aa" class="pw-post-body-paragraph ji jj il jk b jl lb jn jo jp lc jr js jt ld jv jw jx le jz ka kb lf kd ke kf ie gp" data-selectable-paragraph="">We create 2 container classes as helpers to store alert and sheet views.</p>
<p data-selectable-paragraph=""><script src="https://gist.github.com/9bffb3c0a4694457b5af201eda11e705.js"></script></p>
<p data-selectable-paragraph=""><script src="https://gist.github.com/c9f017eb8728aa83b88d582aa2dc6e42.js"></script></p>
<p id="2eda" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph=""><strong class="jk im">alert </strong>property is the native alert struct in SwiftUI.</p>
<p id="cbd6" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph=""><strong class="jk im">view</strong> property is the view we wish to show as sheet.</p>
<h2 id="54b8" class="kg kh il bn ki kj kk kl km kn ko kp kq jt kr ks kt jx ku kv kw kb kx ky kz la gp" data-selectable-paragraph="">How we will use containers?</h2>
<p id="4638" class="pw-post-body-paragraph ji jj il jk b jl lb jn jo jp lc jr js jt ld jv jw jx le jz ka kb lf kd ke kf ie gp" data-selectable-paragraph="">We have a view model that&#8217;s connected to our main view, ContentView.</p>
<p data-selectable-paragraph=""><script src="https://gist.github.com/3b83291417c7d66efe42738fae78da12.js"></script></p>
<p data-selectable-paragraph="">The view model stores alert and sheet containers, which gives us the flexibility to show them from the view model. Our view can also show them.</p>
<p data-selectable-paragraph=""><script src="https://gist.github.com/1bf50fe1ddd9dfb8e9dfac3a03f6d087.js"></script></p>
<p id="b65f" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph="">All we need to do is fill out the <strong class="jk im">alert</strong> and <strong class="jk im">sheet</strong> properties. When we pass a value to the alert or sheet containers in the view model, they will show up.</p>
<p id="b6dc" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph=""><strong class="jk im"><em class="lq">P.S.</em></strong><em class="lq"> Do not forget to put the </em><strong class="jk im"><em class="lq">StateObject</em></strong><em class="lq"> prefix to viewModel property at the 2. line of the class. It triggers the view if there is a change in the view model. </em><a class="au lr" href="https://www.hackingwithswift.com/quick-start/swiftui/what-is-the-stateobject-property-wrapper" target="_blank" rel="noopener ugc nofollow"><em class="lq">More details</em></a></p>
<h2 id="07a8" class="kg kh il bn ki kj kk kl km kn ko kp kq jt kr ks kt jx ku kv kw kb kx ky kz la gp" data-selectable-paragraph="">Showing our SwiftUI Alert</h2>
<p id="15cd" class="pw-post-body-paragraph ji jj il jk b jl lb jn jo jp lc jr js jt ld jv jw jx le jz ka kb lf kd ke kf ie gp" data-selectable-paragraph="">In the content view’s <strong class="jk im">onAppear</strong> block, we can make a trigger to test them. You can put the trigger wherever you&#8217;d like afterwards.</p>
<p data-selectable-paragraph=""><script src="https://gist.github.com/61e7d4246ba35b0563f2a95d812bb601.js"></script></p>
<p id="c094" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph="">SheetView is just and empty view that I created.</p>
<p id="1adb" class="pw-post-body-paragraph ji jj il jk b jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd ke kf ie gp" data-selectable-paragraph=""><strong class="jk im"><em class="lq">P.S.</em></strong><em class="lq"> Do not forget to use </em><strong class="jk im"><em class="lq">AnyView</em></strong><em class="lq"> for the sheet view you will show.</em></p>
<h2 id="f2bb" class="kg kh il bn ki kj kk kl km kn ko kp kq jt kr ks kt jx ku kv kw kb kx ky kz la gp" data-selectable-paragraph="">Conclusion</h2>
<p id="0213" class="pw-post-body-paragraph ji jj il jk b jl lb jn jo jp lc jr js jt ld jv jw jx le jz ka kb lf kd ke kf ie gp" data-selectable-paragraph="">One of the benefits this approach provides is the logic can be handled in the view model. Since we just pass the alert or sheet, UI does not care about which view it will show by a condition such as switch-case or if-else blocks. Those blocks make the view dirty and we get rid of them.</p>


Save time, reduce costs and increase developer productivity now.

SwiftUI Alert and Sheets in a Dynamic and Easy Way

Related Posts

Transforming Appcircle’s Enterprise App Store into Alternative App Marketplaces with Apple Sideloading

Top 10 iOS Code Review Practices for Efficient Pull Requests

How to Build and Deploy Apps to Google Play Console Testing and Apple TestFlight

Automatic Code Signing for iOS

SwiftUI Alert and Sheets in a Dynamic and Easy Way

Related Posts

Transforming Appcircle’s Enterprise App Store into Alternative App Marketplaces with Apple Sideloading

Top 10 iOS Code Review Practices for Efficient Pull Requests

How to Build and Deploy Apps to Google Play Console Testing and Apple TestFlight

Automatic Code Signing for iOS

Subscribe to Appcircle Circle