- Explore how to use Apple’s WidgetKit to create your own widgets
- Understand the basics of widget bundles and how to use them
- Learn how to use the WidgetKit Simulator to peek inside apps
- Discover how to write your own widgets in Xcode and SwiftUI
Widgets have been around on macOS and iOS for years. Apple introduced Widgets years ago first in macOS Tiger and later in iOS 14 in 2020. Simply put, Widgets are small applets that display info to users temporarily without having to launch a full-blown app. In macOS, originally you dragged Widgets onto the desktop, where they floated. Later Apple moved them all to the macOS sidebar where you access them by clicking on the clock in the upper-right corner of the macOS menubar. In macOS Sonoma, Apple is once again allowing you to display widgets on the desktop.
Originally, Wigets were bundles written in HTML, CSS, and JavaScript and which used the WebKit framework. At WWDC 2020, Apple introduced a brand new framework for developing Widgets called WidgetKit. WidgetKit is written using SwiftUI, which is a language used to program apps in Xcode. To write a Widget you’ll need to know the Swift language, SwiftUI, and Xcode.
Creating a widget requires creating a macOS app first using Xcode, building it, then building your Widget and installing it inside your app’s Contents/Plugins folder. Hiding away on your Mac’s hard drive in System/Library/Core Services is an Apple app called WidgetKit Simulator. This app allows you to peek inside apps and see all the Widgets they contain, then open them in the simulator to see what they will look like when they run.
To design and build a Widget, you can keep it extremely simple, or make it more complex which utilizes multiple sizes, and load data from the network. You can also choose to build a Widget that runs on an iOS lock screen, or just on the iOS home screen or macOS desktop. In Xcode, you will need an existing iOS or macOS app project in order to create a Widget.
Creating a Widget Extension Target in Xcode is easier than ever. With just a few clicks you can add a Widget Extension Target to your Mac app and get started customizing it. Everything you need, including a .plist file, .entitlements file, Assets.xcassets bundle, .intentdefinition file, and Swift file with an extension of .swift, is created for you and added to the Xcode project. You can then edit Schemes at any time, and adjust the Widget’s settings to display whatever data you want. Once everything is configured, you can build your macOS app and its Widget Extension, and distribute it to your users. Get started now with Xcode’s Widget Extension Target!
With the new WidgetKit framework from Apple, users can create unique app experiences that are tailored to their individual needs. In this tutorial, we walk through how to create a Widget in Xcode and view it in WidgetKit Simulator. We open the folder, control-click the app in the Finder, and then show the package contents. From there, we navigate to the /Contents/Plugins folder and view the widget. We then open WidgetKit Simulator and click the widget on the right side and click open. We then click on the timeline row and view the widget UI over a five-hour timeline. This is just a simple example, and Apple has resources available to learn how to create even more complex widgets. Be sure to check out the three-part WWDC video series “Widgets Code-along” from 2020, as well as “Design Great Widgets” and the “Meet WidgetKit” video from WWDC 2018. Learn how to create amazing widgets with this helpful tutorial from Apple industry veteran, Chip Loder!
