How to fill shape with Gradient in SwiftUI

Question

how can i pass LinearGradient to a shape (for example Rectangle) just in SwiftUI?

Rectangle().frame(width: UIScreen.main.bounds.width, height: 200)

[`Rectangle.fill`](https://developer.apple.com/documentation/swiftui/rectangle/3286692-fill) and [`Rectangle.fill`](https://developer.apple.com/documentation/swiftui/rectangle/3286693-fill) (yes, they are slightly different, so you will need to look at them and decide which meets your needs) — MadProgrammer, Jun 07 '19 at 05:50
@MadProgrammer Thank, right before you answer, i found that the fill method should be called as the first thing which is added and i was trying to use that as second parameter. — Sajad Beheshti, Jun 07 '19 at 06:02
@drewster Good thing it's just a comment - you could search just "SwiftUI rectangle" — MadProgrammer, Dec 02 '19 at 20:43

score 28 · Accepted Answer · answered Jun 07 '19 at 06:01

28

This should work:

static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
static let gradientEnd = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)

var body: some View {
  Rectangle()
    .fill(LinearGradient(
      gradient: .init(colors: [Self.gradientStart, Self.gradientEnd]),
      startPoint: .init(x: 0.5, y: 0),
      endPoint: .init(x: 0.5, y: 0.6)
    ))
    .frame(width: 300, height: 200)
}

answered Jun 07 '19 at 06:01

M Reza

18,350
14
66
71

could u explain what the x & y in ```startPoint``` and ```endPoint``` means? It just has a slightly different with 0 -> 0.6, what position it is rely on. – Zhou Haibo Mar 02 '20 at 04:50

score 7 · Answer 2 · answered Apr 16 '20 at 12:01

SwiftUI

Here is a possible solution.

struct TestSwiftUIView: View {
    let uiscreen = UIScreen.main.bounds

    var body: some View {
        Rectangle()
        .fill(
            LinearGradient(gradient: Gradient(colors: [Color.clear, Color.black]),
                           startPoint: .top,
                           endPoint: .bottom))
        .frame(width: self.uiscreen.width,
               height: self.uiscreen.height,
               alignment: .center)
    }
}

This code snippet will produce a screen like that:

The startPoint and the endPoint are UnitPoint. For UnitPoints you have the following options:

.zero

.center

.leading

.trailing

.top

.bottom

.topLeading

.topTrailing

.bottomLeading

.bottomTrailing

score 2 · Answer 3 · answered Aug 23 '19 at 19:23

2

As of beta 6, you must set the forgroundColor to clear first.

Rectangle()
    .foregroundColor(.clear)
    .background(LinearGradient(gradient:  Gradient(colors: [Color("gradient1"), Color("gradient2")]), startPoint: .top, endPoint: .bottom))

answered Aug 23 '19 at 19:23

Shane Miller

21
1

score 2 · Answer 4 · answered Feb 03 '20 at 14:34

Rectangle().frame(width: UIScreen.main.bounds.width, height: 200) // You original code

.overlay(
    LinearGradient(gradient: Gradient(colors: [.red, .purple]), startPoint: .top, endPoint: .bottom))
)

Note that:

When you apply an overlay to a view, the original view continues to provide the layout characteristics for the resulting view.

How to fill shape with Gradient in SwiftUI

4 Answers4

SwiftUI