Getting started with iOS Widgets — Part I

Note: This is the first part of a 2-part tutorial

Apple announced the introduction of app widgets for iOS (as well as iPadOS and MacOS). With the new WidgetKit framework, you can build widgets that can be added to your home screen to let you see important information at a glance.

So let’s go ahead and build a new widget for our Migraine Buddy App. We will create a widget that you can add to your home screen to display the current status of your Migraine, which will be updated randomly every hour or so.

Widget

To get started, we first need to add a Widget Extension target to our app. To do this open the File menu, select New and then select Target.

Name your widget, and make sure the Include Configuration Intent option is not selected. Press Finish and activate the widget extension scheme when prompted.

On the Project Navigator you can now see that Xcode created the Widget folder with the name that you have given. Go ahead and open the.swift file. This file includes the boilerplate code required to build a widget.

Understanding the boilerplate

Let’s look at the skeleton file step-by-step created by Xcode

The first thing you should see in ".swift" is a TimelineProvider. The snapshot method is used to quickly provide a TimelineEntry to present a widget view that is used in transient situations, for example, in the widget gallery.

One important thing to know is that the data of your widget will be provided through a TimelineEntry, which can be updated based on your app’s use case. For example, a stock market widget that displays stock prices will probably update very frequently throughout the day.

Then you should see the timeline method. Through this method, you can provide an array of timeline entries, one for the present time, and others for future times based on your widget’s update interval. 

Then we have a PlaceholderView struct used by iOS to display our widget on the lock screen and before rendering the widget’s content.
(We will NOT be using this for now)

Next is the WidgetEntryView defining the visual interface of our widget. Finally we see the Widget struct marked with the @main annotation, this means that this is where the entry point of our widget is. Here we provide a WidgetConfiguration, basically everything the operating system needs to know to display our widget: what the timeline is, how the placeholder view should look, how the actual widget should look, and our widget’s name and description.

Widget UI using SwiftUI

Let’s start by created a new SwiftUI View and don’t forget to add the newly created widget extension as it’s target as shown in the image below

Let’s add our UI for the widget like below

We can now go back to our Skeleton “.swift” and add this view to define our UI. In WidgetEntryView we will replace the default text with the class SwiftUIView like below

Finally, let’s update our widget’s name and description. We can do this by updating the StaticConfiguration under MigraineBuddyWidget. We will only support medium widget for now, so let’s update our configuration to reflect this by adding the supportedFamilies modifier as well.

Now run your app, you should be able to see the widget in the simulator, and pressing it will open the MigraineBuddy app.

Next up: In next parts we will be looking at opening a specific view when clicking the button on the widget. And we will be exploring the integration of APIs to support different states of the widget which will be updated depending on the user’s Migraine Status

Thanks for reading! Happy coding :)