SwiftUI

In this article, we will create an iOS app which is integrated with Supabase backend for authentication. We will use SwiftUI to create the app&amp;#x27;s UI. The full source code for this project can be found here.

&amp;#x5C;
The tutorial will be divided into following sections:


1. Setting up Supabase Project (install Supabase iOS SDK)
2. Designing the UI of the app using SwiftUI (Login, Registration, Home screens)
3. Registration with Supabase authentication &amp;#x2F; saving user data in database
4. Login with Supabase auth &amp;#x2F; retrieving user data from database

&amp;#x5C;
# 1.Setting up Supabase Project (install Supabase iOS SDK)

Getting started with Supabase is extremely easily as compared to AWS or even Firebase. Simply head over to [Supabase.io](http:&amp;#x2F;&amp;#x2F;Supabase.io) and sign up using Github. That&amp;#x27;s it. You will see your Supabase console
as well as all the private keys, and URLs you will need for your project.
To install Supabase iOS SDK, follow these three easy steps:


1. Open Xcode and create your project
2. then, Go to File -&amp;gt; Add Packages
3. Enter this URL: &amp;lt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;supabase&amp;#x2F;supabase-swift.git&amp;gt; and install Supabase package

&amp;#x5C;
# 2. Designing the UI of the app using SwiftUI

Now lets set up the UI. The UI for this project is extremely simple. We will have three SwiftUI files


1. ContentView where we will implement Sign Up view
2. SignIn view
3. HomeView

&amp;#x5C;
This is the UI for &amp;#96;ContentView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct ContentView: View {
    @State var email: String = &amp;quot;&amp;quot;
    @State var password: String = &amp;quot;&amp;quot;
    @State var name: String = &amp;quot;&amp;quot;

    @State var presentHomeView: Bool = false
    @State var user = User()
NavigationView {
           ZStack {
               VStack(spacing: 20) {
                   Text(&amp;quot;Sign Up&amp;quot;)
                       .font(.largeTitle)
                       .bold()
                       .padding(.bottom, 24)
                   TextField(&amp;quot;Name&amp;quot;, text: $name)
                   TextField(&amp;quot;Email&amp;quot;, text: $email)
                   SecureField(&amp;quot;Password&amp;quot;, text: $password)
                   Button {
                       self.signUp(email: self.email, password: self.password, name: self.name)
                   } label: {

                       Text(&amp;quot;Sign Up&amp;quot;)
                           .padding()
                           .background(Color.blue.opacity(0.3))
                           .cornerRadius(5)
                   }.padding(.top, 20)


                   HStack {
                       Text(&amp;quot;Already Registered&amp;quot;)
                       NavigationLink(&amp;quot;Log In&amp;quot;, destination: SignInView())
                   }


               Spacer()
               }
               .padding(.horizontal)
               .padding(.top, 64)

           }.fullScreenCover(isPresented: self.$presentHomeView) {
               HomeView(user: self.$user)
           }

       }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
This will be the &amp;#96;SignInView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct SignInView: View {
    @State var presentHomeView: Bool = false
    @State var email = &amp;quot;&amp;quot;
    @State var password = &amp;quot;&amp;quot;
    @State var user = User()
var body: some View {
       ZStack {
           VStack(spacing: 20) {
               Text(&amp;quot;Log In&amp;quot;)
                   .font(.largeTitle)
                   .bold()
                   .padding(.bottom, 24)
               TextField(&amp;quot;Email&amp;quot;, text: $email)
               SecureField(&amp;quot;Password&amp;quot;, text: $password)
               Button {
                    self.signIn(email: self.email, password: self.password)
               } label: {

                   Text(&amp;quot;Log In&amp;quot;)
                       .padding()
                       .background(Color.blue.opacity(0.3))
                       .cornerRadius(5)
               }.padding(.top, 20)
           Spacer()
           }
           .padding(.horizontal)
           .padding(.top, 64)

       }
       .fullScreenCover(isPresented: self.$presentHomeView) {
           HomeView(user: $user)
       }
   }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
This is the code for &amp;#96;HomeView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
struct HomeView: View {
    @Environment(&amp;#x5C;.presentationMode) var presentationMode
    @Binding var user: User

    var body: some View {
        VStack {
            Text(&amp;quot;Hello,&amp;#x5C;(user.name ?? &amp;quot;&amp;quot;)&amp;quot;)
            Button {
                self.signOut()
            } label: {

                Text(&amp;quot;Sign Out&amp;quot;)
                    .padding()
                    .background(Color.blue.opacity(0.3))
                    .cornerRadius(5)
            }.padding(.top, 20)
        }
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Please add &amp;#96;import Supabase&amp;#96; in all three files.

# 3. Registration with Supabase auth:

Whenever we need to call supabase - during our authentication procedures or when we are accessing database, we will first create a Supabase client object that requires two items both of which we can get from the Supabase console.

So to make it easier for ourselves, create a new swift file and name it API. Create a class API and add the following code:

&amp;#x5C;
&amp;#96;&amp;#96;&amp;#96;javascript
import Foundation
import Supabase
class API {
    static var supabaseServiceKey = &amp;quot;get the key from Supabase console&amp;quot;
    static var supabaseURL = &amp;quot;get the URL from Supabase console&amp;quot;

    static var supabase = SupabaseClient(supabaseUrl: API.supabaseURL, supabaseKey: API.supabaseServiceKey)
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
You can get these URL and keys by heading over to &amp;quot;API&amp;quot; section in Supabase console and copying the following keys: Supabase URL and Service Key. Now whenever we need to use the supabase client, we can just call do &amp;#96;API.supabase&amp;#96;.

&amp;#x5C;
Now let&amp;#x27;s go ahead and implement the logic for signing up users. First create a simple User struct:

&amp;#96;&amp;#96;&amp;#96;javascript
struct User: Codable {
    var id: Int?
    var userID : String?
    var name: String?
    var email: String?
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Create a new function - we will call it &amp;#96;signUp&amp;#96; and it will take &amp;#96;email&amp;#96;, &amp;#96;password&amp;#96; and &amp;#96;name&amp;#96; string:

&amp;#96;&amp;#96;&amp;#96;javascript
func signUp(email: String, password: String, name: String) {
    API.supabase.auth.signUp(email: email, password: password) { result in
        switch result {
        case let .success(session):
            print(session)
            guard let safeUser = session.user else { return }
            let user = User(userID: safeUser.id,name: name,email: safeUser.email)
            self.user = user
            self.addUserToDatabase(user: user)
            self.presentHomeView = true
            self.email = &amp;quot;&amp;quot;
            self.password = &amp;quot;&amp;quot;
        case let .failure(error):
            print(error.localizedDescription)
        }
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
Here we are calling the &amp;#96;API.supabase.auth.signUp&amp;#96; method and passing in the &amp;#96;email&amp;#96; and &amp;#96;password&amp;#96;. If the sign up is successful, we will get &amp;#96;result&amp;#96; which contains the newly created user information. This information will contain user&amp;#x27;s email, and &amp;#96;userID&amp;#96;. This is what we will user to query the user in the database later on. We will create a simple &amp;#96;user&amp;#96; object and we will construct the object by passing in the &amp;#96;userID&amp;#96; (which we get from the &amp;#96;result&amp;#96; object), email and name. We will then pass it to the &amp;#96;@State user&amp;#96; property of type &amp;#96;User&amp;#96;. Then we will pass this &amp;#96;user&amp;#96; object to a subroutine call &amp;#96;addUserToDatabase&amp;#96;. Let&amp;#x27;s implement this subroutine next:

&amp;#x5C;
&amp;#96;&amp;#96;&amp;#96;javascript
func addUserToDatabase(user: User) {
    do {
        let jsonData: Data = try JSONEncoder().encode(user)

        API.supabase.database.from(&amp;quot;User&amp;quot;).insert(values: jsonData).execute { result in
            switch result {
            case let .success(response):
                print(response)
                print(&amp;quot;Success&amp;quot;)
            case let .failure(error):
                print(error.localizedDescription)
            }
        }

    } catch {
        print(error.localizedDescription)
    }
}
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
In this subroutine, we will first encode the &amp;#96;user&amp;#96; object to &amp;#96;jsonData&amp;#96;. Then we will use the same SupabaseClient object and this time use Supabase database. You can easily create a new table in your Supabase console, here is how:


1. Head over to &amp;#96;Table Editor&amp;#96; (situated on the left side panel)
2. Click on &amp;#96;New table&amp;#96;
3. Give the new table a name (we named our table as &amp;quot;User&amp;quot;), and add columns. Keep id as it is, and add other columns - (we will add userID of type text&amp;#x2F;string, name of type text&amp;#x2F;string and email of type text&amp;#x2F;string).

&amp;#x5C;
Going back to the code, we are basically saying to the database, to insert the jsonData in the &amp;quot;User&amp;quot; table. That&amp;#x27;s it, so now when a user signs up, we are also storing the new user&amp;#x27;s details in database.

# 4. Log In using Supabase:

Create the following subroutine in &amp;#96;SignInView&amp;#96;:

&amp;#96;&amp;#96;&amp;#96;javascript
func signIn(email: String, password: String) {
        API.supabase.auth.signIn(email: email, password: password) { result in
            switch result {
            case let .success(session):
                print(session)
                guard let safeUser = session.user else { return }
                self.fetchUserDetails(userID: safeUser.id) { user in
                    self.user = user
                    self.presentHomeView = true
                }

                self.email = &amp;quot;&amp;quot;
                self.password = &amp;quot;&amp;quot;
            case let .failure(error):
                print(error.localizedDescription)
            }
        }
    }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
We are pretty much just using the &amp;#96;signIn&amp;#96; method provided to us by the supabase SDK and using the &amp;#96;email&amp;#96; and &amp;#96;password&amp;#96; which we will get from the user. If the log in is successful, we will grab the &amp;#96;userID&amp;#96; from the result and pass it to &amp;#96;fetchUserDetails&amp;#96; subroutine. In this subroutine we will fetch all the data of the user from the database and create the User object. Here is how:

&amp;#96;&amp;#96;&amp;#96;javascript
func fetchUserDetails(userID: String, completion: @escaping (_ user: User) -&amp;gt; ())  {
        API.supabase.database.from(&amp;quot;User&amp;quot;).select().eq(column: &amp;quot;userID&amp;quot;, value: userID).execute { result in
            switch result {
            case let .success(response):
                print(response)
                    do {
                        let user = try response.decoded(to: [User].self)
                        completion(user[0])
                        print(user[0])
                    } catch {
                        print(String(describing: error))
                    }
            case let .failure(error):
                print(error.localizedDescription)
            }
        }
    }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;
So this time we are querying the database and saying to retrieve the entire row in the &amp;quot;User&amp;quot; table for &amp;quot;UserID&amp;quot; that matches the userID we passed to the subroutine. The response we will get from this is JSON data. We will decode it to a &amp;#96;User&amp;#96; array. However, we know that there will be just one item in that array so we can easily grab the first element from the array and pass it to the completion handler.

&amp;#x5C;
Back in &amp;#96;signIn&amp;#96; routine, we are calling the &amp;#96;fetchUserDetails&amp;#96; subroutine which gives us the &amp;#96;user&amp;#96; item, which we assign to &amp;#96;@state user&amp;#96; property and also toggle the boolean to show the &amp;#96;HomeView&amp;#96; modally (fullScreenCover). The HomeView takes in the user object.

# 5. HomeView and SignOut:

So now we have the last view, the &amp;#96;HomeView&amp;#96;. The &amp;#96;HomeView&amp;#96; will grab this &amp;#96;User&amp;#96; object and show the name of the user. We will also add a SignOut button, which when pressed invokes the following subroutine:

&amp;#96;&amp;#96;&amp;#96;javascript
func signOut(){
     API.supabase.auth.signOut { result in
         print(&amp;quot;Signed Out&amp;quot;)
         presentationMode.wrappedValue.dismiss()
     }
 }
&amp;#96;&amp;#96;&amp;#96;

&amp;#x5C;


How to Build a SwiftUI App and Integrate It with Supabase

There are times when you want to show a selection of options to the user, one way to do this is by using an action sheet. In SwiftUI, you can do this using &#96;confirmationDialog()&#96; modifier. It&#x27;s worth noting that this modifier only works for iOS 15 and above. If you are targeting iOS 13&#x2F;14 then you need to use &#96;ActionSheet&#96; instead.

&#x5C;
In this tutorial, we will go through both these methods. Let&#x27;s start with &#96;confirmationDialog()&#96; modifier first.

## iOS 15+ ConfirmationDialog Modifier in SwiftUI

&#x5C;
Here is the code for this first method. Here you can see we have a state property called &#96;showOptions&#96;. When we tap the “Show Action Sheet button”, we will make its value true.

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.confirmationDialog(&quot;Select Countries&quot;, isPresented: $showOptions) {
            Button(&quot;🇺🇸 USA&quot;) {
                selection = &quot;USA&quot;
            }
            Button(&quot;🇫🇷 France&quot;) {
                selection = &quot;France&quot;
            }
            Button(&quot;🇨🇦 Canada&quot;) {
                selection = &quot;Canada&quot;
            }
        } message: {
            Text(&quot;Select a country&quot;)
        }

    }
}
&#96;&#96;&#96;

Then we are simply using &#96;confirmationDialog&#96; modifier, the modifier takes in the title, and a boolean binding. We will pass the &#96;showOptions&#96; boolean. Note the &#96;$&#96; symbol in front of &#96;showOptions&#96;. This is a way to do two way binding in SwiftUI. So when the &#96;showOptions&#96; becomes true when we tap the button, the action sheet shows up. When we dismiss the action sheet, the value of &#96;howOptions&#96; goes back to false. It’s a way to track if the action sheet is being presented or not.

&#x5C;
Please also note that &#96;confirmationDialog&#96; is supported by multiple platforms, and the string passed to &#96;title&#96; argument isn&#x27;t shown on iOS. In order to give your action sheet a title, you need to provide a message closure as shown above.

&#x5C;
Next, the &#96;.confirmationDialog&#96; takes in a closure which contains all the action &#96;Buttons()&#96;. So here we have created three buttons, and the action closure of each button changes the selection property. We are also showing the selection property in a &#96;Text&#96; view right above the “Show Action Sheet” button. So, when any of the action buttons is tapped, the text is updated.

&#x5C;
We can even add &#96;.destructive&#96; style to the Button so that SwiftUI colors the button text appropriately.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;confirmationDialogueiOS15.gif?alt=media&amp;token=3a8167e5-3ff8-4093-9180-f66a88a8ce31)

We can see that there is repetition in the &#96;confirmationDialog&#96; closure. We are creating Buttons and the code is pretty much similar for all of them. We can do better here by adding a &#96;ForEach&#96; loop within the closure like so:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.confirmationDialog(&quot;Select Countries&quot;, isPresented: $showOptions) {
            ForEach([&quot;🇺🇸 USA&quot;, &quot;🇫🇷 France&quot;, &quot;🇨🇦 Canada&quot;], id: &#x5C;.self) { item in
                Button(item) {
                    selection = item
                }
            }
        } message: {
            Text(&quot;Select a country&quot;)
        }
    }
}
&#96;&#96;&#96;

So we are iterating over the array using &#96;ForEach&#96; loop, and within the body of the loop, creating a Button and providing action to it.

&#x5C;
Now let us discuss how to achieve the same for iOS 14 and below.

## Action Sheet modifier for iOS in SwiftUI

Let&#x27;s use &#96;actionSheet&#96; approach now. Here you also need to pass a boolean to track the presentation state of the action sheet.

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State var showOptions: Bool = false
    @State var selection: String = &quot;&quot;
    var body: some View {
        Text(&quot;Select your Country: &#x5C;(selection)&quot;)
        Button {
            showOptions = true
        } label: {
            Text(&quot;Show Action Sheet&quot;)
        }.actionSheet(isPresented: $showOptions) {
            ActionSheet(title: Text(&quot;Select Country&quot;),
                        buttons: [
                            .default(Text(&quot;🇺🇸 USA&quot;)) {
                                selection = &quot;🇺🇸 USA&quot;
                            },
                            .default(Text(&quot;🇫🇷 France&quot;)) {
                                selection = &quot;🇫🇷 France&quot;
                            },
                            .default(Text(&quot;🇨🇦 Canada&quot;)) {
                                selection = &quot;🇨🇦 Canada&quot;
                            },
                            .destructive(Text(&quot;Cancel&quot;))
                        ])
        }

    }
}
&#96;&#96;&#96;

The API isn&#x27;t as straightforward as the &#96;.confirmationDialog&#96;. Here you need to use &#96;ActionSheet&#96; struct, pass in the title and an array of type &#96;Alert.Button&#96;. The &#96;.default&#96; button just provides simple styling option. However, with this approach you don&#x27;t get the &#96;Cancel&#96; button for free and therefore you need to add .&#96;destructive&#96; to get the cancel button.

&#x5C;
The end result is same for both, you get an action sheet and tapping on any action updates the text view with the selection.

The code for this project is available on [GitHub](https:&#x2F;&#x2F;github.com&#x2F;devbriteio&#x2F;ios&#x2F;tree&#x2F;main&#x2F;how-to-implement-action-sheet-in-swiftui).

How to Implement an Action Sheet in SwiftUI

Complete Guide to Navigation View in SwiftUI

Creating Spotify Music Player using SwiftUI

SwiftUI provides us with quite a few &quot;off the shelf&quot; layout methods to help build UI for our app. We have HStack, VStack, ZStack, GridView and more. In this articl we will look at ZStack. ZStack is a view that comes with SwiftUI that overlays it subviews. Essentially allowing you to stack a view on top of one another.

## Simple ZStack Implementation

Let’s start of simple by adding two views on top of each other using ZStack.

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        ZStack {
          &#x2F;&#x2F;#1
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200, alignment: .center)
                .cornerRadius(20)
          &#x2F;&#x2F;#2
            Rectangle()
                .foregroundColor(.white)
                .opacity(0.4)
                .frame(width: 150, height: 150, alignment: .center)
                .cornerRadius(200)
        }
    }      
}
&#96;&#96;&#96;

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;zstackpic1.png?alt=media&amp;token=508ac99c-8993-4c1b-9c66-961344fa9d1d)

&#x5C;
Rectangle #1 will be the bottom-most rectangle while the rectangle #2 will be top most. As you keep adding views, the last view will be top most in the view hierarchy.

We can also change view&#x27;s alignment, by passing in the alignment argument in the ZStack. The following alignment options are available:
&#96;.leading&#96;, &#96;.trailing&#96;, &#96;.center&#96;, &#96;bottom&#96;, &#96;top&#96;, &#96;topLeading&#96;, &#96;topTrailing&#96;, &#96;bottomLeading&#96; and &#96;bottomTrailing&#96;

&#x5C;
&#96;&#96;&#96;javascript
ZStack(alignment: .leading) {
  &#x2F;&#x2F;1
    Rectangle()
        .foregroundColor(.blue)
        .frame(width: 200, height: 200, alignment: .center)
        .cornerRadius(20)
  &#x2F;&#x2F;2
    Rectangle()
        .foregroundColor(.white)
        .opacity(0.4)
        .frame(width: 150, height: 150, alignment: .center)
        .cornerRadius(200)
}
&#96;&#96;&#96;

&#x5C;
The above code will align all the items on the leading edge of the bottom most view.

## Advance Layout with Animation using ZStack:

Lets create something more interesting using ZStacks. This is what we will create:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;zstackgif.gif?alt=media&amp;token=90117da2-2b49-4c2d-b7eb-73db8749e0e0)

&#x5C;
&#x5C;
We will animate this as well using simple offset values. So, first start of by adding a ZStack to the content view and also creating an array of colors.

Add the following lines top the top of the ContentView.

&#96;&#96;&#96;javascript
var data : [Color] = [.blue, .green, .yellow, .purple, .red]
@State var offsetval = 0
&#96;&#96;&#96;

&#x5C;
Next, inside the ZStack, we will add a ForEach loop, that will iterate over the &#96;data.count&#96;. Please note here that we are not iterating over the colors, but instead the index value of each item in the array.

&#96;&#96;&#96;javascript
ZStack {
    ForEach(0..&lt;data.count) { i in
        Rectangle()
            .foregroundColor(data[i])
            .frame(width: 200, height: 200, alignment: .center)
            .cornerRadius(20)
            .offset(x: CGFloat(i * offsetval), y: CGFloat(i * offsetval))
    }
}
.onAppear {
    withAnimation(.easeOut(duration: 2)) {
        offsetval = 10
    }
}
&#96;&#96;&#96;

&#x5C;
Inside, the ForEach loop, we are creating a rectangle, giving it the &#96;i&#96;th color from the array. We are also giving the rectangle a frame of width of &#96;200px&#96; and height of &#96;200px&#96;. We will also add a &#96;cornerRadius&#96; of 20. The last thing I will add here is an &#96;offset&#96; modifier. This modifier allows you to just move the view in x or y axis. This is one of the most used view modifiers for animations.

So, we will offset each view depending on its position in the stack. We do this by using the index value &#96;i&#96;. We will multiply the &#96;I&#96; value with the &#96;offsetval&#96; property we set earlier. Initially this will be &#96;0&#96;. Now, lets add the &#96;.onAppear&#96; modifier and inside it we will change the &#96;offsetval&#96; value to 10. We will wrap this around a &#96;withAnimation&#96; block and set the duration to 2 seconds.

&#x5C;
The result is shown in the above gif.

&#x5C;
So as we can see ZStack is an extremely powerful layout tool available in SwiftUI. The above animation can be used in the Splash screen, and if you want to learn more about how to implement splash screen in SwiftUI, check out this [article](https:&#x2F;&#x2F;devbrite.io&#x2F;how-to-make-splash-screen-for-swiftui-app).

&#x5C;
The full code to this project is available on GitHub.

How to Stack and Layer Views With ZStack in SwiftUI

SwiftUI comes with the blur view modifier since the first release back in 2019. The blur modifier allows you to add gaussian blur to any view to which it is applied to. With SwiftUI release 3 came a new type called Materials. Materials provides us with different pre-made blur effects which are aligned with Apple&#x27;s Human Interface Guideline.

&#x5C;
In this tutorial, we will discuss about both these modifiers. Let&#x27;s start with &#96;blur&#96; view modifier.

## Blur View Modifier in SwiftUI

&#96;&#96;&#96;javascript
struct ContentView: View {
  var body: some View {
    ZStack {
        Image(systemName: &quot;flame.fill&quot;)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 150, height: 150, alignment: .center)
            .foregroundColor(.blue)
            .blur(radius: 8, opaque: false)
    }
  }
}
&#96;&#96;&#96;

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;blurpic1.png?alt=media&amp;token=8ab3463b-ff9d-43ee-b076-2d2ef15e6f0d)

