{"id":5659,"date":"2025-07-29T14:10:10","date_gmt":"2025-07-29T18:10:10","guid":{"rendered":"https:\/\/stepinto.vision\/?p=5659"},"modified":"2025-08-12T18:45:49","modified_gmt":"2025-08-12T22:45:49","slug":"widgets-simple-interactions","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/widgets-simple-interactions\/","title":{"rendered":"Widgets &#8211; Simple Interactions"},"content":{"rendered":"\n<p>We can provide simple controls that can perform actions in our apps, including triggering updates to a widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This is part three of a series on widgets. Catch up with parts <a href=\"https:\/\/stepinto.vision\/example-code\/widgets-getting-started-with-visionos-widgets\/\" data-type=\"post\" data-id=\"5614\">one<\/a> and <a href=\"https:\/\/stepinto.vision\/example-code\/widgets-adding-content-and-options-for-configuration\/\" data-type=\"post\" data-id=\"5635\">two<\/a>. <\/p>\n\n\n\n<p>Widgets may look a lot like SwiftUI but there are limitations on what we can do. For example, we can&#8217;t add a button to update some state and expect anything to change. Instead, we need a button that can perform an App Intent, which can update some data and\/or trigger the widget to update.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Draw a widget with a button<\/li>\n\n\n\n<li>When the button is tapped, perform an App Intent<\/li>\n\n\n\n<li>Inside the App Intent we can modify any data, then ask WidgetKit to update our widget<\/li>\n\n\n\n<li>The content of the widget will refresh, giving is a short period of time when we can animate changes (about 2 seconds max).<\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s make a new widget. The user can pick an emoji in the configuration screen. We&#8217;ll repeat that emoji N times in a radial layout. Then we&#8217;ll add two buttons to document and increment a count (N). For the sake of simplicity we&#8217;ll store the data in UserDefaults. In a real app, widgets may need to updated data from SwiftData, Core Data, etc.<\/p>\n\n\n\n<p class=\"has-theme-palette-8-background-color has-background\"><a href=\"https:\/\/stepinto.vision\/labs\/lab-067-exploring-custom-layouts-in-swiftui\/\" data-type=\"post\" data-id=\"5465\">Curious about custom layouts?<\/a><\/p>\n\n\n\n<p>An App Intent to increment a value and update a widget.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct IncrementCountIntent: AppIntent {\n    static var title: LocalizedStringResource = \"Increment Count\"\n    static var description: IntentDescription = \"Increase the emoji count by 1\"\n    \n    func perform() async throws -> some IntentResult {\n        \/\/ Get current count from UserDefaults and increment\n        let currentCount = UserDefaults.standard.integer(forKey: \"EmojiWidgetCount\")\n        let newCount = min(currentCount + 1, 12)\n        UserDefaults.standard.set(newCount, forKey: \"EmojiWidgetCount\")\n        \n        \/\/ Reload the widget timeline\n        WidgetCenter.shared.reloadTimelines(ofKind: \"EmojiWidget\")\n        \n        return .result()\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">IncrementCountIntent<\/span><span style=\"color: #000000\">: AppIntent {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> title: LocalizedStringResource = <\/span><span style=\"color: #A31515\">&quot;Increment Count&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> description: IntentDescription = <\/span><span style=\"color: #A31515\">&quot;Increase the emoji count by 1&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">func<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">perform<\/span><span style=\"color: #000000\">() <\/span><span style=\"color: #AF00DB\">async<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">throws<\/span><span style=\"color: #000000\"> -&gt; some IntentResult {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Get current count from UserDefaults and increment<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> currentCount = UserDefaults.<\/span><span style=\"color: #001080\">standard<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">integer<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">forKey<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidgetCount&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> newCount = <\/span><span style=\"color: #795E26\">min<\/span><span style=\"color: #000000\">(currentCount + <\/span><span style=\"color: #098658\">1<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">12<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        UserDefaults.<\/span><span style=\"color: #001080\">standard<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">set<\/span><span style=\"color: #000000\">(newCount, <\/span><span style=\"color: #795E26\">forKey<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidgetCount&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Reload the widget timeline<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        WidgetCenter.<\/span><span style=\"color: #001080\">shared<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">reloadTimelines<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">ofKind<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidget&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> .<\/span><span style=\"color: #795E26\">result<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>An App Intent to increment a value and update a widget.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct DecrementCountIntent: AppIntent {\n    static var title: LocalizedStringResource = \"Decrement Count\"\n    static var description: IntentDescription = \"Decrease the emoji count by 1\"\n    \n    func perform() async throws -> some IntentResult {\n        \/\/ Get current count from UserDefaults and decrement\n        let currentCount = UserDefaults.standard.integer(forKey: \"EmojiWidgetCount\")\n        let newCount = max(currentCount - 1, 1)\n        UserDefaults.standard.set(newCount, forKey: \"EmojiWidgetCount\")\n        \n        \/\/ Reload the widget timeline\n        WidgetCenter.shared.reloadTimelines(ofKind: \"EmojiWidget\")\n        \n        return .result()\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">DecrementCountIntent<\/span><span style=\"color: #000000\">: AppIntent {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> title: LocalizedStringResource = <\/span><span style=\"color: #A31515\">&quot;Decrement Count&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> description: IntentDescription = <\/span><span style=\"color: #A31515\">&quot;Decrease the emoji count by 1&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">func<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">perform<\/span><span style=\"color: #000000\">() <\/span><span style=\"color: #AF00DB\">async<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">throws<\/span><span style=\"color: #000000\"> -&gt; some IntentResult {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Get current count from UserDefaults and decrement<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> currentCount = UserDefaults.<\/span><span style=\"color: #001080\">standard<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">integer<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">forKey<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidgetCount&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> newCount = <\/span><span style=\"color: #795E26\">max<\/span><span style=\"color: #000000\">(currentCount - <\/span><span style=\"color: #098658\">1<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">1<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        UserDefaults.<\/span><span style=\"color: #001080\">standard<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">set<\/span><span style=\"color: #000000\">(newCount, <\/span><span style=\"color: #795E26\">forKey<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidgetCount&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #008000\">\/\/ Reload the widget timeline<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        WidgetCenter.<\/span><span style=\"color: #001080\">shared<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">reloadTimelines<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">ofKind<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidget&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> .<\/span><span style=\"color: #795E26\">result<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>We&#8217;ll add a control to edit the emoji in another App Intent.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct EmojiConfigurationAppIntent: WidgetConfigurationIntent {\n    static var title: LocalizedStringResource { \"Emoji Configuration\" }\n    static var description: IntentDescription { \"Choose an emoji to display\" }\n\n    @Parameter(title: \"Emoji\", default: \"\ud83c\udf1f\")\n    var emoji: String\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">EmojiConfigurationAppIntent<\/span><span style=\"color: #000000\">: WidgetConfigurationIntent {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> title: LocalizedStringResource { <\/span><span style=\"color: #A31515\">&quot;Emoji Configuration&quot;<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">static<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> description: IntentDescription { <\/span><span style=\"color: #A31515\">&quot;Choose an emoji to display&quot;<\/span><span style=\"color: #000000\"> }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@Parameter<\/span><span style=\"color: #000000\">(title: <\/span><span style=\"color: #A31515\">&quot;Emoji&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #AF00DB\">default<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;\ud83c\udf1f&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> emoji: <\/span><span style=\"color: #267F99\">String<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now we can dive into the Widget itself. We&#8217;re going to duplicate a lot of the boilerplate code from the Xcode template we used for the first widget. Check the repo for the full code. We&#8217;ll use a computed property in the widget view to read the current count from UserDefaults. <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct EmojiWidgetEntryView: View {\n    var entry: EmojiProvider.Entry\n    \n    private var storedCount: Int {\n        let count = UserDefaults.standard.integer(forKey: \"EmojiWidgetCount\")\n        return count > 0 ? count : 3 \/\/ Default to 3 if no count stored\n    }\n    \n    var body: some View {\n        RadialLayout(angleOffset: .degrees(0)) {\n            ForEach(0..&lt;max(1, storedCount), id: \\.self) { index in\n                Text(entry.configuration.emoji)\n            }\n        }\n        ...\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">EmojiWidgetEntryView<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> entry: EmojiProvider.Entry<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> storedCount: <\/span><span style=\"color: #267F99\">Int<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #0000FF\">let<\/span><span style=\"color: #000000\"> count = UserDefaults.<\/span><span style=\"color: #001080\">standard<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">integer<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">forKey<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;EmojiWidgetCount&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #AF00DB\">return<\/span><span style=\"color: #000000\"> count &gt; <\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\"> ? count : <\/span><span style=\"color: #098658\">3<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #008000\">\/\/ Default to 3 if no count stored<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body: some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #795E26\">RadialLayout<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">angleOffset<\/span><span style=\"color: #000000\">: .<\/span><span style=\"color: #795E26\">degrees<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\">)) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">ForEach<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">0<\/span><span style=\"color: #000000\">..&lt;<\/span><span style=\"color: #795E26\">max<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #098658\">1<\/span><span style=\"color: #000000\">, storedCount), <\/span><span style=\"color: #795E26\">id<\/span><span style=\"color: #000000\">: \\.self) { index <\/span><span style=\"color: #AF00DB\">in<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(entry.<\/span><span style=\"color: #001080\">configuration<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">emoji<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        ...<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>We can add buttons to the view to call the App Intents we created above. We&#8217;ll need to use <a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\/button\/init(intent:label:)\">Button(intent:label:)<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>Button(intent: DecrementCountIntent()) {\n    Image(systemName: \"minus.circle.fill\")\n}\n\nButton(intent: IncrementCountIntent()) {\n    Image(systemName: \"plus.circle.fill\")\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">intent<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #795E26\">DecrementCountIntent<\/span><span style=\"color: #000000\">()) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">Image<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">systemName<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;minus.circle.fill&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">intent<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #795E26\">IncrementCountIntent<\/span><span style=\"color: #000000\">()) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">Image<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">systemName<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;plus.circle.fill&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Let&#8217;s see it in action.<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <div class=\"jetpack-video-wrapper\"><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='720' height='405' src='https:\/\/videopress.com\/embed\/Dixh6HZx?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div><\/div>\n\t\t\t<figcaption>Interactive Widget Demo<\/figcaption>\n\t\t\t\n\t\t<\/figure>\n\t\t\n\n\n<p>There are a few things to keep in mind.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>While this seems interactive, it&#8217;s not quite the same a SwiftUI content in a regular window. We&#8217;re limited on what we can do and the controls we can use.<\/li>\n\n\n\n<li>Animations work, but only between widget versions. For example, when we set count from 3 to 4, we can animate the layout change from 3 to 4 emoji as long as the animation finishes quickly. It&#8217;s sort of like we are flipping from one snapshot to the next. We can animate the change between the two.<\/li>\n\n\n\n<li>The demo above works well as long as we tap on the buttons. When we tap elsewhere in the widget, visionOS opens the main window for the app. I haven&#8217;t figured out a way to prevent that.<\/li>\n<\/ul>\n\n\n\n<p>You can find the Xcode project for this example in our <a href=\"https:\/\/github.com\/radicalappdev\/Step-Into-Example-Projects\">Projects Repo<\/a>. Look for StepIntoWidgets.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can provide simple controls that can perform actions in our apps, including triggering updates to a widget.<\/p>\n","protected":false},"author":93705089,"featured_media":6009,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[1365],"tags":[],"class_list":["post-5659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-example-code"],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":1365,"label":"Example Code"}]},"featured_image_src_large":["https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/07\/step-widgets-03-02.jpeg?fit=1024%2C576&ssl=1",1024,576,true],"author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/stepinto.vision\/author\/vrhermit\/"},"comment_info":0,"category_info":[{"term_id":1365,"name":"Example Code","slug":"example-code","term_group":0,"term_taxonomy_id":11,"taxonomy":"category","description":"Code snippets and examples of using common APIs throughout visionOS development","parent":0,"count":187,"filter":"raw","cat_ID":1365,"category_count":187,"category_description":"Code snippets and examples of using common APIs throughout visionOS development","cat_name":"Example Code","category_nicename":"example-code","category_parent":0}],"tag_info":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2025\/07\/step-widgets-03-02.jpeg?fit=3840%2C2160&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/5659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/users\/93705089"}],"replies":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/comments?post=5659"}],"version-history":[{"count":15,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/5659\/revisions"}],"predecessor-version":[{"id":6014,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/5659\/revisions\/6014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media\/6009"}],"wp:attachment":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media?parent=5659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/categories?post=5659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/tags?post=5659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}