Elevate Your Mobile App’s UI with Gradient Borders

Setting Up a Sample To-Do List

To demonstrate the implementation of gradient borders, we’ll use a simple to-do list app as an example. Our to-do list will consist of items with titles, details, status, and action buttons. We’ll focus on applying gradient borders to the list items and buttons.

Creating Gradient Borders

To create gradient borders, we’ll define a custom gradient class that conforms to the View protocol. We’ll use the LinearGradient struct to create a horizontal gradient that blends two colors.

struct GradientBorder: View {
    let colors: [Color]
    let startPoint: UnitPoint
    let endPoint: UnitPoint

    var body: some View {
        LinearGradient(gradient: Gradient(colors: colors), startPoint: startPoint, endPoint: endPoint)
    }
}

For our list items, we’ll use a rectangle shape with a stroked path to create the border.

struct GradientRectangle: Shape {
    let gradient: GradientBorder

    func makeBody(configuration: Configuration) -> some View {
        Rectangle()
           .stroke(LinearGradient(gradient: Gradient(colors: gradient.colors), startPoint: gradient.startPoint, endPoint: gradient.endPoint))
    }
}

Applying Gradient Borders to List Items

To apply the gradient border to our list items, we’ll create a custom view that overlays the gradient onto the list item’s VStack. We’ll use the.overlay() modifier to apply the gradient border.

struct ListItem: View {
    let title: String
    let detail: String
    let status: Bool
    let action: () -> Void

    var body: some View {
        VStack(alignment:.leading) {
            Text(title)
            Text(detail)
               .foregroundColor(.secondary)
        }
       .overlay(
            GradientRectangle(gradient: GradientBorder(colors: [.blue,.green], startPoint:.leading, endPoint:.trailing))
               .frame(width: 2)
        )
    }
}

Applying Gradient Borders to Buttons

For our action buttons, we’ll create a custom button style that incorporates the gradient border. We’ll use a capsule shape instead of a rectangle to match the button’s bounds.

struct GradientButton: View {
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
               .padding()
               .background(
                    Capsule()
                       .stroke(LinearGradient(gradient: Gradient(colors: [.blue,.green]), startPoint:.leading, endPoint:.trailing))
                )
        }
    }
}

Putting it All Together

With our gradient borders applied to both list items and buttons, our to-do list app now has a visually appealing and cohesive design. The gradient borders effectively differentiate the UI features and create an attractive interface.

Taking it Further

Feel free to experiment with different colors, gradient types, and directions to further enhance your app’s UI. With gradient borders, the possibilities are endless!

• Try using different gradient types, such as radial or angular gradients.
• Experiment with various color combinations to find the perfect look for your app.
• Adjust the gradient direction to suit your design needs.