&#x5C;
In order to use the blur view modifier, just add the modifier to any view you want to blur. Here you can see I am adding the blur modifier to the Image view. The &#96;blur&#96; modifier takes in two parameters in order to customize the end result. The &#96;radius&#96; parameter defines the radial size of the blur. The second one is&#96; Opaque&#96;, which allows you to set the transparency of the blur. It is set to false by default.

## Materials Type:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.purple, .yellow], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            Text(&quot;Regular&quot;)
                .padding(30)
                .background(
                    .regularMaterial,
                    in: RoundedRectangle(cornerRadius: 8, style: .continuous)
                )


        }
    }
}
&#96;&#96;&#96;

&#x5C;
The above code is slightly different as I am applying the materials effect to a Text view. Materials type is pre-made blur effects provided to us by Apple. The effect provides us with a translucent effect that matches that of a glass. As you can see in the code above, we are using the background modifier to add regular material type to the Text view. Note here that the material type isn&#x27;t actually a background but rather its like inserting a translucent view between the text view and the background.

&#x5C;
Here is how the regular material looks like:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;regularmaterial1.png?alt=media&amp;token=4b3e256f-4292-4eac-87e3-54ac29953a16)

In order to reduce the opaqueness we can use thin or ultra thin material type. Like this:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.purple, .yellow], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            Text(&quot;Regular&quot;)
                .padding(30)
                .background(
                    .ultraThinMaterial,
                    in: RoundedRectangle(cornerRadius: 8, style: .continuous)
                )
        }
    }
}
&#96;&#96;&#96;

