Change the size of the ProgressView in SwiftUI

In this tutorial, We’ll learn how to change the progreesView size in SwiftUI. By default, ProgressView is very small in size. But don’t worry we can easily change it using the scaleEffect and the controlSize modifier.

what this blog will cover:

• How to change the size of progreesView
• Use of controlSize modifier.
• Why we shouldn’t use the scaleEffect modifier for changing progreesView size.

Change the size of the ProgressView using controlSize modifier

Let’s see how we can use controlSize modifier for changing the size of the progressView.

The controlSize modifier can change the view size to four different sizes.

• mini
• small
• regular
• large

let’s see each of them and how they change the progressView size.

1)  .controlSize(.mini)

struct ContentView: View {
    
    var body: some View {
   
        VStack(spacing: 20){
            
            ProgressView().controlSize(.mini)
            
        }
    }
}

Mini and small controlSize somewhat look the same. So, in this tutorial, we’ll just see the mini size.

2) .controlSize(.regular)

struct ContentView: View {
    
    var body: some View {
   
        VStack(spacing: 20){
            
            
            ProgressView().controlSize(.mini)
            Text("------------")
            ProgressView().controlSize(.regular)

      }
   }
}

3) .controlSize(.large)

struct ContentView: View {
    
    var body: some View {
   
        VStack(spacing: 20){
            
            
            
            ProgressView().controlSize(.mini)
            Text("------------")
                  
            ProgressView().controlSize(.regular)
            
            Text("------------")
          
            ProgressView().controlSize(.large)
     
          }
     }
}

Why we shouldn’t use the scaleEffect modifier

So, using the scaleEffect modifier as mentioned earlier is another way of changing the size of the view. It’s simple to use just like the controlSize modifier.

 ProgressView().scaleEffect(5)

Now, Let’s discuss why we shouldn’t use the scaleEffect modifier for changing the view size. The reason is that it doesn’t give the same result as the controlSize modifier. The scaleEffect modifier scales the view. If the scaleEffect modifier is given a bigger number it makes the view distorted on the screen which doesn’t look good.