Discover WidgetKit
About Widgets and how Widgetkit works
Let’s begin with what is Widget?
A widget is an element of a graphical user interface that shows information or provides a specific way for the user to interact with OS or applications. The widget gives a quick action to information that’s important right now.
Widgets are not new to iOS, these are available in iOS, macOS, and iPad from inception in the Notification Center. The app extension in Today views is called Widget.
Now Apple re-discovering the roots, they thought it would be great if we give an option to have a widget on Homescreen. So users can personalize their Home screen in a unique way. And that comes as WidgetKit, to have a widget on both the Home screen and Today View. It has come with Xcode 12 and iOS 14. So Apples want to deprecate the Today extension in favors of Widgets.
Why do we need Widgets?
- To display the often-used functionality that user can trigger/ read right away from the home screen without having to open the app.
- It is also simple to use when we elevate the key contents from the app. Finally, I don’t have to do many clicks.
- WidgetKit supports multiple interactions to open the respective screens in the app.
- We can also get real-time updates instantly.
Widgets are not mini apps.
A great widget;
> Shows the right amount of content.(Glanceable)
> Displays relevant content to the user based on time and importance.(Relevant)
> Supports as many sizes as possible with different configuration.(Personalized)
How WidgetKit works?
Before we build a WidgetKit, let’s deep dive a little bit into how WidgetKit works! Widgetkit works through a timeline system. WidgetKit extension plays a key role in implementing the Widgets, its a background extension that returns a series of view hierarchies in a timeline. Where the data can be refreshed either from the main application or through the extension scheduler. This way there is no app launch or load, the widgets are quickly glanceable.
You can add the widgets to UIKit or SwiftUI projects, but Widgets can be coded only with SwiftUI. Following are the main concept of Widgets,
Kind: Every widget has a unique name to identify (string), for example, we can have detail widget with one object and a list widget with multiple objects.
Configuration: Widgetkit supports two types of configuration, StaticConfiguration(no user configuration) and IntentConfiguration (allows user customisation).
Widget Families: Sizes or templates of the Widget (Small, Medium, Large). The size of small takes 2 X 2, medium 4 X 2, and large 4 X 4 of the app logo size. The small is to have the most useful content of your app, it supports only a single tap. Whereas medium and large supports multiple tap targets and make use of deep-link URL to open the respective screen in the app.
Placeholder: The temporary view uses to render the widget for the first time or till the data gets load. There will not be any user data on this view.
Follow few guidelines before creating the widgets,
1. Use the brand color for Widget views.
2. A widget should look great in both the light and dark appearances.
3. To ensure the content looks good within the widget use ContainerRelativeShape instead of corner radius.
4. Use standard margins to avoid crowding the edges and cluttered appearances.
5. No Scrolling, videos or animated images, better to avoid heavy operations.
6. Considering memory management, the memory limit for widgets is 30MB, so dont use too much of static images/ animations with higher resolution.
Next, I’m going to focus on how to build the WidgetKit on different configurations and make your application more interesting. Let’s start Creating WidgetKit!!!