&#x5C;
Apple provides us with 5 different types of material thickness. The thicker the material, the more opaque it is and provides better contrast between the foreground and the background.

&#x5C;
Here are all 5 types:


1. regular
2. Ultra Thin Material
3. Thin Material
4. Thick Material
5. Ultra Thick Material

&#x5C;
Here are all 5 in action:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;materials1.png?alt=media&amp;token=b3058eca-fed6-4e0c-b76c-b9be85fa779a)

The full code of this project is available on GitHub.

How to Use Blur View Modifier and Material Type in SwiftUI

Animations in SwiftUI are extremely easy to work with and are powerful enough to create stunning UI&#x2F;UX experiences without writing a ton of code.
We will start of by basics of animations, how to implement them, and different animation styles and tweaks. Later, we will create a complex pulsating animation
using SwiftUI.

## .animation modifier:

This modifier allows you to animate the view to which it is attached to. So, lets create a simple Button and when you tap on it, it gets bigger&#x2F;scales up. Here is how you can do it:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var scaleValue = 1.0

    var body: some View {
        VStack {
            Button(&quot;Run Animation&quot;) {
                scaleValue += 1
            }
            .padding(50)
            .background(.blue)
            .foregroundColor(.white)
            .clipShape(Rectangle())
            .scaleEffect(scaleValue)
            .animation(.easeInOut(duration: 2), value: scaleValue)
        }
    }
}
&#96;&#96;&#96;

Here you can see we have animation modifier attached to the Button and we are providing it a &#96;value&#96;. So, whenever this value property changes, the transition to the next state will be animated. Here, the property called &#96;scaleValue&#96; is 1  to start with, and we are passing this property to the &#96;.scaleEffect&#96; modifier as well. As we tap on the button, the scale value increments by a value of 1 and in doing so, scales up the button. The animation modifier helps us animate this change. Lets look at this modifier in more detail.

The &#96;.animation&#96; modifier takes in two parameters; the animation itself and the value. We have discussed the value parameter above the animation parameter is basically the fun part here. We can provide it with different animations and each with a duration.

Some basic ones are:


1. **easeInOut**: animation begins slowly, picks up pace and then closes out fast.
2. **easeIn:** animations begins slowly
3. **easeOut:** animations begins quickly and slows down towards the end
4. **linear**: similar speed throughout the animation
5. **spring()** - customize spring animations with pin point accuracy (dampness, mass, response) etc. Perfect for animation chaining with other spring or interactiveSpring animations.

   &#x5C;
    ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;animationuigif.gif?alt=media&amp;token=a33330e6-d310-4798-9417-cc9142115fe6)

We can also apply the &#96;.repeatCount&#96; modifier to the animation that allows you to set the number of the times you want the animation to take place. Here is how to set repeat count:

&#96;.animation(.easeInOut(duration: 2).repeatCount(4, autoreverses: true), value: scaleValue)&#96;

Autoreverses allows you to reverse the animation back to its original state and then animate it again for the next count.

Now, there is another function that you can use to get similar sort of animations, and that is when you need to animate multiple views on change of same properties. For this we can use &#96;.withAnimation&#96; wrapper. Here is how to use this:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var scaleValue = 1.0

    var body: some View {
        VStack {
            Text(&quot;Scale this as well&quot;)
                .scaleEffect(scaleValue)

            Spacer()

            Button(&quot;Run Animation&quot;) {
                animateViews()
            }
            .padding(50)
            .background(.blue)
            .foregroundColor(.white)
            .clipShape(Rectangle())
            .scaleEffect(scaleValue)
        }
    }

    func animateViews() {
        withAnimation(.easeInOut(duration: 2.0)) {
            self.scaleValue = 2.0
        }
    }
}
&#96;&#96;&#96;

Now, inside a VStack, we have added a new Text view and added the &#96;scaleEffect&#96; modifier and passed it the same property of &#96;scaleValue&#96;. In the button&#x27;s action closure we will call a function &#96;animateViews()&#96;. Inside the &#96;animateViews()&#96; function, we will use the &#96;.withAnimation&#96; and in its closure, we will change the value of &#96;scaleValue&#96; to 2.0. This will now animate the changes.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;animationuigif2.gif?alt=media&amp;token=62c9f49d-3054-476c-89ae-52726134c2bb)

&#x5C;
&#x5C;
Now lets create something more complex, using the same animation modifiers mentioned above:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var animationValue = 1.0

    var body: some View {
        VStack {
            Circle()
                .padding(100)
                .foregroundColor(.blue)
                .overlay(
                    Circle()
                        .stroke(.blue)
                        .padding(100)
                        .scaleEffect(animationValue)
                        .opacity(2 - animationValue)
                        .animation(.easeInOut(duration: 1).repeatForever(autoreverses: false), value: animationValue)


                ).onAppear {
                    scaleValue = 2
                }
        }
    }
&#96;&#96;&#96;

The above code will give us a pulsating animation. Lets go step by step:

First, I created a &#96;Circle()&#96; and gave it a padding of 100px, blue color and then used an &#96;overlay&#96; modifier to add another view that will pulsate&#x2F;move outwards. To do this, we create another &#96;circle&#96; inside that &#96;overlay&#96; modifier and provide the circle with same padding and just a stroke of color  &#96;.blue&#96;. There are two things which we will be animating on this particular circle: 1) &#96;opacity&#96; and 2) &#96;scaleEffect&#96;.

&#x5C;
We will use the &#96;animationValue&#96; for both &#96;opacity&#96; and &#96;scaleEffect&#96;. Lets look at the opacity modifier. Since we are just changing the value of &#96;animationValue&#96; to 2, so opacity will start off from 1 (2-1 = 1) and end at 0 (2-2 = 0). Now, lets look at the animation modifier. Here we are using &#96;.easeInOut&#96; animation, with duration of 1 second, and it will repeat forever and we have autoreverses set to false.

Here is how this looks like:

&#x5C;
&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;swiftpulsatinganimation.gif?alt=media&amp;token=374fc642-6481-4d1d-8a21-fbaeca25ab80)

How to Animate Views in SwiftUI

Showing an alert is a way to take user&#x27;s full attention for an important action. For example, when you are deleting a photo, or a document an alert pops up asking you if you are sure about deleting the item. Just like with Action sheets, Apple released a new Alert modifier for apps targeting iOS 15+. If your app targets iOS 13&#x2F;14 then you need to use &#96;Alert()&#96; struct. We will discuss both ways in this article.

## iOS 15+ Alert Modifier

Let&#x27;s start with the &#96;Alert&#96; modifier. We will create a new SwiftUI view and add the following lines of code:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var isPresent: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Text(&quot;Delete the picture?&quot;)
                .font(.headline)

            Button(&quot;Delete&quot;) {
                isPresent = true
            }

        }.alert(&quot;Are you sure you want to delete?&quot;, isPresented: $isPresent) {
            Button(&quot;Yes&quot;, role: .destructive) {
                print(&quot;Picture deleted!&quot;)
            }
        }
    }
}
&#96;&#96;&#96;

&#x5C;
In this view, we are first creating a boolean state property called &#96;isPresent&#96;. This boolean property will be used to track if alert is showing or not. When this property &#96;isPresent&#96; is made true, the alert will show up. When you tap the cancel button &#x2F; or dismiss the alert this value will become false again.

&#x5C;
Inside this content view we have a &#96;VStack&#96; containing a textview and a button. When you press the &#96;Delete&#96; button, the &#96;isPresent&#96; boolean is toggled and this shows up the alert.

&#x5C;
To the VStack, we are applying the &#96;alert()&#96; modifier. The alert modifier takes in a message text, the &#96;isPresented&#96; boolean and inside the closure of the &#96;alert&#96; modifier we can add the standard SwiftUI &#96;Buttons&#96;. Its worth noting that  SwiftUI button comes two roles: &#96;.destructive&#96; and &#96;.cancel&#96;.

&#x5C;
&#96;.destructive&#96; role basically means that the button is about to do a destructive operation such as delete user data etc. Therefore, the &#96;destructive&#96; role adds a cancel button for free in order to dismiss the alert without doing that destructive operation and also stylizes the button (adds red font color). You can add as many destructive buttons as you want in your alert closure, however each alert can only have one cancel role button only.

&#x5C;
&#96;cancel&#96; role is mainly meant for a button that cancel an operation and dismiss the alert. You can also just add a simple button without any roles assigned to them.

So yes thats about it. This is how you can implement alert for iOS 15+.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;alertalert1.gif?alt=media&amp;token=299a7064-c3bc-4d41-b061-9840a54f5cc1)

## iOS 13&#x2F;14 Alert() Struct

For iOS 13 and iOS 14 you need to use the alert struct. This struct can be used for apps that target iOS 15&#x2F;16 too.

&#x5C;
The Alert struct looks like this:

&#96;&#96;&#96;javascript
Alert(title: Text(&quot;A message&quot;),
      message: Text(&quot;Some important message&quot;),
      dismissButton: .default(Text(&quot;Okay&quot;)))
&#96;&#96;&#96;

There is also another variation of this which looks like this:

&#96;&#96;&#96;javascript
Alert(title: Text(&quot;A message&quot;),
      message: Text(&quot;Some important message&quot;),
      primaryButton: .destructive(Text(&quot;Delete&quot;)),
      secondaryButton: .cancel())
&#96;&#96;&#96;

&#x5C;
You provide the alert title, the message you want to show and the dimissButton. Again you can choose from different roles such as default, cancel or destructive.

Here is how to implement the alert using&#96; Alert()&#96; struct:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var isPresent: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Text(&quot;Delete the picture?&quot;)
                .font(.headline)

            Button(&quot;Delete&quot;) {
                isPresent = true
            }

        } .alert(isPresented: $isPresent) {
            Alert(title: Text(&quot;Important message&quot;), message: Text(&quot;Some message using Alert struct&quot;), dismissButton: .destructive(Text(&quot;Delete&quot;), action: {
                print(&quot;delete&quot;)
            }))
        }
    }
}
&#96;&#96;&#96;

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;ezgif.com-gif-maker-5.gif?alt=media&amp;token=b0a5cc79-65ea-47f7-bea0-841884f336d0)

&#x5C;
Again the &#96;isPresent&#96; boolean property is used to track where the alert should be shown or not. When the alert is shown, the Alert struct is called and the relevant data is shown on the alert prompt.

