{"id":12293,"date":"2024-09-25T19:54:31","date_gmt":"2024-09-25T19:54:31","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/"},"modified":"2024-09-25T19:56:08","modified_gmt":"2024-09-25T19:56:08","slug":"flutter-apps-apple-watch-integration","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/","title":{"rendered":"Supercharge Your Flutter Apps With Apple Watch Integration"},"content":{"rendered":"\n<p>In 2023, the Apple Watch had an impressive <a href=\"https:\/\/www.statista.com\/statistics\/910862\/worldwide-smartwatch-shipment-market-share\/\" target=\"_blank\" rel=\"noreferrer noopener\">31%<\/a> market share. This handy wearable device lets you measure your fitness, track meaningful health insights, connect with companion apps, make calls, and more right from your wrist.<\/p>\n\n\n\n<p>With all that power, creating companion Apple Watch apps for your iOS apps can help enhance the overall user experience and make great use of this feature-packed device.<\/p>\n\n\n\n<p>Let\u2019s look at how the Apple Watch can help you bring new functionality to your apps and how to build an Apple Watch app that communicates with an existing <a href=\"https:\/\/cheesecakelabs.com\/blog\/apps-built-with-flutter\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flutter app<\/a>.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How can Apple Watch apps improve user experience?<\/strong><\/h2>\n\n\n\n<p>Creating synchronous and asynchronous communication between wearable devices and apps is a great way to add a new layer of functionality \u2014 and we\u2019re no stranger to the task thanks to our work with <a href=\"https:\/\/cheesecakelabs.com\/en\/portfolio\/thaw\/\" target=\"_blank\" rel=\"noreferrer noopener\">Thaw<\/a>.\u00a0<\/p>\n\n\n\n<p>Here are just a few of the ways this approach helps improve the user experience:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enhanced convenience:<\/strong> Users can access information and perform quick actions on their watch that carry over to the iOS app when they go back to their phone.<\/li>\n\n\n\n<li><strong>Seamless integration:<\/strong> Data and settings stay consistent across both devices.<\/li>\n\n\n\n<li><strong>Real-time feedback:<\/strong> Enables real-time alerts, progress updates, or notifications between devices based on interactions with either app.<\/li>\n\n\n\n<li><strong>Increased engagement:<\/strong> Apple Watch\u2019s great features like fitness tracking and glanceable notifications can make the entire app experience more engaging and valuable.<\/li>\n\n\n\n<li><strong>Improved accessibility:<\/strong> A more accessible user experience overall for users with disabilities, those who find using smartphones challenging, or in instances where using a phone is impractical.<\/li>\n<\/ul>\n\n\n\n<p>These are just a few great advantages this approach enables, in addition to all the exciting <a href=\"https:\/\/cheesecakelabs.com\/blog\/flutter-app-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">benefits of Flutter app development<\/a>.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step-by-step: Integrating your Flutter app with Apple Watch&nbsp;<\/strong><\/h2>\n\n\n\n<p>With all those advantages in mind, let\u2019s look at how to get the two types of apps to talk to one another.&nbsp;<\/p>\n\n\n\n<p>Although Flutter provides a way to directly build iOS apps, adding an Apple Watch app to a project can be tricky. Though the Apple Watch exists within the same Apple ecosystem, it runs WatchOS, which is a separate operating system from iOS.<\/p>\n\n\n\n<p>So, if we want to build an Apple Watch app that communicates with a Flutter app we need to follow a few steps and meet some specific requirements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Implement the Apple Watch extension app with SwiftUI&nbsp;&nbsp;<\/li>\n\n\n\n<li>Setup the communication between the watchOS and iOS<\/li>\n\n\n\n<li>Create an interface to allow communication between Flutter and the iOS<\/li>\n<\/ol>\n\n\n\n<p>Let&#8217;s now explore how we&#8217;ll implement these three requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Adding an Apple Watch extension to your Flutter app<\/strong><\/h2>\n\n\n\n<p>First, open your iOS folder from a Flutter project with Xcode, create a new target (<strong>File -&gt; New -&gt; Target<\/strong>), and select a watchOS &#8220;App&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"861\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1-1200x861.png\" alt=\"\" class=\"wp-image-12294\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1-1200x861.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1-600x430.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1-768x551.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1-760x545.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-1.png 1464w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>Then, fill in the &#8220;Product Name&#8221; field and select the &#8220;Watch App for Existing iOS App&#8221; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"861\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2-1200x861.png\" alt=\"\" class=\"wp-image-12296\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2-1200x861.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2-600x430.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2-768x551.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2-760x545.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-2.png 1458w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>After you click on &#8220;Finish&#8221;, you&#8217;ll see a new folder like the example below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"752\" height=\"230\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-3.png\" alt=\"\" class=\"wp-image-12298\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-3.png 752w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-3-600x184.png 600w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Developing your watchOS app<\/strong><\/h2>\n\n\n\n<p>Now that we have added the watchOS app to our project, we can develop the interfaces and some logic using SwiftUI. For this article, we&#8217;ll create an app that allows the user to increase or decrease a counter.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"656\" height=\"820\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-4.png\" alt=\"\" class=\"wp-image-12300\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-4.png 656w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-4-480x600.png 480w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"741\" height=\"417\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-5.png\" alt=\"\" class=\"wp-image-12302\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-5.png 741w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-5-600x338.png 600w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/figure>\n<\/div>\n\n\n<p>This is the result:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"524\" height=\"586\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-6.png\" alt=\"\" class=\"wp-image-12304\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting up communication between the watchOS and iOS<\/strong><\/h2>\n\n\n\n<p>To create a communication channel between the watchOS and the iOS, we need to use the <a href=\"https:\/\/developer.apple.com\/documentation\/watchconnectivity\/wcsession\">WCSession<\/a> from the <a href=\"https:\/\/developer.apple.com\/documentation\/watchconnectivity\">WatchConnectivity library<\/a>. According to Apple&#8217;s WCSession documentation, \u201cYour iOS app and watchOS app must both create and configure an instance of this class at some point during their execution. When both session objects are active, the two processes can communicate immediately by sending messages back and forth.\u201d&nbsp;<\/p>\n\n\n\n<p>Let\u2019s see how that works in our example.<\/p>\n\n\n\n<p>First, at <strong>&#8220;Runner\/AppDelegate.swift&#8221; <\/strong>add the following code to start the session and create an extension that implements the WCSessionDelegate protocol. This will listen when the watchOS sends a message to the iOS app.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1200\" height=\"1038\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7-1200x1038.png\" alt=\"\" class=\"wp-image-12306\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7-1200x1038.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7-600x519.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7-768x665.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7-760x658.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-7.png 1284w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n<\/div>\n\n\n<p>You also have to start the session from the watchOS extension. For this example, we&#8217;ll start it from our view model as the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8-1200x900.png\" alt=\"\" class=\"wp-image-12308\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8-1200x900.png 1200w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8-600x450.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8-768x576.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8-760x570.png 760w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-8.png 1332w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>Now we can send and receive data from our iOS app to our watchOS app extension. But we still need to communicate with our Flutter code. Here\u2019s how to make that happen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pigeon: A better way to work with Platform Channels<\/strong><\/h2>\n\n\n\n<p>Usually, when we want to develop an integration between Flutter and the native code we use <a href=\"https:\/\/api.flutter.dev\/flutter\/services\/MethodChannel-class.html\">MethodChannels<\/a>. But, this method can take a lot of extra effort to set up all that communication between platforms. Instead, we\u2019ve found that Pigeon is a great option.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What is Pigeon?<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/pub.dev\/packages\/pigeon\">Pigeon<\/a> is a code generator tool that makes it easy to facilitate communication between Dart (the programming language used by Flutter) and other platforms like Kotlin, Swift, and Objective-C.&nbsp;<\/p>\n\n\n\n<p>It&#8217;s especially useful for Flutter developers who need to interact with native code or libraries that are not directly accessible from Dart. Pigeon makes communication between Flutter and the host platform type-safe, easier, and faster and removes the need to manage strings across multiple platforms and languages.<\/p>\n\n\n\n<p>According to Pigeon\u2019s documentation, it also \u201cimproves efficiency over common method channel patterns\u201d and \u201cremoves the need to write custom platform channel code, since Pigeon generates it for you.&#8221;<\/p>\n\n\n\n<p>It\u2019s a great tool, and perfect for our example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Generating code with Pigeon<\/strong><\/h3>\n\n\n\n<p>After adding Pigeon as a development dependency to your Flutter project, create a dart file in the root folder (out of the <strong>lib<\/strong> folder). Then, let&#8217;s define the interfaces to generate the code through Pigeon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1018\" height=\"619\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-9.png\" alt=\"\" class=\"wp-image-12310\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-9.png 1018w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-9-600x365.png 600w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-9-768x467.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-9-760x462.png 760w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/figure>\n\n\n\n<p>Run the <strong>&#8220;<\/strong><strong><em>flutter pub run pigeon &#8211;input path\/to\/watch_interface.dart<\/em><\/strong>&#8221; to generate the files.<\/p>\n\n\n\n<p>After running the above command, two files will be generated:&nbsp;<\/p>\n\n\n\n<p>For Swift we&#8217;ll have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A protocol &#8220;<strong>WatchCounterHostAPI<\/strong>&#8221; that we&#8217;ll implement to receive messages from Flutter.<\/li>\n\n\n\n<li>A class <strong>&#8220;WatchCounterHostAPISetup&#8221; <\/strong>to start the communication and provide the implementation of <strong>&#8220;WatchCounterHostAPI&#8221;.<\/strong><\/li>\n\n\n\n<li>A class &#8220;<strong>WatchCounterFlutterAPI&#8221; <\/strong>to send messages to Flutter.<\/li>\n<\/ul>\n\n\n\n<p>For Flutter we&#8217;ll have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A class <strong>&#8220;WatchCounterHostAPI&#8221; <\/strong>to send messages to iOS.<\/li>\n\n\n\n<li>An abstract class &#8220;<strong>WatchCounterFlutterAPI<\/strong>&#8221; will be implemented to receive messages from iOS.<\/li>\n<\/ul>\n\n\n\n<p>That is how the implementation of those APIs will look like:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"865\" height=\"1600\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10.png\" alt=\"\" class=\"wp-image-12312\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10.png 865w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10-324x600.png 324w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10-649x1200.png 649w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10-768x1421.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10-830x1536.png 830w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-10-760x1406.png 760w\" sizes=\"(max-width: 865px) 100vw, 865px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"902\" height=\"1600\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11.png\" alt=\"\" class=\"wp-image-12314\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11.png 902w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11-338x600.png 338w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11-677x1200.png 677w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11-768x1362.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11-866x1536.png 866w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-11-760x1348.png 760w\" sizes=\"(max-width: 902px) 100vw, 902px\" \/><\/figure>\n<\/div>\n\n\n<p>Now we can send messages from the watchOS session, receive them in the iOS app, and send them to our Flutter code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1332\" height=\"1469\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12.png\" alt=\"\" class=\"wp-image-12316\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12.png 1332w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12-544x600.png 544w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12-1088x1200.png 1088w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12-768x847.png 768w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch-12-760x838.png 760w\" sizes=\"(max-width: 1332px) 100vw, 1332px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Seamless communication between Apple Watch and Flutter apps<\/strong><\/h2>\n\n\n\n<p>After those simple steps, you can see our finished product: a Flutter + Apple Watch application, that dependably communicates and executes our Dart code to provide data to watchOS&nbsp; \u2014 all made possible by using Pigeon.&nbsp;<\/p>\n\n\n\n<p>As you interact with either app, the other updates give you seamless communication and integration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"456\" height=\"564\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-apple-watch.gif\" alt=\"\" class=\"wp-image-12318\"\/><\/figure>\n<\/div>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Want to play around with this example yourself? <a href=\"https:\/\/github.com\/LdrPontes\/flutter-pigeon-applewatch\" target=\"_blank\" rel=\"noreferrer noopener\">Check out the code here.<\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Learn more about developing for Apple devices<\/strong><\/h2>\n\n\n\n<p>At Cheesecake Labs, we\u2019re always keeping a close eye on Apple\u2019s hardware releases and looking for ways to create unique and useful app experiences across the Apple ecosystem.<\/p>\n\n\n\n<p>To learn more about our approach to developing Apple products (like the company\u2019s other wearable, <a href=\"https:\/\/cheesecakelabs.com\/blog\/how-to-create-cross-platform-app-apple-vision-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vision Pro<\/a>) head to the <a href=\"https:\/\/cheesecakelabs.com\/blog\/\">Cheesecake Labs blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In 2023, the Apple Watch had an impressive 31% market share. This handy wearable device lets you measure your fitness, track meaningful health insights, connect with companion apps, make calls, and more right from your wrist. With all that power, creating companion Apple Watch apps for your iOS apps can help enhance the overall user [&hellip;]<\/p>\n","protected":false},"author":81,"featured_media":12320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[1293,1292,1294,54],"class_list":["post-12293","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-flutter-development","tag-ios-app-development","tag-iphone-development","tag-tag-mobile-app-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Supercharge Your Flutter Apps With Apple Watch Integration<\/title>\n<meta name=\"description\" content=\"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Supercharge Your Flutter Apps With Apple Watch Integration\" \/>\n<meta property=\"og:description\" content=\"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-25T19:54:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-25T19:56:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\n\t<meta property=\"og:image:height\" content=\"861\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\"},\"author\":{\"name\":\"Leandro Pontes Berleze\"},\"headline\":\"Supercharge Your Flutter Apps With Apple Watch Integration\",\"datePublished\":\"2024-09-25T19:54:31+00:00\",\"dateModified\":\"2024-09-25T19:56:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\"},\"wordCount\":1192,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png\",\"keywords\":[\"flutter development\",\"ios app development\",\"iphone development\",\"mobile app development\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\",\"name\":\"Supercharge Your Flutter Apps With Apple Watch Integration\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png\",\"datePublished\":\"2024-09-25T19:54:31+00:00\",\"dateModified\":\"2024-09-25T19:56:08+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Leandro Pontes Berleze\"},\"description\":\"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png\",\"width\":1921,\"height\":861,\"caption\":\"apps with apple watch integration\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Supercharge Your Flutter Apps With Apple Watch Integration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Leandro Pontes Berleze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png\",\"caption\":\"Leandro Pontes Berleze\"},\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/leandropberleze\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Supercharge Your Flutter Apps With Apple Watch Integration","description":"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/","og_locale":"en_US","og_type":"article","og_title":"Supercharge Your Flutter Apps With Apple Watch Integration","og_description":"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.","og_url":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2024-09-25T19:54:31+00:00","article_modified_time":"2024-09-25T19:56:08+00:00","og_image":[{"width":1921,"height":861,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/"},"author":{"name":"Leandro Pontes Berleze"},"headline":"Supercharge Your Flutter Apps With Apple Watch Integration","datePublished":"2024-09-25T19:54:31+00:00","dateModified":"2024-09-25T19:56:08+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/"},"wordCount":1192,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png","keywords":["flutter development","ios app development","iphone development","mobile app development"],"articleSection":["Engineering"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/","url":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/","name":"Supercharge Your Flutter Apps With Apple Watch Integration","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png","datePublished":"2024-09-25T19:54:31+00:00","dateModified":"2024-09-25T19:56:08+00:00","author":{"@type":"person","name":"Leandro Pontes Berleze"},"description":"Create a Flutter app with Apple Watch integration to enhance user experience with real-time feedback and seamless communication.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/flutter-app-with-apple-watch-integration-tutorial.png","width":1921,"height":861,"caption":"apps with apple watch integration"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/flutter-apps-apple-watch-integration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Supercharge Your Flutter Apps With Apple Watch Integration"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Leandro Pontes Berleze","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/03\/Leandro-Berleze.png","caption":"Leandro Pontes Berleze"},"url":"https:\/\/cheesecakelabs.com\/blog\/autor\/leandropberleze\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/12293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=12293"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/12293\/revisions"}],"predecessor-version":[{"id":12322,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/12293\/revisions\/12322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/12320"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=12293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=12293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=12293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}