Widget in iOS

7 min readJan 14, 2023

Widgets display relevant, glanceable information and allow users to quickly access an app for more details. They have been present in other operating systems for a long time, but with the introduction of the WidgetKit framework during WWDC 2020, Apple announced the availability of widgets for iOS, iPadOS, and macOS. The WidgetKit framework allows developers to build and add widgets to the home screen, providing users with easy access to important information at a glance.

Widgets can be placed on the iOS home screen, Today view, or macOS Notification Center, and they can also be presented on the lock screen of iPhones and as complications on watchOS. With the release of iOS 14, widgets can be presented in multiple sizes.

Note: SwiftUI is required when designing a widget, although widget extensions can be added to apps built with UIKit.

It’s important to understand the basics of widgets before implementing them in your app.

Configuration

Static Configuration

Static configuration widgets don’t allow users to configure variables to change the content of the widget, for example, the fitness widget which is only there to show your activities.

Intent Configuration

Intent configuration widgets allow the user to configure certain variables to further enhance the content by giving users a certain power to show the glanceable information that they need.

For example, the To Do app lets the users personalize the widget itself.

Image of Widget with Intent Configuration

Widget Family

Widgets can support one or more sizes, giving users the flexibility to configure their widgets however they like. Each widget size provides a different amount of space for detail, so consider which sizes work best for the type of information the widget displays. A particular kind can also enable one or many supported families. There are 3 main families in iOS and one more in iPadOS.

System Small
System Medium
System Large
Extra Large (only in iPadOS)

Image of supported families of weather widgets

Placeholder UI

Placeholder UI is the default content that represents the kind of widget, but it should not contain any user data. It is meant to give the user a general idea of what the widget will display, such as

When actual data is loading in the background
When the Data Protection capability is enabled for the widget extension to hide sensitive information
When the user chooses to display the placeholder in specific contexts such as on the Lock Screen.

WidgetKit uses this placeholder UI to render the widget’s content when necessary.

Planning to implement widgets into your app? Before starting the implementation of a widget in the app, let’s know something more about widgets.

Let’s start with the guidelines provided by Apple in Human Interface Guidelines related to widgets. I have only pointed out some important points mentioned by apple but you can always read the full documentation provided by apple which is linked above for your convenience.

Things to consider while designing and implementing widgets

Best Practices

A simple idea that reflects the functionality of your main app.
Don’t make a widget just to make a shortcut to your app.
Create a size that fits your designs the best.
Don’t enlarge a small design for the sake of making a large widget. Instead, try adding multiple sizes that add values.
Although widgets’ content doesn’t change every minute it is preferred to put content that changes periodically to make it more dynamic and useful to the users.

Updating Widgets

Keep your widget up to date with the latest data useful to the users.
Let the system update date and time in your widget if your widget needs to show the date & time to save the limited widget update frequency.
Show content quickly.

Interactivity

Widgets should be made editable and easy for users to customize.
Ensure that a widget interaction opens your app at the right location or page within the app.
Avoid defining too many interaction targets.

Interface design

Design elements linked to your brand’s identity can help users easily recognize your widget.

Note: When creating your widget, keep in mind that the app name will not appear below it in certain contexts such as Notification Center on macOS or the Home Screen on iOS.

To make your widget stand out, use color effectively without overwhelming the content.
Make sure to support Dark Mode and consider using the system font and SF Symbols.
Avoid using very small font sizes
Design placeholder content that helps users understand what your widget does.
Provide an easily understandable description of your widget for display in the widget gallery.

Implementing Widget

Widget views are designed using SwiftUI. You can always implement a widget in the UIKit project. SwiftUI is only required to design the views which you need to show in widgets.

For this blog, we will be creating a simple stock widget that shows the market index. We will be using simple design and static content to design the widget.

Let’s dive in and see how we can use the WidgetKit framework to add widgets for an iOS application.

Adding a widget extension

A starting point for creating a widget is the Widget Extension template.

Select File > New > Target in Xcode’s menu.

2. Search for and select Widget Extension.

3. Enter the name of the extension.

Note: Name it and make sure Include Configuration Intent is not checked.

Click Finish and agree to the activate-scheme dialog:

Running the widget

The widget template provides a lot of boilerplate code you just have to customize. It works right out of the box, so you can set up everything now to make sure everything runs smoothly when you’re ready to test your code.

I didn’t run the code at first so, I am guessing it will be providing you widgets that show you the time. Please comment if I am wrong. You can add your very 1st widget by now. Hurray!

Now we will be moving forwards toward designing our very own widget view using SwiftUI now. Let’s start by creating a new SwiftUI View and don’t forget to add the newly created widget extension as its target as shown in the image below.

Let’s add our UI code for the widget below

//
//  NepseWidgetView.swift
//  NepseWidgetExtension
//
//  Created by Mukesh Shakya on 03/01/2023.
//

import SwiftUI

struct NepseWidgetView: View {
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("NEPSE Index")
                .font(.system(size: 14))
                .foregroundColor(.gray)
            VStack(alignment: .leading, spacing: 2) {
                Text("2064.09")
                    .font(.system(size: 16))
                    .foregroundColor(.white)
                Text("17.83 (0.87%)")
                    .font(.system(size: 12))
                    .foregroundColor(.green)
            }
            Text("As of Jan 02, 2023")
                .font(.system(size: 12))
                .foregroundColor(.gray)
        }
        .padding()
        .frame(minWidth: .zero, maxWidth: .infinity, minHeight: .zero, maxHeight: .infinity, alignment: .topLeading)
        .background(Color.black)
    }
    
}

struct NepseWidgetView_Previews: PreviewProvider {
    
    static var previews: some View {
        NepseWidgetView()
    }
    
}

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

@main
struct NepseWidget: Widget {
    
    let kind: String = "NepseWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            NepseWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Nepse Widget")
        .description("Market index showing widget of nepse.")
        .supportedFamilies([.systemSmall])
    }
    
}

Finally, let us update our widget’s name and description. This is shown while adding widgets from the widget gallery. We can do this by updating the StaticConfiguration. We will only support a small widget for now from the supported families cases, so let’s update our configuration to reflect this by adding the supported families modifier as well.

Note: If we have to test the widget only we can directly do it by selecting the widget target and running it. It will build and run faster since only the widget target is running.

Now it’s time for testing your widget along with the full app. Run the main project on a device or simulator. Press and hold on the home screen of the device or simulator, on the top left add icon will be shown for adding widgets. Search for your app widget with your app name and click on add widget button.