iOS Lock Screen Widgets

On iOS, Lock Screen Widgets are a great way to show information to your users without them having to unlock their device.

Supported Families

Technically, this works by adding another family to your widget's configuration.

var body: some WidgetConfiguration {
  ...
  .description("Lock Screen Widgets")
  .supportedFamilies([
      .systemSmall,
      .systemMedium,
      // Accessory Widgets are available on the Lock Screen only
      .accessoryCircular
  ])

Adjust Layout

To adjust the layout of the widget, you can check which family/size is currently requested in the widget's layout code.

struct LockScreenWidgetView: View {
  var entry: Provider.Entry

  // Detect the current Family
  @Environment(\.widgetFamily) var family

  var body: some View {
    if family == .accessoryCircular {
      // Return Widget for Circular Lock Screen Widget
    } else {
     // Build Widget for other families
    }
  }
}

For more information on accessory widgets, check out the official Apple Documentation.

To make your widget clickable and detect clicks in your Flutter app, see the Detect Clicks documentation. The most important part is adding the homeWidget query parameter to your widget URL.

A full guide on how to add a Lock Screen Widget using home_widget can also be found in this article.