{"id":3165,"date":"2023-06-08T11:38:40","date_gmt":"2023-06-08T15:38:40","guid":{"rendered":"https:\/\/michaelrowe01.com\/?p=3165"},"modified":"2023-06-08T11:38:42","modified_gmt":"2023-06-08T15:38:42","slug":"bring-widgets-to-life","status":"publish","type":"post","link":"https:\/\/michaelrowe01.com\/index.php\/blog\/bring-widgets-to-life\/","title":{"rendered":"Bring Widgets to Life"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"371\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?resize=660%2C371&#038;ssl=1\" alt=\"\" class=\"wp-image-3166\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Bring-widgets-to-life.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<p>You can now create interactions with widgets.&nbsp; You can have animation in widgets to show how content has changed.<\/p>\n\n\n\n<p>Animations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>By default there is default animation by the system whenever things change<\/li>\n\n\n\n<li>In regulator objects you use State, but widgets use timelines not state<\/li>\n\n\n\n<li>By default this will be a spring transition, but you can use any you which from SwiftUI out of the box.. you can learn more <strong>Explore SwiftUI Animation<\/strong><\/li>\n\n\n\n<li>The new preview API will let you work thru this by showing you the timeline.\n<ul class=\"wp-block-list\">\n<li>You can use #Preview(as: WidgetFamily.systemSmall) { } timeline: { entries, \u2026 }<\/li>\n\n\n\n<li>For text you can use .contentTransition for important numeric values<\/li>\n\n\n\n<li>Use .id(value) so that it knows when to create a new view<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Use containerBackground to show up on all platforms.<\/li>\n<\/ul>\n\n\n\n<p>Interactivity<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now you can execute actions from the widget, since widgets are stateless, via a Widget extension discovered by the system, it runs independently from your app. It takes the entries from the timeline, and is used to create a series of views to show at the appropriate time.&nbsp; Your view code only runs during archiving, you can force an update by using .reloadTimelines whenever data changes in your app.&nbsp; Updates to widgets are done as best effort, but reloads are guaranteed&nbsp; to run.<\/li>\n\n\n\n<li>You can use Buttons and Toggles to do interactivity. So you need to represent actions that can be done by App Intents.&nbsp; Just like you did with ShortCuts or Siri.<\/li>\n\n\n\n<li>Check out \u201cDive into App Intents\u201d and \u201cExplore enhancements to App Intents\u201d<\/li>\n\n\n\n<li>When you import SwiftUI and App Intents will provide Button and Toggle support to Widgets<\/li>\n\n\n\n<li>Note that Perform in AppIntent is an async function. Make sure you persist all info needed to reload your widget.<\/li>\n\n\n\n<li>Note the appIntent will also become available in Siri and ShortCuts<\/li>\n\n\n\n<li>Note you can build a widget directly and Xcode will install directly on the Home Screen for you.<\/li>\n\n\n\n<li>Updated widgets can cause a small latency if you use it on macOS, you can add .invalidatableContent() modifier to fix this latency.&nbsp; Don\u2019t over use this feature.<\/li>\n\n\n\n<li>Toggle with update state optimistically by pre-rendering on both sides<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can now create interactions with widgets.&nbsp; You can have animation in widgets to show how content has changed. Animations Interactivity<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wp_convertkit_post_meta":{"form":"-1","landing_page":"0","tag":"0","restrict_content":"0"},"hide_page_title":"","footnotes":""},"categories":[2,3],"tags":[109,527,693,680],"class_list":["post-3165","post","type-post","status-publish","format-standard","hentry","category-blog","category-personal-softwareandit","tag-day-4","tag-swiftui","tag-widgets","tag-wwdc23"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/comments?post=3165"}],"version-history":[{"count":1,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3165\/revisions"}],"predecessor-version":[{"id":3167,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3165\/revisions\/3167"}],"wp:attachment":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/media?parent=3165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/categories?post=3165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/tags?post=3165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}