SwiftUI divider: A powerful line

SwiftUI divider is a simple yet powerful element that plays a crucial role in crafting visually appealing and well-structured interfaces. 

In this blog post, we’ll explore the SwiftUI Divider and how it can elevate your app’s design and how to customize it to fit in your application.

How do I create a divider in SwiftUi?

Before diving into anything too crazy, design wise, let’s start with the most basic example of using the divider in SwiftUI.

In the following example, we will create a divider between two text elements:

import SwiftUI

struct DividerView: View {
    var body: some View {
        Text("Hello, below me there is a divider.")
        Divider()
        Text("Hello, above me there is a divider.")
    }
}

The result:

SwiftUI divider color

By default the color of the divider is grey and it works well in many design cases, but you might want to change the color of your divider. To change the color we need to use the .overlay modifier.

In the following example, we will create a divider with the color red:

import SwiftUI

struct DividerView: View {
    var body: some View {
        Text("Hello, below me there is a RED divider.")
        Divider()
            .overlay(.red)
    }
}

The result:

The thickness of divider in SwiftUI

Now we have learned how to use the divider and change the color, now it’s time to learn how to change the thickness of the divider — when changing the thickness we can really see the red color.

Horizontal divider thickness

In the following example, we will create a red horizontal divider with a height of 10:

import SwiftUI

struct DividerView: View {
    var body: some View {
        Text("Hello, below me there is a RED divider.")
        Divider()
            .frame(minHeight: 10)
            .overlay(.red)
    }
}

The result:

Vertical divider thickness

In the following example, we will create a red horizontal divider with a width of 8:

import SwiftUI

struct DividerView: View {
    var body: some View {
        HStack {
            Text("Hello, next to me there is a RED divider.")
            Divider()
                .frame(width: 8)
                .overlay(.red)
        }
    }
}

The result:

How do you make a divider horizontal in SwiftUI?

To create a divider that goes horizontally all we have to do it to wrap the divider inside an HStack.

In the following example, we create a horizontal divider to the right of our text element:

import SwiftUI

struct DividerView: View {
    var body: some View {
        HStack {
            Text("Hello, next to me there is a RED divider.")
            Divider()
                .overlay(.red)
        }
    }
}

The result:

How do you change the size of a divider in SwiftUI?

There are two ways of controlling the size of your divider, it depends on whether your divider goes vertically or horizontally. To control the size of the divider when it goes vertically you will set the height and horizontally you will set the width.

Vertically size of divider

import SwiftUI

struct DividerView: View {
    var body: some View {
        HStack {
            Text("Hello, next me there is a divider with the height of 100")
            Divider()
                .frame(height: 100)
        }
    }
}

Horizontally size of divider

import SwiftUI

struct DividerView: View {
    var body: some View {
        Text("Hello, below me there is a divider with the width of 100")
        Divider()
            .frame(width: 100)
    }
}

Wrap up SwiftUI Divider

The divider in SwiftUI might seem like a humble line, but its impact on the visual appeal and usability of your app is profound. By understanding its capabilities and incorporating it into your UI design, you can create seamless and elegant user experiences. 

In this blog post, we learned how to create a divider, adjust the size, change the color, and change the thickness, I hope you enjoyed the read and can use it in your next application.

Scroll to Top