&#x5C;
In the above struct, only a dismissButton is provided. However, there are times when we want two buttons, like a cancel and a delete button. To do this, we can use the primary or secondary button properties provided by the Alert struct and add actions to each button.

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var isPresent: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Text(&quot;Delete the picture?&quot;)
                .font(.headline)

            Button(&quot;Delete&quot;) {
                isPresent = true
            }

        } .alert(isPresented: $isPresent) {
            Alert(
               title: Text(&quot;Some message?&quot;),
               message: Text(&quot;This is some important message&quot;),
               primaryButton: .destructive(Text(&quot;Delete&quot;)) {
                   print(&quot;Deleting...&quot;)
               },
               secondaryButton: .cancel())
        }
    }
}
&#96;&#96;&#96;

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;ezgif.com-gif-maker-2.gif?alt=media&amp;token=9bc29305-90c9-40e1-b356-d073bbd19713)

The above code will add a cancel and delete button to the alert. Till now we have been using a boolean property as a way to track if the alert should be presented or not. There is another way to do the same and that is by using an optional property. When that property is equal to none, the alert doesn&#x27;t show up. As soon as a value is assigned to that property, the alert pops up.

&#x5C;
This is perfect if you want the alert to contain dynamic data instead of the hard coded values for title, message or button. Lets see how we can implement this:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var selectedContact: Contact?
    var body: some View {
        VStack(spacing: 20) {
            Text(&quot;Delete the Contact?&quot;)
                .font(.headline)

            Button(&quot;David&quot;) {
                selectedContact = Contact(name: &quot;David&quot;)
            }

            Button(&quot;George&quot;) {
                selectedContact = Contact(name: &quot;George&quot;)
            }

            Button(&quot;Bob&quot;) {
                selectedContact = Contact(name: &quot;Bob&quot;)
            }

        } .alert(item: $selectedContact) {_ in
            Alert(
                title: Text(&quot;Are you sure?&quot;),
                message: Text(&quot;Delete &#x5C;(selectedContact?.name ?? &quot;&quot;)&quot;),
                primaryButton: .destructive(Text(&quot;Delete&quot;)) {
                   print(&quot;Deleting...&quot;)
                },
               secondaryButton: .cancel())
        }
    }
}
&#96;&#96;&#96;

&#x5C;
The above code uses the .alert modifier but instead uses &#96;item&#96; argument instead of &#96;isPresented&#96;. Here we pass a property called &#96;selectedContact&#96; which is of type &#96;Contact&#96;. &#96;Contact&#96; is a custom struct we have created. This is how it looks like:

&#96;&#96;&#96;javascript
struct Contact : Identifiable {
   var id: String { name }
   var name: String
}
&#96;&#96;&#96;

&#x5C;
Make sure you conform the struct to the &#96;Identifiable&#96; property. Now, we have three buttons inside the VStack. On tap of each button, the &#96;selectedContact&#96; is assigned an object of &#96;Contact&#96;. So, here we have three buttons, each button has a name label. When the button is tapped, a new &#96;Contact&#96; object is made with the name of the person and is assigned to &#96;selectedContact&#96; property. Now, when the property is nil the alert is not shown. As soon as we assign something to the property, the alert shows up and we use the &#96;selectedContact.name&#96; property inside the alert message

&#x5C;
And thats how it looks like:

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;ezgif.com-gif-maker-4.gif?alt=media&amp;token=62974519-1ba9-486d-b1dd-10a358a34864)

How to Show an Alert in SwiftUI

With many websites now having a mobile app - we are seeing more apps featuring deep links. Deep Links are hyperlinks which when tapped or visited takes users to a specific piece of content in the app. For eg: If you tap on a link to someone&#x27;s tweet on your iOS device, iOS opens up Twitter app, and takes you to that user&#x27;s tweet. Deep links can be attached to a specific tab, a particular view or a section of page etc. In this article we will go over how to set up a URL scheme and then we will deep link tabs and specific detail page for content.

&#x5C;
There are two ways to setting up deep linking. First and the easiest way is by using a URL scheme and the other way is using Universal links. Lets set up URL Scheme:

&#x5C;
Its vital to understand how the url schemes look like: &#96;someappname:&#x2F;&#x2F;id&#96;. The &#96;someappname&#96; is the URL you add in Xcode. Then you have a colon &#96;:&#96; with two forward slashes &#96;&#x2F;&#x2F;&#96;- after that you have the &#96;id&#96; tag. This &#96;id&#96; tag is what we will decode and use for navigation. Head over to Xcode and do the following:


1. Click on the Project name
2. Click Info
3. Expand URL Types
4. Add the name of your app or link in URL schemes text field

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;xcodescreen.png?alt=media&amp;token=4388ecc7-2503-4252-9f7f-34801b123311)

&#x5C;
I have named my app &#96;pariscafe&#96;, so whenever we type &#96;pariscafe:&#x2F;&#x2F;search&#96; - it will take us to the search tab. And so on!

## Data Model

Lets talk about the data model and an important property that you need to add in all the models that you want to support deep link. Here is the data model I will be using for this project:

&#96;&#96;&#96;javascript
struct ParisCafe : Identifiable{
    var id: String
    var name: String
    var rating: String
    var picture: String
}

