Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
SwiftUI Cookbook

You're reading from   SwiftUI Cookbook A guide to solving the most common problems and learning best practices while building SwiftUI apps

Arrow left icon
Product type Paperback
Published in Nov 2021
Publisher Packt
ISBN-13 9781803234458
Length 616 pages
Edition 2nd Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Giordano Scalzo Giordano Scalzo
Author Profile Icon Giordano Scalzo
Giordano Scalzo
Edgar Nzokwe Edgar Nzokwe
Author Profile Icon Edgar Nzokwe
Edgar Nzokwe
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Chapter 1: Using the Basic SwiftUI Views and Controls 2. Chapter 2: Going Beyond the Single Component with Lists and Scroll Views FREE CHAPTER 3. Chapter 3: Exploring Advanced Components 4. Chapter 4: Viewing while Building with SwiftUI Preview 5. Chapter 5: Creating New Components and Grouping Views with Container Views 6. Chapter 6: Presenting Extra Information to the User 7. Chapter 7: Drawing with SwiftUI 8. Chapter 8: Animating with SwiftUI 9. Chapter 9: Driving SwiftUI with Data 10. Chapter 10: Driving SwiftUI with Combine 11. Chapter 11: SwiftUI Concurrency with async await 12. Chapter 12: Handling Authentication and Firebase with SwiftUI 13. Chapter 13: Handling Core Data in SwiftUI 14. Chapter 14: Creating Cross-Platform Apps with SwiftUI 15. Chapter 15: SwiftUI Tips and Tricks 16. Other Books You May Enjoy

Rendering a gradient view in SwiftUI

SwiftUI has several ways of rendering gradients. A gradient can be used to fill a shape, or even fill a border.

In this recipe, we will understand what types of gradients we can use with SwiftUI and how to define them.

Getting ready

Create a SwiftUI app called GradientViews.

How to do it…

SwiftUI has three different types of gradients:

  • Linear gradients
  • Radial gradients
  • Angular gradients

In each one, we can define the list of colors that will smoothly transform into each other. Depending on the type of gradient, we can define some additional properties such as the direction, radius, and angles of the transformation.

To explore all of them, we are going to add a Picker component to select the type of gradient.

The ContentView struct will have a Text component that shows the selected gradient. We can do this by performing the following steps:

  1. Let's start by adding a style, including a...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime