Utilizing SwiftUI and WidgetKit to Make Your App Content material Indispensable


By utilizing a mix of SwiftUI and WidgetKit, you possibly can enhance the visibility of your app’s content material and improve the consumer expertise by inserting a number of “widgets” on the consumer’s iOS House display, macOS Notification Heart, and/or iOS Immediately View.

Widgets ought to show your app’s most related content material, permitting customers to get vital data with a look. When a consumer faucets/clicks a widget, they go straight to your app and will land on a web page that offers them extra particulars about what they simply glanced at. Check out your iPhone’s Immediately View proper now. There are widgets for climate, battery energy, maps, inventory exchanges — with many extra out there. For instance, you may get an almost-instant learn on the present atmospheric circumstances by glancing at one in every of a number of out there climate widgets. This time of 12 months, earlier than I go away the home, I look on the climate widget to find out if I would like a coat and hat earlier than going exterior. If I wish to get the forecast for later within the day, I simply faucet on that climate widget to open the respective climate app.

Since widgets show content material with SwiftUI views, they’re typically straightforward to create and transportable throughout Apple’s gadgets, like iPhones and Macs. Every of your apps can present a number of widgets, a number of cases of the identical or completely different widgets, and three completely different sizes of the identical widgets.

Let’s discuss at an instance of design issues for constructing a widget, from my pattern mission. You need to click on that hyperlink and obtain my mission to comply with together with this text. I used Xcode 13.1 to put in writing this pattern app and iOS 15.0 on the Simulator and on an iPhone 12 to check.

My “Occasions” app has a widget that exhibits the vital occasions that happen throughout a workday together with the occasions at which they happen. Take a look at the next two pictures. The primary highlights my widget displaying the occasions of the day in quick movement, as a result of we wouldn’t wish to wait to look at the widget over a 15-hour interval. The widget merely exhibits the nearest-occurring occasion and its time; data that may be seen at a look. The second picture exhibits what occurs once you faucet on the widget: the app opens displaying all of the occasions of the day together with the one which was being proven within the widget on the time of the faucet. Do not forget that this app is a proof of idea highlighting WidgetKit and SwiftUI, and isn’t fully-functional.

It needs to be obvious to you by now that, due to a widget’s restricted quantity of house, it ought to solely show data that customers see as most dear in your app. Don’t litter issues up. Design for simplicity, ease of use, and class.

As a result of widgets are transportable between iOS and macOS, are fairly small, and will convey concise, glanceable data, SwiftUI is the right instrument to make use of for constructing their consumer interfaces. Certainly, WidgetKit requires that you just use SwiftUI views to design and render widgets’ content material.

A phrase about my pattern app

The pattern app that we’ll stroll by means of on this article could be very easy and never totally useful on goal. I would like you to get a fundamental understanding of SwiftUI and WidgetKit with out getting slowed down in a bunch of implementation particulars about how a each day to-do checklist app could be written. My app implements simply sufficient of a to-do checklist to introduce you to SwiftUI and WidgetKit; the remainder is a facade.

So, if totally useful, my app would enable a consumer to outline 5 to six important life occasions in a day, assign occasions to these occasions, and, at any time, look on the widget to see the closest approaching occasion, primarily based on some kind of timing algorithm. If the app was accomplished, tapping on the widget would take a consumer to a element display for the closest occasion the place one may, say, make some notes, set a reminder or alarm, add contacts, add instructions, then return to the primary abstract display displaying an inventory of all of the day’s occasions and occasions, and edit one other occasion. Since my app continues to be a prototype, when the consumer faucets on the widget (or opens the app itself), she or he is distributed on to a display to see a read-only checklist of occasions and occasions.

Creating the bottom app

Let’s stroll by means of the steps I went by means of to develop my pattern “Occasions” app. I made it a SwiftUI-based app. Open Xcode 13.x and go to:

  • New > Mission…
  • On the Select a template to your new mission: display, choose iOS and App, then click on Subsequent.
  • On the Select choices to your new mission: display, fill in Product Title: with “Occasions,” choose your individual Workforce:, set your individual Group Identifier:, set the Interface: to “SwiftUI,” set the “Language:” to “Swift,” then click on Subsequent.
  • Choose the brand new mission location and click on Create.

The brand new app could have two code recordsdata, “EventsApp.swift” and “ContentView.swift.” We’ll go away “EventsApp.swift” alone. It’s customized App protocol conformer, EventsApp, gives the entry level into the app and can render the easy consumer interface outlined in “ContentView.swift.”

Check out “ContentView.swift.” I wrote a easy declarative SwiftUI consumer interface (UI) utilizing the struct named ContentView. The app’s whole UI is within the physique member of the ContentView:

First, I used a Textual content view to provide my checklist of occasions a title, utilizing some view modifiers to focus on that title (.daring().italic().padding()). Then I used a Type view as the primary container for the app’s checklist of occasions as a result of, in actual life, I’d enable modifying of my occasions right here. Proper now, the app solely shows the occasions and their occasions read-only, however all the time assume forward. The ForEach writes out the occasions and their respective occasions as Textual content views, one per line, for all to-do checklist gadgets that I’ve saved in arrays. The Type has a coloured border and a few padding round it. There’s a cause I used 2 arrays and it has to do with widgets auto-updating, however that’s past the scope of this text.

Working the “Occasions” app now exhibits this display:

For these of you following alongside, take a look at your “Occasions” app and ensure it seems just like the earlier image.

Including the WidgetKit extension

Widget performance may be added to the SwiftUI “Occasions” app I began up above. All’s I’ve to do is so as to add a brand new goal — a WidgetKit extension — to my present app. Head again to Xcode 13 and go to:

  • File > New > Goal…
  • On the Select a template to your new goal: display, choose iOS and Widget Extension, then click on Subsequent.
Add widget extension
  • On the Select choices to your new goal: display, fill in Product Title: with “EventTimes,” choose your individual Workforce:, set your individual Group Identifier: (similar as “Occasions” app), don’t set the Embody Configuration Intent, guarantee that “Mission:” and “Embed in Utility:” are each set to “Occasions,” after which click on End.
  • You’ll be prompted to activate your new “EventTimesExtension” scheme; ensure you press the “Activate” button now.

Just a few gadgets have been added to your “Occasions” app mission, most notably, the “EventTimes.swift” WidgetKit code and the WidgetKit.framework. We’ll spend a lot of the remainder of the article discussing “EventTimes.swift.”

Knowledge sharing between the app and widget?

Discover that I’ve outlined the identical knowledge mannequin (2 arrays) on the prime of the extension’s “EventTimes.swift” that I already outlined within the containing app’s “ContentView.swift”:

Do not forget that “Though an app extension bundle is nested inside its containing app’s bundle, the working app extension and containing app don’t have any direct entry to one another’s containers.” In different phrases, the two arrays outlined in simply the containing app usually are not accessible to the extension and vice versa. One resolution could be to outline an app group to which each the “Occasions” app and “EventTimesExtension” extension belong. They may then share the identical knowledge mannequin. However that’s manner past the scope of this text — and I already wrote a tutorial on app teams for AppCoda which I urge you to learn: “Utilizing App Teams for communication between macOS/iOS apps from the Similar Vendor”.

How WidgetKit works

Widgets are pushed by, like many different features of our actuality, time. With my “Occasions” app and widget, we have now a comparatively mounted checklist of occasions that happen all through the day. What drives the updating of the widget to indicate the subsequent nearest coming-up occasion is that occasion’s time. Consider the iPhone climate widget. It is also pushed by time, in all probability polling a server each 30 seconds so it might probably replace the present circumstances, the present temperature, and the day’s present excessive and low.

Let’s undergo the code within the WidgetKit extension’s “EventTimes.swift” file from prime to backside, regardless that which may not would be the most obvious order. But when I bounce round, you’re more likely to get confused — plus I urge you to match my model of the file to the template model as first generated once you created the WidgetKit extension.

Let’s begin on the prime of the file:

From the primary struct we encounter, of kind TimelineProvider, you possibly can see why I stated that widgets are pushed by time. The placeholder operate “shows a generic illustration of your widget, giving the consumer a basic thought of what the widget exhibits”. It’s referred to as in case your widget is displayed however no actual knowledge is able to be displayed, maybe as a result of the containing app hasn’t been configured or established community connections but. SimpleEntry is the struct that holds cases of knowledge which can be proven one after the other in your widget. To be particular, this SimpleEntry reference is the struct constructor that returns an occasion.

The getSnapshot operate gives an app timeline entry for the present time (and maybe state) of the widget. For my “Occasions” app, this may be the closest occasion in time in your each day schedule about to happen.

For a static prototype like my pattern “Occasions” app, the getTimeline operate can construct the complete timeline to be displayed in my widget. Due to the coverage: .atEnd, the timeline is created time and again. I already defined why a actual model of my “Occasions” app would want a extra subtle algorithm to calculate a timeline of the “subsequent, nearest” occasion relative to the present cut-off date. For a climate app, some kind of polling algorithm might be used to make community requests to get the present circumstances for the present occasions all through the day.

As I discussed above, the SimpleEntry is the struct that holds cases of knowledge which can be proven one after the other in your widget. Be aware that the date is crucial to a timeline.

That is the SwiftUI I used to show the widget. Do I even want to clarify what I’m drawing right here? Simply take a look at my widget. It simply amazes me how I can write such quick, easy, and stylish code to get a UI. The declarative UI is right here!

The @most important attribute specifies the only entry level to my Widget extension. My widget is given a string tag for system identification functions. I’m specifying the SwiftUI that my widget makes use of and I present template textual content that individuals will see once they lookup my widget to allow them to add it to my iPhone House or Immediately View screens, as described within the subsequent part.

Including widgets after the app is put in

As soon as you put in my pattern app on an iPhone, you wish to set up a number of cases of its widget in a number of of the three out there sizes. This ani-GIF exhibits you the way to set up a widget on the House display:

Be aware that I began the method by long-pressing on empty House display house. You may comply with the identical course of on the Immediately View or, as a substitute of beginning by long-pressing, you possibly can scroll right down to the underside of the web page and faucet the “Edit” button.

Static versus user-configurable widgets

Primarily as a result of my “Occasions” app and widget are proofs of idea, they’re static. Whereas I’ve talked about prospects for modifying the occasions and occasions, these values are presently mounted. However you can also make your widget user-configurable. When the great people who had been writing the iPhone climate app added their widget extension, they ticked the Embody Configuration Intent checkbox — that’s the checkbox we didn’t tick.

To make a protracted story quick, you possibly can configure the climate widget by long-tapping it till the context menu seems and choosing the “Edit Widget” merchandise. The widget “flips over” to current an interface that enables you choose from an inventory of nationwide areas that the widget will then present climate snapshots for.


Including a widget to your app can add an entire lot of worth to your app. You can also make it a lot extra helpful by permitting one look to provide customers the gist of the primary goal of your app. Consider methods to make your apps indispensable to customers — an important a part of their lives. Widgets are top-of-the-line methods I’ve seen lately to perform this lofty purpose.