class DataSource {
    static let data : [ParisCafe] = [ParisCafe(id: &quot;PRS100&quot;, name: &quot;Café de Flore&quot;, rating: &quot;4&#x2F;5&quot;, picture: &quot;flora&quot;),
                                    ParisCafe(id: &quot;PRS101&quot;, name: &quot;The Caféothèque of Paris&quot;, rating: &quot;4.2&#x2F;5&quot;, picture: &quot;TheCaféothèqueofParis&quot;),
                                    ParisCafe(id: &quot;PRS102&quot;, name: &quot;Cuppa - Salon de Cafe&quot;, rating: &quot;4.3&#x2F;5&quot;, picture: &quot;cuppa&quot;),
                                    ParisCafe(id: &quot;PRS103&quot;, name: &quot;Republique of Coffee&quot;, rating: &quot;4.1&#x2F;5&quot;, picture: &quot;rofcoffee&quot;),
                                    ParisCafe(id: &quot;PRS104&quot;, name: &quot;fringe&quot;, rating: &quot;4.6&#x2F;5&quot;, picture: &quot;fringe&quot;),
                                    ParisCafe(id: &quot;PRS105&quot;, name: &quot;Malongo Cafe&quot;, rating: &quot;4.4&#x2F;5&quot;, picture: &quot;TheCaféothèqueofParis&quot;)]
}
&#96;&#96;&#96;

As you can see the &#96;ParisCafe&#96; struct conforms to &#96;Identifiable&#96; protocol which makes it mandatory for us to add the &#96;id&#96; property. The &#96;id&#96; property is of type &#96;string&#96;. We will be implementing deep link in such a way that if the user writes the following hyperlink in Safari &#96;pariscafe:&#x2F;&#x2F;PRS103&#96; then it should direct the user to our app and open the detail page for that particular cafe. So, &#96;id&#96; is extremely important for deep linking.

## The Basic App Structure

Our app will consist of a tab view containing 3 tabs (Home, Search and Setting). Each of these tabs will be deep linked. In the &#96;Search&#96; view we will have a list of cafes and on tapping one should take you to a detail page for that cafe.

&#x5C;
Before moving to the views lets look at enum &#96;ParisCafeTab&#96; which basically houses all the tab names.

&#96;&#96;&#96;javascript
enum ParisCafeTab: String {
    case home =  &quot;home&quot;
    case search =  &quot;search&quot;
    case setting = &quot;setting&quot;
}
&#96;&#96;&#96;

&#x5C;
Then we also have an &#96;ObservableObject&#96; called &#96;AppViewModel&#96;:

&#96;&#96;&#96;javascript
class AppViewModel: ObservableObject {
    @Published var currentTab: ParisCafeTab = .home
    @Published var currentDetailCafeID: String?

    func checkDeepLink(url: URL)-&gt;Bool {
        &#x2F;&#x2F; more on this function later
    }

    func checkInternalDeepLinks(host: String)-&gt; Bool {
      &#x2F;&#x2F; more on this function later      
    }
}
&#96;&#96;&#96;

&#x5C;
The ObservableObject just contains two &#96;Published&#96; properties - &#96;currentTab&#96; and &#96;currentDetailCafeID&#96;. Both these properties are used to track the current tab and the current detail page to be shown. We will be decoding the deep link and publishing changes to these properties which will update the view and take us to that specific piece of content. Since this is an ObservableObject we will be injecting it as an EnvironmentObject to the &#96;ContentView&#96;, so that we can access this anywhere in the app.

### App.swift file

Lets start with &#96;ParisProjectApp&#96; swift file, here we are creating the &#96;AppViewModel()&#96; instance and injecting it in the &#96;ContentView&#96; and all its children views using &#96;.environmentObject&#96; function. Also here, we can see another modifier called &#96;.onOpenURL&#96; - this function is called every time we open the app using the deep link (with that convention as mentioned above).  We pass that url to &#96;checkDeepLink&#96; function which we are yet to implement inside the ViewModel.

&#96;&#96;&#96;javascript
@main
struct ParisProjectApp: App {
    @StateObject var appVM : AppViewModel = AppViewModel()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(appVM)
                .onOpenURL { url in
                    if appVM.checkDeepLink(url: url) {
                        print(&quot;got here from Deep link&quot;)
                    }else {
                        print(&quot;no deeplink found&quot;)
                    }
                }
        }
    }
}
&#96;&#96;&#96;

&#x5C;
In order to access the environment object in children views all we need to do is add the following line
&#96;@EnvironmentObject var appVM : AppViewModel&#96;.

### ContentView

&#96;&#96;&#96;javascript
struct ContentView: View {
    @EnvironmentObject var appVM : AppViewModel
    var body: some View {
      MainTabViews()
    }
}
&#96;&#96;&#96;

### MainTabViews

&#96;&#96;&#96;javascript
struct MainTabViews: View {
    @EnvironmentObject var appVM : AppViewModel
    var body: some View {
        TabView(selection: $appVM.currentTab) {
            Text(&quot;Home&quot;)
                .tag(ParisCafeTab.home)
                .tabItem{
                    Image(systemName: &quot;house.fill&quot;)
                }
            SearchView()
                .tag(ParisCafeTab.search)
                .tabItem{
                    Image(systemName: &quot;magnifyingglass&quot;)
                }
            Text(&quot;Setting&quot;)
                .tag(ParisCafeTab.setting)
                .tabItem{
                    Image(systemName: &quot;gearshape.fill&quot;)
                }
        }
    }
}
&#96;&#96;&#96;

&#x5C;
In this view, we are binding the &#96;TabView&#96; selection property to &#96;AppViewModel&#96;&#x27;s published property of &#96;.currentTab&#96;. Each Tab has a tag which is gets from the &#96;ParisCafeTab&#96; enum. So if we need to select search tab, all we need to do is to assign &#96;appVM.currentTab&#96; to say &#96;ParisCafeTab.search&#96; and search tab will be selected.

### SearchView

&#96;&#96;&#96;javascript
struct SearchView: View {
    @EnvironmentObject var appVM : AppViewModel
    @State var data = DataSource.data
    var body: some View {
        NavigationView {
            List {
                ForEach(data) { cafe in
                    NavigationLink(tag: cafe.id, selection: $appVM.currentDetailCafeID) {
                        DetailView(cafe: cafe)
                    } label: {
                        HStack {
                            Image(cafe.picture)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 150, height: 150)
                            Text(cafe.name)
                        }
                    }
                }
            }.navigationTitle(&quot;Search&quot;)
        }
    }
}

@ViewBuilder
func DetailView(cafe: ParisCafe)-&gt; some View {
    VStack {
        Image(cafe.picture)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 350, height: 350)
        Text(&quot;⭐️ Rating: &quot;)
        Text(cafe.rating)
    }.navigationTitle(cafe.name)
}
&#96;&#96;&#96;

&#x5C;
In &#96;SearchView&#96;, we have two properties the &#96;appVM&#96; which is environment object and the data (array of type &#96;ParisCafe&#96;). Then wrapped by a &#96;NavigationView&#96;, we have a &#96;List&#96; iterating through the data array. Then we are grabbing the data of type &#96;ParisCafe&#96;, and creating a &#96;NavigationLink&#96;. &#96;NavigationLink&#96; will allow us to push to the detail view when the item is tapped. The label for the &#96;NavigationLink&#96; is just a &#96;HStack&#96; with an image of the cafe and the cafe name.

&#x5C;
On tapping the list item, we will move to the &#96;DetailView&#96;. The &#96;DetailView&#96; is built using a &#96;ViewBuilder&#96;. Any function assigned with the keyword &#96;@ViewBuilder&#96;, allows you to return some kind of a view. So, inside this &#96;DetailView&#96; method, we are creating a simple view comprising of a  &#96;VStack&#96; containing the image and rating of the cafe.

&#x5C;
Do note that the &#96;NavigationLink&#96; is taking two parameters, &#96;id&#96; and &#96;selection&#96;. The &#96;id&#96; is the cafe item&#x27;s id and the selection is binded to &#96;appVM.currentDetailCafeID&#96;. Both of these will be used with deep linking.

&#x5C;
So now that all the views have been discussed, now lets get back to the &#96;AppViewModel&#96; and implement &#96;checkDeepLink&#96; and &#96;checkInternalDeepLinks&#96; methods.

&#x5C;
Here is the complete &#96;AppViewModel&#96; class:

&#96;&#96;&#96;javascript
class AppViewModel: ObservableObject {
    @Published var currentTab: ParisCafeTab = .home
    @Published var currentDetailCafeID: String?

    func checkDeepLink(url: URL)-&gt;Bool {
        guard let deepLinkComponent = URLComponents(url: url, resolvingAgainstBaseURL: true)?.host   else {
            return false
        }
        print(deepLinkComponent)
        if deepLinkComponent == ParisCafeTab.home.rawValue {
            currentTab = .home
        }else if deepLinkComponent == ParisCafeTab.search.rawValue {
            currentTab = .search
        }else if deepLinkComponent == ParisCafeTab.setting.rawValue {
            currentTab = .setting
        }else {
            return self.checkInternalDeepLinks(component: deepLinkComponent)
        }
        return true
    }

    func checkInternalDeepLinks(component: String)-&gt; Bool {
        if let index = DataSource.data.firstIndex(where: { cafe in
            return cafe.id == component
        }){
            currentTab  = .search
            currentDetailCafeID = DataSource.data[index].id
            return true
        }

        return false

    }
}
&#96;&#96;&#96;

&#x5C;
Lets first discuss &#96;checkDeepLink&#96; function. The &#96;checkDeepLink&#96; takes in the URL and we will get the components using URLComponents method. This URLComponents method should return us with the &#96;string&#96; after &#96;someappname:&#x2F;&#x2F;&#96;. So, essentially if you have the following URL scheme, &#96;someappname:&#x2F;&#x2F;search&#96;, &#96;deepLinkComponent&#96; should be assigned the value of &#96;search&#96;. We will use this string value and check which tab or NavigationLink item we should call.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;ezgif.com-gif-maker-6.gif?alt=media&amp;token=5822e758-0e29-49ee-a9a3-3fafce503727)

&#x5C;
Next, we will check if the &#96;deepLinkComponent&#96; is equal to any of the tabs tag name using the &#96;ParisCafeTab&#96; enum. If it is equal to any of the tab tag name, we will assign that enum case to the &#96;published&#96; property &#96;currentTab&#96;. So, if the app is opened using the following deep link &#96;pariscafe:&#x2F;&#x2F;home&#96;, it will invoke this function, and decode the string, if the string is equal to any of the enum cases, we will assign the &#96;currentTab&#96; published property to its respective enum case, causing the view to refresh and showing us the &#96;Home&#96; view.

&#x5C;
Now, lets move on to more deeper internal links such as opening detail view using the cafe&#x27;s &#96;id&#96;. If the decoded &#96;deepLinkComponent&#96; string is not equal to any of the tabs tag name, then we will call the &#96;checkInternalDeepLinks&#96; method. In this method, we will grab the index of the item in the data source whose id is equal to the &#96;component&#96; that is passed in as function parameter. Then we will first switch to the &#96;search&#96; tab since that is where we have the list of the cafes. We will then change the second &#96;Published&#96; property inside our view model which is &#96;currentDetailCafeID&#96; to the id of the cafe using the index we grabbed earlier.

&#x5C;
This will basically refresh the &#96;search&#96; view and since the NavigationLink&#x27;s selection argument has changed it will push to that item&#x27;s detail view.

&#x5C;
So if we write the following:
&#96;pariscafe:&#x2F;&#x2F;PRS104&#96; - it will open the app, invoke the &#96;checkDeepLink&#96; method, since &#96;PRS104&#96; isn&#x27;t equal to any &#96;ParisCafeTab&#96; enum cases, it will invoke &#96;checkInternalDeepLink&#96; and pass &#96;PRS104&#96; string. We will go through the data array and look for the index of the item with id of &#96;PRS104&#96;. That index will then be used to change the &#96;selection&#96; binding property (&#96;currentDetailCafeID&#96;), and we will have the detail page showing.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;ezgif.com-gif-maker-7.gif?alt=media&amp;token=bc2a68a9-2006-48e5-83d4-4c2005a747ab)

The full source code of this project is available on GitHub

Navigation and Deep Links in SwiftUI

Splash screen is the first screen that shows up when you open an app. Its an introductory screen usually used as a way to welcome the user while the app loads up initial data. The screen usually contains the app logo and&#x2F;or name. In this article, we will implement a splash screen using SwiftUI.

&#x5C;
Let&#x27;s start this project by creating a new SwiftUI view called &#96;ViewCoordinator.swift&#96;. This file will keep track of when to show the splash screen and when to load up the main content view. In &#96;ViewCoordinator.swift&#96; add the following code:

&#96;&#96;&#96;javascript
struct ViewCoordinator: View {
    @State private var isActive = false
    var body: some View {
        if isActive {
            ContentView()
        }else {
            SplashScreen(isActive: $isActive)
        }
    }
}
&#96;&#96;&#96;

&#x5C;
We have a &#96;isActive&#96; boolean that we are binding to a boolean inside &#96;SplashScreen.swift&#96;. More on this later. However, the &#96;isActive&#96; boolean basically controls which view to show. If &#96;isActive&#96; is &#96;False&#96; then &#96;SplashScreen&#96; will be shown, and as soon as it becomes &#96;True&#96; we will show the &#96;ContentView&#96;.

&#x5C;
Now, lets move on to &#96;SplashScreen.swift&#96;. This is how the code looks like:

&#96;&#96;&#96;javascript
struct SplashScreen: View {
    @State private var scale = 0.7
    @Binding var isActive: Bool
    var body: some View {
        VStack {
            VStack {
                Image(systemName: &quot;scribble.variable&quot;)
                    .font(.system(size: 100))
                    .foregroundColor(.blue)
                Text(&quot;Scribble App&quot;)
                    .font(.system(size: 20))
            }.scaleEffect(scale)
            .onAppear{
                withAnimation(.easeIn(duration: 0.7)) {
                    self.scale = 0.9
                }
            }
        }.onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                withAnimation {
                    self.isActive = true
                }
            }
        }
    }
}
&#96;&#96;&#96;

&#x5C;
Let&#x27;s go through this code line by line. We are assigning two properties. The first one is &#96;scale&#96; which we will use to scale up the size of the logo and text when the view loads up. The next property is a &#96;binding&#96; property called &#96;isActive&#96;. This property is binded to the &#96;isActive&#96; property of &#96;ViewCoordinator&#96;. Changing this property, will reflect which view is shown (ContentView or SplashScreen).

&#x5C;
Next, we have two nested VStacks. In the inner most VStack we have an &#96;Image view&#96; and &#96;Text view&#96;. We are using the &#96;.scaleEffect&#96; modifier and passing it the &#96;scale&#96; property. Initially, the size is 0.7. Now in &#96;.onAppear&#96; closure we will change the scale property to 0.9.

In order to make this change look smooth, we will do this assignment inside a &#96;withAnimation&#96; closure with a &#96;.easeIn&#96; animation of duration 0.7s. So, now when the SplashScreen appears, the logo will animate smoothly.

&#x5C;
In the outer most VStack, we will again use &#96;.onAppear&#96; and in its closure we will change the &#96;.isActive&#96; boolean value to true. We don&#x27;t want this code to run instantly, so we will delay the execution of this code for 2 seconds. This is where you can set duration of the splashScreen. (It can be hard coded value or it can be a dynamic value such as waiting until some response is returned from a network call) So, after 2 seconds the isActive boolean value will change to true. To do this, we will use &#96;DispatchQueue.main.asyncAfter&#96;.  Since, this property is binded to the boolean property inside &#96;ViewCoordinator&#96;, the change in its value will trigger a refresh of the &#96;ViewCoordinator&#96; and we will show the &#96;ContentView&#96;.

&#x5C;
To make the transition from SplashScreen to content view less abrupt, we will again make use of the &#96;withAnimation&#96; closure. This allows for a much smoother transition.

Now, head over to the main app file and make the following change:

&#96;&#96;&#96;javascript
@main
struct SplashScreenSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ViewCoordinator()
        }
    }
}
&#96;&#96;&#96;

&#x5C;
Instead of &#96;ContentView()&#96;, we will call &#96;ViewCoordinator()&#96;.

And that’s it 🎉 This is how the splash screen looks like:

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;splashscreengif.gif?alt=media&amp;token=ef8e283b-e89a-4468-a3b8-5646e10ee55b)

How to Make a Splash Screen for Your SwiftUI App

Find out how to work with fonts in SwiftUI, and change the style, size, weight, color, and more of the text shown in the Text view.

If you use the.font() modifier with Text in SwiftUI, you may change its appearance. San Francisco is the iOS default font, and until you alter it, all of your text will have the basic iOS appearance.

To maintain a look that is consistent with iOS&#x27;s default, choose any of **the** many terrific standard fonts.

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).font(.largeTitle)
&#96;&#96;&#96;

Title, headline, body, callout, caption, and footnote are all typical places for standard typefaces.

Text in the system&#x27;s default typeface (San Francisco) may be resized as follows:

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).font(.system(size: 56.0))
&#96;&#96;&#96;

Altering the font-weight:

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).fontWeight(.light)
&#96;&#96;&#96;

Easily modify the system&#x27;s default font along with its size, weight, and style:

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).font(.system(size: 45, weight: .bold, design:.default))
&#96;&#96;&#96;

Make the default headline font strong and italic:

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).font(.headline).bold().italic()
&#96;&#96;&#96;

Applying the.foregroundColor() modification to a typeface to alter its color:

&#96;&#96;&#96;javascript
Text(&quot;Simple Swift Guide&quot;).font(.callout).foregroundColor(.blue)
&#96;&#96;&#96;

A more difficult topic, this second guide will show you how to implement a custom font family into your iOS app.

To help you quickly identify common typefaces, I&#x27;ve included the following:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;1.png?alt=media&amp;token=1f7fb821-36cd-4554-9269-c4e70fb638e1)

Changing the Width of the Font in SwiftUI

