Create the pie and donut slices and animate them

Image for post
Image for post
Pie & Donut Charts in SwiftUI

To start creating the shapes and animate them, we first need to start with the data we need to build the charts.

Chart Data

Create a struct for the chart data. The data we need are the percentage, color, and a sum of percentages that come before the current percentage. We will need the sum when we use the modifier .trim to start the trim from the last percentage value.

Now, we need to create an observable object. Add a published array of our chart data and populate it with data. Make sure your percentage adds up to 100 while testing. Assign all the chart data’s value to 0. …

How to use the redacted modifier

Placeholder with .redacted()
Placeholder with .redacted()
Placeholder with .redacted(). Photo by the author.

In this tutorial, we are going to build an Instagram-like UI to demonstrate the redacted modifier’s functionality. The UI will include a post and one comment for simplicity.


First, we need to create a struct for the comment’s data. You will probably need to add a variable for the profile picture of every comment. For the tutorial, we are only storing the username and its comment.

Create a view with a horizontal stack inside it and add two concatenated Text() views. Make sure the texts have leading alignment and the width of the screen by using .infinity. …

Build a trendy, minimalist music player

Neuromorphic designs on music player
Neuromorphic designs on music player
Neuromorphic designs. Photo by the author.

Neuromorphic designs consist of UI components extruding from the background. The UI elements are shapes made with the same material and color as the background.

In the article above, Michal Malewicz explains how to achieve this minimalist look. You need to use shadows in both negative and positive values. The background and UI elements should have the same hue. You should pick a color that doesn’t cover the light and dark shadows for this design to work.

Neuromorphic Design in SwiftUI

To your project’s assets folder, add three new color sets by clicking the + sign. …

Use DocumentGroup and FileDocument to create a text document-based app

Text document-based app
Text document-based app
Photo by the author.


Create a struct of type FileDocument. You will get an error message asking you to add the protocol’s stubs. Click “Fix” to add the required data. As you can see below, the protocol allows us to read and write documents through its read initializer and write function. You will also have the readableContentTypes static variable that will help us determine and limit the types of files we want to allow in the app.

What we want to do next is assign our readableContentTypes to UTType.plainText and create a new string variable to hold the user’s text input. …

Two sum, palindromes, the container with the most water, and the longest common prefix.

Image for post
Image for post
Photo by Andrew Neel on Unsplash

Yes, many tech companies will have technical questions that don’t require you to add labels and text fields to an interface. If you want to work for big companies then expect your technical interview question to challenge your knowledge of algorithms.

There are some websites that provide coding interview practices such as hackerRank and geeksforgeeks. All of the technical interview questions you will find below are from LeetCode since I used to practice coding on it.

Two Sum

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice. …

Use the Path and Shape modifiers to draw a heartbeat shape and animate it

Animated heartbeat shape
Animated heartbeat shape
Animated heartbeat shape with SwiftUI. Photo by the author.

Animated Heartbeat (1)

Every app has messaging now. Here’s how you can quickly build messaging into your app

Chat app
Chat app
Chat app made with SwiftUI. Photo by the author.

Chat Model

Let’s start by creating an enum for the bubble positions. Bubbles can be on the right or left side of the screen:

Now, we can create our model that stores our messages, bubbles’ positions, and the user input text. For this tutorial, we are going to store the last chat bubble’s position in a variable so we can alternate between the left and right bubble positions:

Chat Bubble

We need to create a chat bubble by utilizing ViewBuilder. Inside our body variable, we can create a bubble shape. …

VoiceFilter-Lite demo release.

Image for post
Image for post
Photo by Daniel Romero on Unsplash

Voice assistive technologies allow users to employ voice commands to communicate with their devices. Ensuring responsiveness to a particular user relies on precise speech recognition.


The input to such systems can consist of overlapping speech in many real-world use cases, which presents challenges to many speech recognition algorithms. Speech recognition involves addressing constraints such as model size, CPU, and memory limitations, as well as considerations of battery use and minimization of latency.


In VoiceFilter-Lite, google provides an upgrade to VoiceFilter that can dramatically improve speech recognition by using the recorded voice of a selected speaker in overlapping speech. …

Scale and animate photos from a photo grid

Animated previews of images
Animated previews of images
Preview images in SwiftUI. Animation by the author.

Simple Image Grid

We are going to use a 2D array to create the grid. Inside a VStack, add a ForEach loop that takes the 2D array. For each array of images inside our 2D array, add a second loop (from 0 to less than 3). Check if the index is not out of range, then add the Image view. When the index is out of range, add an empty Rectangle(). If you don’t want to use a Rectangle(), then you can use leading alignment and re-center the grid.

To the Image view, add the aspectRatio() modifier and set its content mode to fill. Use the resizable modifier to be able to change the image’s frame, then add the frame modifier to adjust the size of the images. …

SwiftUI lists with customized side buttons

GIF of custom list in SwiftUI
GIF of custom list in SwiftUI
Custom list in SwiftUI (GIF by the author)

In this tutorial, we are going to create a custom list with two action buttons that will appear when you swipe a row to the left. We are going to start with one side button. It will be a delete button. Then we can add a second button to show how to add more buttons to the row.

Start a new iOS 14 project, then follow along.

Constants and Variables

Create a new struct of type View and declare the following variables:

  • Text: Stores our row’s content.
  • index: The row’s index. Used to delete/hide a row.
  • width: The width of all the side buttons. Used to know how much to swipe to the left. …



Application developer & tech lover. Visit my website:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store