Locket-Style Photo Widget in SwiftUI (Learn the Pattern)

Want a Home Screen widget that shows a friend’s latest photo, like Locket, in SwiftUI? The short answer: build a WidgetKit widget that displays the most recent shared image, share that image to the widget through an App Group, and refresh it with a push when a new photo arrives. The two genuinely tricky parts are not the layout, they are widget refresh and photo privacy. Build the UI from a free VP0 design, the free iOS design library for AI builders, and learn the pattern rather than copying the brand.

Who this is for

This is for builders making a photo-sharing, couples, or close-friends app that lives on the Home Screen, and who want to handle WidgetKit refresh and the privacy of shared photos correctly.

How a photo widget works

The magic is that the widget updates without anyone opening the app. The flow: the main app captures or receives a new photo, writes it to a shared App Group container that both the app and the widget can read, and then a push notification tells the system to reload the widget’s timeline. The WidgetKit widget itself is simple: it reads the latest image from the shared container and displays it. The subtlety is the refresh budget, the system limits how often widgets reload on their own, so you drive updates with push rather than hoping for frequent automatic refreshes. Apple’s widget guidelines cover sizes and legibility.

Piece	Tool	Get it right
Widget	WidgetKit	Reads latest shared image
Shared storage	App Group container	App and widget both access
Refresh	Push reloads timeline	Beats the refresh budget
In-app flow	Capture and send	The main app’s job
Privacy	Consent between friends	Photos are personal

Build it free with a VP0 design

Pick a widget or photo design from VP0, copy its link, and prompt your AI builder:

Rebuild this VP0 photo-widget design in SwiftUI: [paste VP0 link]. Build a WidgetKit widget that shows the latest shared photo from an App Group container, and an in-app flow to capture and send a photo to a friend. Refresh the widget with a push notification when a new photo arrives. Use my own brand, not any real app’s name or assets, and treat shared photos as private.

Home Screen widgets, introduced in iOS 14 and expanded since, turned the widget into a first-class surface, and apps like this rode that to the top of the charts at $0 to start from a free design. For neighboring native patterns, see a Notion-style UI kit for iPad in SwiftUI, a podcast player UI in SwiftUI, an iOS Lock Screen widget UI template, and a habit tracker source code. For a social game to pair with it, see a Connections-style grouping game UI in React Native.

Privacy and originality

Two non-negotiables. Privacy: a photo widget shares personal images between specific people, so build it on explicit friend connections and consent, never broadcast, and handle removal and blocking. Originality: the latest-photo-on-your-Home-Screen idea is a pattern you can build, but Locket’s name, logo, and identity are not yours to take, so use your own brand. Handle photos respectfully and ship something recognizably good without copying.

Common mistakes

The first mistake is copying Locket’s name or assets instead of learning the pattern. The second is relying on automatic widget refresh and exceeding the budget, so it goes stale. The third is not using an App Group, so the widget cannot read the image. The fourth is sharing photos without consent or a block path. The fifth is paying for a widget kit when a free VP0 design plus WidgetKit does it.

A complementary source: the Nielsen Norman Group finds an interface feels instant only when it responds within about 100 milliseconds.

Key takeaways

• A photo widget displays the latest shared image via WidgetKit.
• Share the image through an App Group both the app and widget read.
• Refresh with push to beat the widget refresh budget.
• Treat shared photos as private, with consent and a block path.
• Learn the pattern, use your own brand, and build it free from a VP0 design.

Frequently asked questions

How do I build a Locket-style photo widget in SwiftUI? Build a WidgetKit widget that shows the latest photo from an App Group container, with an in-app capture-and-send flow, and refresh the widget via push when a new photo arrives.

What is the safest way to build a photo-widget app with Claude Code or Cursor? Learn the pattern from a free VP0 design with your own brand, use WidgetKit and an App Group, refresh via push, and treat shared photos as private between consenting friends.

Can VP0 provide a free SwiftUI or React Native template for a widget app? Yes. VP0 is a free iOS design library; pick a widget design and your AI tool rebuilds the widget layout and the in-app capture and send flow at no cost.

How does a widget update with a new photo? The app writes the image to a shared App Group container and sends a push that tells WidgetKit to reload, so the widget shows the latest photo without the app being open, working within the refresh budget.