Every user interface needs buttons. Buttons used to be a pain in iOS programming because of UIKit&#x27;s lack of structure, but with the advent of SwiftUI, working with buttons has become much simpler and more enjoyable. Since its first release with the iOS 13 Software Development Kit (SDK), SwiftUI has included a plethora of modifiers that expand its already impressive range of features and customization options. It eliminates monotonous tasks and provides developers with greater freedom.

In this guide, I&#x27;ll show you how to use this SwiftUI component, and you&#x27;ll pick up the following skills to design a basic button and process the user&#x27;s input.

## **Starting a New SwiftUI-Enabled Project**

Let&#x27;s get our feet wet with SwiftUI by making a basic button. Fire up Xcode and create a new project using the Single View Application template. Simply enter the project&#x27;s title. You&#x27;re allowed to use any name you choose; I just used SwiftUIButton. Simply make sure the Use SwiftUI box is checked.

After you&#x27;ve finished working on the project, Xcode will load the ContentView.swift file and show you a preview of it in the design canvas. If the preview isn&#x27;t shown, use the canvas&#x27;s Resume button.

## **Implementing a Basic Button in SwiftUI**

SwiftUI makes it simple to design and implement buttons. The following piece of code may be used to make a button:

&#96;&#96;&#96;javascript
Button(action: {
    &#x2F;&#x2F; What to perform
}) {
    &#x2F;&#x2F; How the button looks like
}
&#96;&#96;&#96;

You&#x27;ll need to provide two chunks of code when making a button:

* What to do - the code to execute after the user taps or selects the button.
* Code describing the button&#x27;s appearance and behavior.

If you just want to convert the Hello World label into a button, for instance, you might make the following changes to the code:

&#96;&#96;&#96;javascript
struct ContentView: View 
{
&lt;br&gt; 
 var body: some View 
{
&lt;br&gt;       
Button(action: 
{&lt;br&gt;           
print(&quot;Hello World tapped!&quot;)
&lt;br&gt;       
})
 {&lt;br&gt;           
Text(&quot;Hello World&quot;)&lt;br&gt;   
   }&lt;br&gt;   
}&lt;br&gt;
}
&#96;&#96;&#96;

As a result, the canvas now displays the words &quot;Hello World&quot; as a clickable button.

Within the design canvas, the button is now unable to tap. To try it out, just hit the Play button. In order to see the Hello World tapped message, however, you must first right-click the Play button and choose Debug Preview from the context menu. When you press the button, the information will display on the control panel.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;12.png?alt=media&amp;token=418af6d7-5018-40b1-8b72-f8309bd3a8bf)

## **Font and Background Modifications for the Button**

Now that you know how to make a basic button, we&#x27;ll look at how to modify its style using in-built options. For instance, you may use the background and foregroundColor modifiers to modify the color of the backdrop and the text, respectively:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .background(Color.purple)
    .foregroundColor(.white)
&#96;&#96;&#96;

To alter the font family, just add the font modifier followed by the family name (e.g.,.title):

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .background(Color.purple)
    .foregroundColor(.white)
    .font(.title)
&#96;&#96;&#96;

## The revised button should resemble the one seen below

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;13.png?alt=media&amp;token=49b07761-52f4-4e80-9e82-3fa4fee3abf6)

The button, as you can see, is poorly designed. Don&#x27;t you think it&#x27;d be fantastic if there was a little breathing room between each line of text? You may use the padding modifier to get that effect by setting it up as follows:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .padding()
    .background(Color.purple)
    .foregroundColor(.white)
    .font(.title)
&#96;&#96;&#96;

After making the modification, the canvas should refresh the button. The improved button design should be easily noticeable.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;14.png?alt=media&amp;token=c668165d-1733-4484-a3f6-ae0c89ceb02d)

## **It Matters Where You Put Those Modifiers**

I&#x27;d want to draw attention to the importance of putting the padding modifier before the background modifier. The following code will provide a different outcome.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;15.png?alt=media&amp;token=cf696357-c9c4-4395-93b3-40085006fc81)

Even if you don&#x27;t want to use your chosen background color for the button, you can still provide some paddings by putting the padding modifier after the background modifier. The explanation may be found in the following reading of the modifiers:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .background(Color.purple) &#x2F;&#x2F; 1. Change the background color to purple
    .foregroundColor(.white)  &#x2F;&#x2F; 2. Set the foreground&#x2F;font color to white
    .font(.title)             &#x2F;&#x2F; 3. Change the font type
    .padding()                &#x2F;&#x2F; 4. Add the paddings with the primary color (i.e. white)
&#96;&#96;&#96;

If, on the other hand, you put padding before background, things will work out like this:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .padding()                &#x2F;&#x2F; 1. Add the paddings
    .background(Color.purple) &#x2F;&#x2F; 2. Change the background color to purple including the padding
    .foregroundColor(.white)  &#x2F;&#x2F; 3. Set the foreground&#x2F;font color to white
    .font(.title)             &#x2F;&#x2F; 4. Change the font type
&#96;&#96;&#96;

## **Including Frames Around the Button**

The padding modifier need not necessarily go at the beginning of a string. All that matters is the style of button you use. Assume you wish to design a button with these margins:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;16.png?alt=media&amp;token=9dab95ac-9c16-4cb6-882a-478abd86b27a)

The Text control may be modified using the following code:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .foregroundColor(.purple)
    .font(.title)
    .padding()
    .border(Color.purple, width: 5)
&#96;&#96;&#96;

Here, purple is used as the foreground color, and empty spaces are added around the text. Using the border modifier, you may set the border&#x27;s width and color. Change the width parameter&#x27;s value and witness the effects for yourself.

Permit me to provide another example. So, a designer shows you this button they&#x27;ve created. Where do you plan to take what you&#x27;ve learned and use it in the real world? Please take a few moments to try to solve the problem on your own before reading on.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;17.png?alt=media&amp;token=e0f0086b-1e85-4267-9bc5-6545ce8dd322)

Okay, here is the code you need:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .fontWeight(.bold)
    .font(.title)
    .padding()
    .background(Color.purple)
    .foregroundColor(.white)
    .padding(10)
    .border(Color.purple, width: 5)
&#96;&#96;&#96;

In order to get the desired button appearance, we use a combination of two padding modifiers. You can make a button with padding and a purple background using the first padding and the background modifier. The border(round, purple) modifier instructs the browser to paint a rounded border around the button, and the padding(10) modifier pads out the area surrounding it.

Okay, let&#x27;s look at a more involved illustration. Is there any way to make the button look like this instead?

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;18.png?alt=media&amp;token=54c1fffe-c473-48dc-84e6-3a03871c2446)

A built-in SwiftUI modification called cornerRadius makes it simple to implement rounded corners. Just use the modifier and set the corner radius to render the button&#x27;s background with rounded corners:

&#96;&#96;&#96;javascript
.cornerRadius(40)
&#96;&#96;&#96;

Since the border modification doesn&#x27;t support rounded corners, adding a border with rounded corners will need some more effort. So, let&#x27;s outline the button and place it above it. The completed code is as follows:

&#96;&#96;&#96;javascript
Text(&quot;Hello World&quot;)
    .fontWeight(.bold)
    .font(.title)
    .padding()
    .background(Color.purple)
    .cornerRadius(40)
    .foregroundColor(.white)
    .padding(10)
    .overlay(
        RoundedRectangle(cornerRadius: 40)
            .stroke(Color.purple, lineWidth: 5)
    )
&#96;&#96;&#96;

With the overlay modifier, you may superimpose one view over another. In the code, we used the RoundedRectangle object&#x27;s stroke modifier to create a border with rounded corners. The stroke modifier lets you change the stroke&#x27;s color and width.

## **Making a Button with Some Graphics and Some Words**

To now, we&#x27;ve solely implemented text links. You or your designer may need to show a picture button in a real-world project. Making an image button follows the same syntax as creating a text button, with the exception of using the Image control.

&#96;&#96;&#96;javascript
Button(action: {
    print(&quot;Delete button tapped!&quot;)
}) {
    Image(systemName: &quot;trash&quot;)
        .font(.largeTitle)
        .foregroundColor(.red)
}
&#96;&#96;&#96;

Conveniently, the picture button is made using existing SF Symbols (such as a garbage can). If we want the picture to be somewhat enlarged, we may use the font modifier.largeTitle. This is the proper format for your button:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;19.png?alt=media&amp;token=4d12437e-582f-4e96-bc7d-13e26238aa67)

Similarly, the same set of adjustments will allow you to make a circular image button with a single backdrop color. An illustration is provided in the following image.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;20.png?alt=media&amp;token=1350de29-0e9c-4275-be16-f08bdfa88252)

A button may be made using either text or an image. You may choose to add the term &quot;Delete&quot; to the icon&#x27;s label, for example. Substitute this into the code:

&#96;&#96;&#96;javascript
Button(action: {
    print(&quot;Delete tapped!&quot;)
}) {
    HStack {
        Image(systemName: &quot;trash&quot;)
            .font(.title)
        Text(&quot;Delete&quot;)
            .fontWeight(.semibold)
            .font(.title)
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.red)
    .cornerRadius(40)
}
&#96;&#96;&#96;

Here, we&#x27;ve combined the picture and text control into one neat little package. The delete symbol and the word &quot;Delete&quot; will be shown next to one another. Using modifiers, we can change the HStack&#x27;s background color, add padding, and round the edges of the buttons. The resultant button is seen in the image below.

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;21.png?alt=media&amp;token=0908caa6-efa8-4085-898c-bf7623307b65)

How to Create Buttons in SwiftUI

For as long as anybody can remember, UIKit has been a part of iOS development. It offers a wide variety of system and user-created application programming interfaces. SwiftUI views integrate well with UIView and UIViewController, making up for the lack of features that SwiftUI possesses.

Here are the topics we&#x27;ll discuss:

* Learn to include a UIViewController and UIView into a SwiftUI window.
* Understanding the mechanics of information exchange between UIKit and SwiftUI.
* The UIViewRepresentable view and the UIViewControllerRepresentable view&#x27;s lifetimes.

## **Integrating a UIViewController into a SwiftUI Application**

Next, we&#x27;ll look at how to add a view controller to the SwiftUI view hierarchy:

* Make use of the UIViewControllerRepresentable declaration to declare a view in SwiftUI.
* Use makeUIViewController() and updateUIViewController() to complete the controller&#x27;s implementation ().

Start out by enclosing a font selector in a SwiftUI view:

*By using the UIFontPickerViewController, we can choose a font family among the available fonts on the device.*

&#96;&#96;&#96;javascript
import UIKit
import SwiftUI
&#x2F;&#x2F; 1.
struct FontPicker: UIViewControllerRepresentable {
    &#x2F;&#x2F; 2.
    func makeUIViewController(context: Context) -&gt; UIFontPickerViewController {
        return UIFontPickerViewController()
    }
    &#x2F;&#x2F; 3.
    func updateUIViewController(_ uiViewController: UIFontPickerViewController, context: Context) {
    }
}
&#96;&#96;&#96;

* Use the FontPicker declaration to indicate an instance of the UIFontPickerViewController class.
* The first view controller is given back by the make function.
* ·Because of the update function, UIViewController is always up-to-date with the latest changes to SwiftUI&#x27;s state.

In this case, we don&#x27;t fill it in since our view controller doesn&#x27;t rely on information from the rest of our SwiftUI app.

Display the font selection modal at the end of ContentView. When displaying modals in SwiftUI, we use the sheet() view modifier. The modifier exposes or conceals a view depending on the value of a binding:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var isPresented = false
    var body: some View {
        Button(&quot;Pick a font&quot;) {
            self.isPresented = true
        }.sheet(isPresented: $isPresented) {
            FontPicker()
        }
    }
}
&#96;&#96;&#96;

