Getting started with ‘Widget Extension’

Photo by Omid Armin on Unsplash

Do you want to know about Widget?

iOS 14 introduced Widget Extension: widget’s main purpose is to display a small amount of timely, personally relevant information that people can view without opening your app.

There are several new features, but perhaps the most significant change is the new Widgets system. We’ve had Widgets on the Today View (the screen to the left of your first Home screen) for years, but not a lot of people use that screen.

With iOS 14, Apple is replacing the old widgets with all new ones that are more dynamic, can pull in more information. You can create widgets in small, medium, or large sizes and can put widgets anywhere on a home screen.

Widgets supported families respectively: systemSmall, systemMedium, systemLarge.

Minimum Requirements

macOS Catalina 10.15.5 or later, Xcode 12 or later

Let's Play With Widgets

Start by adding a widget extension with File ▸ New ▸ Target…

Create a new target

Search for “Widget”, select Widget Extension, and click Next

Search for “widget”

Name it GreetingWidget and you can see the Include Configuration Intent option. In this tutorial, we are going to cover Static Configuration, since we don’t want to give an option for users to edit something in the widget. uncheck that checkbox.

Uncheck Include Configuration Intent

There are two widget configurations: Static and Intent. A widget with Intent Configuration uses Siri intents to let the user customize widget parameters.

Click Finish and agree to the activate-scheme dialog:

Activate scheme for new widget extension

You can see in the Project navigator Greeting folder created and there is Greeting.swift file that having a widget default structure.

As you can see there have different structs to manage a widget.

Ready for code now…

We have set up the folder structure to manage code more clear and better understanding.

Folder structure

Create a swift file for mode named GreetingEntryModel which provide as TimelineEntry.

Make sure when you create a new file for the widget, Target should be selected GreetingExtension, and click Create.

Select Target GreetingExtension

Here we have setup GreetingEntryModel with a date property.

Next, create a view to display the time and greeting. Create a new SwiftUI View file and name it GreetingEntryView.swift. Make sure its target is only GreetingExtension, and it should also be in the Widget group:

Here, we have implemented a view to show background image with current time and name with a greeting.

greeting() function provides us system name with greet as per current time.

For the background image, we have added an image in Assets.xcassets.

As you can see there is PreviewProvider which gives a preview.

Now, we are going to implement the required methods for the widget. Create file GreetingTimeline.

Placeholder: It provides default content when there is no data to show or the widget installing and not completely loaded with updated data.

Snapshot: One of the provider’s methods provides a snapshot entry to display in the widget gallery.

Timeline: This method provides as data and updates widget as per given refresh time.

The system wakes up the extension and asks for a timeline for each widget placed on the device. ReloadPolicy can be defined by your app so that system knows when to ask for the next timeline. Configuration options include atEnd of the existing timeline, after(date: Date), and never.

Now, we will set up the main part of the widget. Replace the below code with Greeting.swift file.

1. Kind is a string that identifies the type of widget. Your app might have multiple widgets. In this case, a kind identifier allows you to update widgets of a particular kind.
2. The provider is a type conforming to Provider protocol and used by the system to fetch widget data.
3. View builder closure that describes the SwiftUI view for displaying widget data.
4. We have used all three support families: systemSmall, systemMedium, systemLarge.
5. .configurationDisplayName used to show the title of the widget in the widget gallery.
6. .description used to provide widget description.

So far, So good…!! We have done with the setup. Now it's time to run code.

Let's ride of Widget

Select Greeting Extention scheme

After selecting the Greeting Extention scheme click Run. It will directly run your extension and the widget will appear on the home screen.

We can see our Greeting widget in the widget gallery with three support families and can add a widget to set on the home screen.

The Greeting widget we can select and set on the home screen from the widget gallery which has three support families.

Greeting Widget

And that’s it! That’s how you create a Widget.

Note: WidgetKit may not update the widget’s view exactly at a timeline entry’s date. The update occur on basis of prority task.

Let me know your thoughts in the comments below!

Happy Coding…!!

You can download the full source code from the following GitHub Project.

Mindinventory/MIWidget

References:

• https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets
• https://www.raywenderlich.com/11303363-getting-started-with-widgets

Source GIPHY