Skip to content

SwiftUI: Gradient

With Gradient, you will be able to play more with colors and be able to create even more beautiful color representation.

A color gradient represented as an array of color stops, each having a parametric location value.

Apple Documentation

In this tutorial, you’ll learn how to implement different gradient in SwiftUI. You’ll learn:

  • How to use Angular Gradient.
  • How to use Linear Gradient.
  • How to use Radial Gradient.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Angular Gradient

With Angular Gradient, you set the center of the circle and the gradient will start from the degree that you set filling it clockwise completing the whole circle.

Currently the gradient start filling from 180 degree on moving clockwise.

You can even tweak with the starting and ending angle of the gradient. You will set the starting angle as 90 and the ending angle as 180.

If the center poking out is more of an eye sore, you will move it to the trailing.

Linear Gradient

Linear gradient is the most common used gradient usually with the starting point and ending point.

Apple has done a great job in pre-defining the UnitPoint with the use of .leading, .trailing, .top, .topLeading and so on. All you gotta know is where would you like it to begin and end.

From left to right:

From top to bottom:

From left to top right:

In the event that you need a custom direction, you can even define your own Unit Point.

Radial Gradient

Radial Gradient behaves the same way as Linear Gradient with the exception of starting point and ending point. With Radial Gradient, you specify the starting radius and ending radius. With that, the gradient will fill it circular moving outward.

To make it obvious, you will set a higher radius.

If center isn’t your choice of design. You can move it around using the pre-defined unit point. You will use .topLeading and it should appear on the top left.

What does it really mean here?

Looking at the image below, the starting radius begin from the inner circle and end in the outer circle. Between the inner and outer circle, that’s where the gradient take place.

Let’s take a closer look this time without any editing on it.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2017-2020