The result looks next:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;1.gif?alt=media&amp;token=74508cbe-c240-4a40-b232-4a6b32ac7a12)

## **Information Exchange Between UIViewController and SwiftUI**

Nothing occurs when you launch the app and choose a font from the menu. To do this, we&#x27;d need FontPicker to return the font&#x27;s chosen value and then exit.

SwiftUI&#x27;s @Binding property wrapper is how a view may communicate with its underlying model. Please include this feature into FontPicker:

&#96;&#96;&#96;javascript
@Binding var font: UIFontDescriptor?
&#96;&#96;&#96;

Information and actions performed in the view controller are not immediately sent to other portions of a SwiftUI project. To facilitate these connections, we must provide an instance of the Coordinator class. Communicating with UIKit through delegation, target-actions, callbacks, and KVO is the coordinator&#x27;s job.

&#96;&#96;&#96;javascript
extension FontPicker {
    class Coordinator: NSObject, UIFontPickerViewControllerDelegate {
        var parent: FontPicker
        init(_ parent: FontPicker) {
            self.parent = parent
        }
        func fontPickerViewControllerDidPickFont(_ viewController: UIFontPickerViewController) {
            parent.font = viewController.selectedFontDescriptor
        }
    }
}
&#96;&#96;&#96;

&#x5C;
*Having a coordinator class is necessary. Using this naming convention and placing it within the appropriate view is not required.*

Then, modify FontPicker by include the makeCoordinator() function. The original coordinator is returned.

&#96;&#96;&#96;javascript
func makeCoordinator() -&gt; FontPicker.Coordinator {
    return Coordinator(self)
}
&#96;&#96;&#96;

&#x5C;
Co-ordinator is sent to make and update implicitly through the context parameter. The coordinator is usually wired up using the make method:

&#96;&#96;&#96;javascript
func makeUIViewController(context: UIViewControllerRepresentableContext&lt;FontPicker&gt;) -&gt; UIFontPickerViewController {
    let picker = UIFontPickerViewController()
    picker.delegate = context.coordinator
    return picker
}
&#96;&#96;&#96;

&#x5C;
We&#x27;re down to a single remaining option. After the user has chosen a font, we&#x27;d want to have the modal disappear. We may leverage the presentation mode of the environment for this purpose. To get the presentationMode from the FontPicker&#x27;s environment, add the @Environment property wrapper.

&#96;&#96;&#96;javascript
@Environment(&#x5C;.presentationMode) var presentation Mode
&#96;&#96;&#96;

&#x5C;
*The app&#x27;s environment is similar to a dictionary in that it stores global settings and preferences. The data is propagated automatically from the parent view to any subviews.*

&#x5C;
The correct location to dismiss the font selector is in the coordinator&#x27;s delegate method. To fontPickerViewControllerDidPickFont(), add the following line:

&#96;&#96;&#96;javascript
parent.presentation
Mode.wrappedValue.dismiss()
&#96;&#96;&#96;

&#x5C;
Finally, let&#x27;s use ContentView to show off the chosen typeface:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @State private var isPresented = false
    @State private var font: UIFontDescriptor?
    var body: some View {
        VStack(spacing: 30) {
            Text(font?.postscriptName ?? &quot;&quot;)
            Button(&quot;Pick a font&quot;) {
                self.isPresented = true
            }
        }.sheet(isPresented: $isPresented) {
            FontPicker(font: self.$font)
        }
    }
}
&#96;&#96;&#96;

&#x5C;
Here’s the output:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;2.gif?alt=media&amp;token=8dacd02c-bd74-4652-88be-a7f5b0da4284)

## **Putting SwiftUI&#x27;s UIView to Work**

Adding a UIView is quite similar to adding a UIViewController. In particular, the SwiftUI view has to follow the same set of rules as the UIViewRepresentable protocol and implement the same set of functions.

For a sample of how UIActivityIndicatorView may be implemented in SwiftUI, have a look at the following:

&#96;&#96;&#96;javascript
struct Spinner: UIViewRepresentable {
    let isAnimating: Bool
    let style: UIActivityIndicatorView.Style
    func makeUIView(context: Context) -&gt; UIActivityIndicatorView {
        let spinner = UIActivityIndicatorView(style: style)
        spinner.hidesWhenStopped = true
        return spinner
    }
    func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {
        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
    }
}
&#96;&#96;&#96;

&#x5C;
Let’s display the spinner in ContentView:

&#96;&#96;&#96;javascript
struct ContentView: View {   
    @State private var isAnimating = false
    var toggle: some View {
        Toggle(isOn: $isAnimating) { EmptyView() }
            .labelsHidden()
    }
    var body: some View {
        VStack(spacing: 30) {
            toggle
            Spinner(isAnimating: isAnimating, style: .large)
        }
    }
}
&#96;&#96;&#96;

&#x5C;
You&#x27;ll get the following output if you execute this code:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;3.gif?alt=media&amp;token=91400008-9efb-476d-b7f4-3df21df6c11c)

How to Use UIViewController in SwiftUI

Whenever you feel like changing the text color or change width of an image, you are basically using view modifiers in SwiftUI to do so. Not only that you can use View modifier to change the behavior of a button or a textfield as well. View Modifiers are extremely powerful and with the &#96;ViewModifier&#96; protocol we can make our own custom view modifiers as well.

&#x5C;
&#96;ViewModifier&#96; returns the modified view and we can chain them together to get the final result. View Modifiers can also be used to bundle multiple other view modifiers together to reduce duplicate code in your project. In this article, we will look at creating three view modifiers. The first view modifier will be bundling multiple view modifiers together and applying our custom modifier to a &#96;Text&#96; view. The other will be for a Button. The last modifier will be for a TextField to check if the email entered is valid or not and if it is valid it will change the color of the textfield border.

## TextView View Modifier

Let&#x27;s say that there is a certain style of text that we are using in our project. Such as:

&#96;&#96;&#96;javascript
Text(&quot;Paris Cafe&quot;)
      .fontDesign(.serif)
      .lineLimit(1)
      .font(.title)
      .foregroundColor(.blue)
      .bold()
&#96;&#96;&#96;

&#x5C;
Now, we are using this style in multiple views and writing these modifiers for Text view is repetitive work. We can use a custom view modifier to fix this issue. Here is how:

Lets create a new struct conforming to &#96;ViewModifier&#96; protocol and call &#96;CustomTitleModifier&#96;. Here is how the our struct will look like.

&#96;&#96;&#96;javascript
struct CustomTitleModifier: ViewModifier {
  func body(content: Content) -&gt; some View {
    content
      .fontDesign(.serif)
      .lineLimit(1)
      .font(.title)
      .foregroundColor(.blue)
      .bold()
  }
}
&#96;&#96;&#96;

&#x5C;
When conforming to &#96;ViewModifier&#96; protocol, you need to implement the &#96;body&#96; function that takes in content and returns some &#96;View&#96;. The content is basically the view to which the modifier is attached to. Now inside the &#96;body&#96; function, we can apply our text view modifiers.
Thats about it. Now back in the &#96;ContentView.swift&#96; file we can do the following:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        VStack {
            Text(&quot;Paris Cafe&quot;)
                .modifier(CustomTitleModifier())
        }
    }
}
&#96;&#96;&#96;

&#x5C;
So, on the Text view add &#96;.modifier&#96; and pass it the &#96;CustomTitleModifier&#96; struct instance. And thats about. Now, if you don&#x27;t want to use this &#96;.modifier&#96; and attach the &#96;CustomTitleModifier&#96; directly to the &#96;Text&#96; view, we can create an extension like so:

&#96;&#96;&#96;javascript
extension Text {
    func customModifier() -&gt; some View {
        modifier(CustomTitleModifier())
    }
}
&#96;&#96;&#96;

&#x5C;
Here, we are creating a function called &#96;customModifier&#96; and it returns some &#96;View&#96;. Inside that function we are calling the &#96;modifier&#96; function and passing in the &#96;CustomTitleModifier()&#96; struct instance. Now, back in &#96;ContentView&#96; we can just call the &#96;customModifier()&#96; function like so:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        VStack {
            Text(&quot;Paris Cafe&quot;)
                .customModifier()
        }
    }
}
&#96;&#96;&#96;

## Button Label View Modifier in SwiftUI

Most apps use a certain button styling throughout the app. Again this means repetitive code and we again can use some sort of a &#96;View Modifier&#96; to bundle all the styling modifiers into one. This is how we are styling our button:

&#96;&#96;&#96;javascript
Button {
      print(&quot;Press Me!&quot;)
  } label: {
      Text(&quot;Press Me&quot;)
          .font(.title2)
          .padding(.horizontal, 50)
          .padding(.vertical, 20)
          .foregroundColor(Color.blue)
          .overlay(
            RoundedRectangle(cornerRadius: 8)
              .fill(.blue)
              .opacity(0.3)
          )
  }
&#96;&#96;&#96;

&#x5C;
Let&#x27;s create a custom modifier just like before:

&#96;&#96;&#96;javascript
struct CustomButtonModifier: ViewModifier {
    func body(content: Content) -&gt; some View {
        content
          .font(.title2)
          .padding(.horizontal, 50)
          .padding(.vertical, 20)
          .foregroundColor(Color.blue)
          .overlay(
            RoundedRectangle(cornerRadius: 8)
              .fill(.blue)
              .opacity(0.3)
          )
    }
}
&#96;&#96;&#96;

&#x5C;
Again we created a struct and conformed it to the &#96;ViewModifier&#96; protocol and inside the &#96;body&#96; function add all the modifiers to the content. This function will return a view.

Let&#x27;s implement this new custom modifier now on the Button. So inside the label closure, underneath the &#96;Text(&quot;Press Me&quot;)&#96; we will add the modifier and this how the code will look:

&#96;&#96;&#96;javascript
Button {
    print(&quot;Press Me!&quot;)
} label: {
    Text(&quot;Press Me&quot;)
        .modifier(CustomButtonModifier())
}
&#96;&#96;&#96;

## Creating an Email Validator Modifier in SwiftUI

This will be a little more complex and comes under the umbrella of &#96;Conditional Modifiers&#96;, meaning this will modify the view only if certain condition is met. So, basically we implement a TextField to enter email. If the email is valid we will turn the border around the textfield green else it will stay as it is.

&#x5C;
First we will create an &#96;ObservableObject&#96; class called &#96;EmailChecker&#96;:

&#96;&#96;&#96;javascript
class EmailChecker: ObservableObject {
    let pattern = &quot;[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+&#x5C;&#x5C;.[A-Za-z]{2,64}&quot;

    @Published var email = &quot;&quot;

    func isValid(_ email: String) -&gt; Bool {
        return (email.range(of: pattern, options: .regularExpression) != nil)
    }
}
&#96;&#96;&#96;

&#x5C;
In this class we have a @Published property called &#96;email&#96; which SwiftUI will keep track of for us. Inside the &#96;isValid&#96; function, we are passing a string and checking if that string is a valid email address. We do this using regular expression also known as regex. If the regex successfully finds the match it returns &#96;True&#96; else its &#96;False&#96;.

Let&#x27;s look at the custom modifier now:

&#96;&#96;&#96;javascript
struct EmailValidator: ViewModifier {
    var value: String
    var validator: (String) -&gt; Bool
    func body(content: Content) -&gt; some View {
        content
            .border(validator(value) ? .green : .secondary)
    }
}
&#96;&#96;&#96;

&#x5C;
This custom modifier called &#96;EmailValidator&#96; has two stored properties. &#96;Value&#96; which is of type &#96;string&#96; and &#96;validator&#96; which is a closure (aka a function). &#96;Validator&#96; takes in the &#96;string&#96; and returns &#96;Boolean&#96;.  Within the &#96;body&#96; function, we are applying border to the &#96;content&#96; and within the border arguments using the &#96;validator&#96; to check if the email entered is valid or not, in which case the border color turns green else it stays &#96;.secondary&#96;.

Now we will call this custom modifier underneath the TextField. Remember that the view modifier&#x27;s order matter.

This is how we will call this modifier in &#96;ContentView&#96;:

&#96;&#96;&#96;javascript
struct ContentView: View {
    @ObservedObject var validator = EmailChecker()
    var body: some View {
        VStack {
            TextField(&quot;Email&quot;, text: $validator.email)
                .modifier(EmailValidator(value: validator.email, validator: { someEmail in
                    validator.isValid(someEmail)
                }))

        }
    }
}
&#96;&#96;&#96;

&#x5C;
Inside the &#96;ContentView&#96;, we are assign the variable &#96;validator&#96; an instance of &#96;EmailChecker&#96;. Make sure you mark this as &#96;ObservedObject&#96;. Then we bind the text property of &#96;TextField&#96; to the &#96;validator.email&#96;. Then we will use the &#96;.modifier&#96; function and pass the custom View Modifier.

&#x5C;
This view modifier requires two parameters: email and the validator function. So, we will pass the &#96;validator.email&#96; and then we will pass the implementation for the &#96;validator&#96; which will be &#96;validator.isValid()&#96; function.

&#x5C;
So, here is how this view modifier works:


1. We call this modifier by initializing the &#96;EmailValidator&#96; struct with the textfield input (the email) and the function that checks if the email is valid or not.

&#96;&#96;&#96;javascript
.modifier(EmailValidator(value: validator.email, validator: { someEmail in
    validator.isValid(someEmail)
}))
&#96;&#96;&#96;


2. Then the &#96;body&#96; function of the view modifier runs, where it first calls the &#96;validator&#96; function by passing in the &#96;value&#96; and checks if the email is valid or not. If it is valid, it adds green colored border around the textfield.

&#96;&#96;&#96;javascript
func body(content: Content) -&gt; some View {
    content
        .border(validator(value) ? .green : .secondary)
}
&#96;&#96;&#96;

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;viewmodifiergif.gif?alt=media&amp;token=28adbc5b-d88f-446d-af2f-141a77ee3eaa)

How to Create Custom View Modifiers in SwiftUI

List in SwiftUI allows us to present rows of data arranged in single column with an option to select one or more row items. In this tutorial we will dive into how to create a
simple multi-section List. Here is how to do it:

## Creating a Datasource

We will start with creating a datasource which we will use to populate the list with. We will create a struct called &#96;Place&#96; and then create another struct called &#96;Continent&#96;. We will then create an array of type &#96;Place&#96; inside the &#96;Continent&#96; struct and use that as our data source. Make sure that &#96;Place&#96; struct conforms to &#96;Identifiable&#96; protocol. More on this protocol later.

Here is the code for it:

&#96;&#96;&#96;javascript
struct Place: Identifiable {
    var id = UUID()
    var name : String = &quot;&quot;
}

struct DataSource {
    static var continent = [Place(name: &quot;Asia&quot;),
                            Place(name: &quot;Africa&quot;),
                            Place(name: &quot;South America&quot;),
                            Place(name: &quot;North America&quot;),
                            Place(name: &quot;Australia&quot;),
                            Place(name: &quot;Antartica&quot;),
                            Place(name: &quot;Europe&quot;)]
}
&#96;&#96;&#96;

## Implementing a Simple List in SwiftUI

Next, we will implement the List, so in the &#x5C;&#96;contentView&#x5C;&#96; please write the following:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        List(DataSource.continent) { continent in
            Text(continent.name)
        }
    }
}
&#96;&#96;&#96;

That&#x27;s about it! List gets the data source, and returns the item, which we will add in a &#96;Text&#96; view.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic2-2.png?alt=media&amp;token=915b4d90-d7fe-4582-8161-5ce0c2c0ac41)

## Adding Sections

Now, lets add sections to this list. We will make these continents as section headers and list countries under each continent (except for Antartica 🥶). Our datasource will
look something like this now:

&#96;&#96;&#96;javascript
struct Country: Hashable, Identifiable {
    var id = UUID()
    var countryName : String = &quot;&quot;
}
struct Place: Identifiable {
    var id = UUID()
    var name : String = &quot;&quot;
    var countries = [Country]()

}

struct DataSource {
    static var continent = [Place(name: &quot;Asia&quot;,
                                  countries: [Country(countryName: &quot;🇹🇭 Thailand&quot;),Country(countryName: &quot;🇯🇵 Japan&quot;),Country(countryName: &quot;🇮🇳 India&quot;),Country(countryName: &quot;🇵🇰 Pakistan&quot;),Country(countryName: &quot;🇻🇳 Vietnam&quot;)]),
                            Place(name: &quot;Africa&quot;,
                                  countries: [Country(countryName: &quot;🇿🇦 South Africa&quot;),Country(countryName: &quot;🇸🇩 Sudan&quot;),Country(countryName: &quot;🇳🇬 Nigeria&quot;),Country(countryName: &quot;🇳🇦 Namibia&quot;),Country(countryName: &quot;🇰🇪 Kenya&quot;)]),
                            Place(name: &quot;South America&quot;,
                                  countries: [Country(countryName: &quot;🇧🇷 Brazil&quot;),Country(countryName: &quot;🇨🇴 Colombia&quot;),Country(countryName: &quot;🇨🇱 Chile&quot;),Country(countryName: &quot;🇦🇷 Argentina&quot;),Country(countryName: &quot;🇧🇴 Bolivia&quot;)]),
                            Place(name: &quot;North America&quot;,
                                  countries: [Country(countryName: &quot;🇨🇦 Canada&quot;),Country(countryName: &quot;🇺🇸 United States of America&quot;)]),
                            Place(name: &quot;Europe&quot;,
                                  countries: [Country(countryName: &quot;🇫🇷 France&quot;),Country(countryName: &quot;🇩🇪 Germany&quot;),Country(countryName: &quot;🇨🇭Switzerland&quot;),Country(countryName: &quot;🇬🇧 United Kingdom&quot;),Country(countryName: &quot;🇳🇱 Netherland&quot;)]),
                            Place(name: &quot;Oceania&quot;,
                                  countries: [Country(countryName: &quot;🇦🇺 Australia&quot;),Country(countryName: &quot;🇳🇿 New Zealand&quot;),Country(countryName: &quot;🇵🇬 Papua New Guinea&quot;)]),
                            Place(name: &quot;Antartica&quot;,
                                  countries: [Country(countryName: &quot;🥶&quot;)])

    ]
}
&#96;&#96;&#96;

We have a new struct called &#96;Country&#96; that conforms to &#96;Hashable&#96; and &#96;Identifiable&#96; and in &#96;Place&#96; struct we have an array of type &#96;Country&#96;. Going back to the content view will now add few things, here is the code:

&#96;&#96;&#96;javascript
NavigationView {
    List {
        ForEach(DataSource.continent, id: &#x5C;.id) { continent in
            Section(header: Text(continent.name)) {
                ForEach(continent.countries, id: &#x5C;.id) { country in
                    Text(country.countryName)
                }
            }

        }
    }.navigationTitle(&quot;🌎 World&quot;)
}
&#96;&#96;&#96;

&#x5C;
First we will wrap our List View with a &#96;NavigationView&#96;. Inside the &#96;List&#96; closure, we will run a &#96;ForEach&#96; loop on the continents array. Please note here that we are providing an &#96;id&#96; argument as well here. This is used in order to tell the &#96;List&#96; how to differentiate between elements. The first ForEach closure returns the element of type &#96;Continent&#96;. We will create the section header using the &#96;Section&#96; view. We will provide the &#96;Continent&#96; name as the header and then inside the content closure we will run another &#96;ForEach&#96; loop but this time on &#96;continent.countries&#96; array. Note the &#96;&#x5C;.id&#96;, in order to identify each country element. This is the reason why our structs conform to &#96;Identifiable&#96; protocols, so that it is mandatory for us to add the &#96;id&#96; property for each element. Next, we are just showing the &#96;countryName&#96; in the Text view.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic1-2.png?alt=media&amp;token=71cc07fb-faf2-4241-80a8-5238de26d8ae)

## Implementing Multi-Section

The last thing I would like to implement is the ability to select multiple items from the list. In order to do this just add the following property inside the content view:

&#96;@State private var selection = Set&lt;UUID&gt;()&#96;

&#x5C;
Next, bind this selection property to the List&#x27;s &#96;selection&#96; argument and then add an &#96;EditButton()&#96; to the top navigation bar like this:

&#96;&#96;&#96;javascript
NavigationView {
    List(selection: $selection) {
        ....
    }.navigationTitle(&quot;🌎 World&quot;)
    .toolbar {
        EditButton()
    }
}
&#96;&#96;&#96;

So, now you have an edit button on the navigation bar of the app. Tapping it will let you make multiple selections and all those selections will be stored in the &#96;selection&#96; set.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic3-2.png?alt=media&amp;token=3e6a333e-d46a-48f0-854b-c945f15adc0a)

The full code for this project is available on GitHub.

How to Implement Lists in SwiftUI

How to customize the navigation bar with buttons and graphics using SwiftUI&#x27;s NavigationView is the topic of this article. To do so, we&#x27;ll make use of the navigationBarItems modification, which allows you to choose which items appear at the start and end of the bar (e.g., buttons, images or other SwiftUI views). Items with more prominence will be shown on the left side of the screen, while those with less prominence will appear on the right.

The following code will add an Edit button to the end of the navigation bar:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text(&quot;List of SwiftUI tutorials&quot;)
            .navigationBarTitle(&quot;Tutorials&quot;)
            .navigationBarItems(trailing:
                Button(action: {
                    print(&quot;Edit button pressed...&quot;)
                }) {
                    Text(&quot;Edit&quot;)
                }
            )
        }
    }
}
&#96;&#96;&#96;

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;1.png?alt=media&amp;token=e55215eb-b96f-488a-9693-63f6a81a5d4e)

The navigationBarItems class&#x27;s lagging edit button in the main menu

Create a primary Edit button for the toolbar:

&#96;&#96;&#96;javascript
.navigationBarItems(leading:
    Button(action: {
        print(&quot;Edit button pressed...&quot;)
    }) {
        Text(&quot;Edit&quot;)
    }
)
&#96;&#96;&#96;

Insert a button with a trailing picture using an SF Symbol onto the menu bar:

&#96;&#96;&#96;javascript
.navigationBarItems(trailing:
    Button(action: {
        print(&quot;User icon pressed...&quot;)
    }) {
        Image(systemName: &quot;person.crop.circle&quot;).imageScale(.large)
    }
)
&#96;&#96;&#96;

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;2.png?alt=media&amp;token=fd0cb059-4e21-4edb-8137-a5d52ac2b058)

Using navigationBarItems, add a lagging image button to the navigation bar.

HStack makes it easy to extend your menu bar with additional tacked-on buttons:

&#96;&#96;&#96;javascript
.navigationBarItems(trailing:
    HStack {
        Button(action: {
            print(&quot;Reload button pressed...&quot;)
        }) {
            Text(&quot;Reload&quot;)
        }
 Button(action: {
            print(&quot;Edit button pressed...&quot;)
        }) {
            Text(&quot;Edit&quot;)
        }
    }
}
&#96;&#96;&#96;

This is how you can implement navigation in SwiftUI. Cheers!