{"id":7214,"date":"2023-10-05T12:01:26","date_gmt":"2023-10-05T12:01:26","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=7214"},"modified":"2023-10-05T12:01:26","modified_gmt":"2023-10-05T12:01:26","slug":"how-to-build-a-carplay-app-with-flutter","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/","title":{"rendered":"How to Build a Carplay App with Flutter?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Flutter framework has gone beyond creating applications for users staying put at one place. With Flutter\u2019s Carplay app functionality, people can now access a wide range of apps while enjoying the drive during the ongoing business call.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How to build a Carplay app with Flutter? This expert-curated walkthrough guide will help with the best!\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How-Has-Flutter-Changed-So-Far\"><\/span><span style=\"font-weight: 400;\">How Has Flutter Changed So Far?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With a fantastic developer base and constant updates in its newest versions, <\/span><b>Flutter app development<\/b><span style=\"font-weight: 400;\"> has come a long way. In fact, with over 3.6 mobile users worldwide, more than half use Flutter while the remaining falls for React Native (Another popular app development framework).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Flutter SDK incorporates command-line tools, APIs for testing and integration, engine rendering, and ready-to-use widgets that are further distributed into 14 categories.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Google was the first company to employ Flutter in its very own applications such as Google Ads, <\/span><a href=\"https:\/\/dianapps.com\/blog\/going-global-at-google-pay-with-flutter\/\"><span style=\"font-weight: 400;\">Google Pay<\/span><\/a><span style=\"font-weight: 400;\">, etc. After that, many top brands like BMW &amp; Toyota, Rive, eBay, and more also adopted the framework which made it more popular.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to know more about the <\/span><a href=\"https:\/\/dianapps.com\/blog\/top-10-use-cases-of-flutter-as-a-framework-for-app-development\/\"><span style=\"font-weight: 400;\">use cases of Flutter framework<\/span><\/a><span style=\"font-weight: 400;\"> in detail, continue reading here.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How successful are Flutter apps? As of June 2023, Flutter\u2019s success rate became tremendously high. It is Google\u2019s second most successful open-source project and has over 154k stars on GitHub.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So all, the <\/span><b>Flutter app development services<\/b><span style=\"font-weight: 400;\"> are changing and have overcome many hurdles so far. Let\u2019s look below at what it has to contribute to creating an iOS Carplay app.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites-Needed-From-Apple-Before-Building-Carplay-App\"><\/span><span style=\"font-weight: 400;\">Prerequisites Needed From Apple Before Building Carplay App<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It takes more effort than simply importing <\/span><a href=\"https:\/\/dianapps.com\/blog\/top-10-flutter-packages-that-speed-up-your-app-development\/\"><span style=\"font-weight: 400;\">Flutter packages<\/span><\/a><span style=\"font-weight: 400;\">, configuring some parameters, and distributing the finished product to your consumers to create a Flutter app with a CarPlay component. Any app that takes advantage of CarPlay has to have Apple&#8217;s explicit approval.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This approval procedure might take weeks or even months to complete. There are other claims that Apple just ignores requests for this capability from developers. Nothing you say or do can hasten this process; it is solely Apple&#8217;s timeframe.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Even yet, it&#8217;s not as straightforward as just clicking a box to say that your app supports CarPlay. This takes us to our second issue, which is that your software must fit into a set of pre-established categories put out by Apple.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Carplay-is-Not-For-Every-App\"><\/span><span style=\"font-weight: 400;\">Carplay is Not For Every App\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Your app must fall into one of Apple&#8217;s predetermined categories in order to use CarPlay. Basically, these categories are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Audio app<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A messaging application (such as Teams, Slack, or Discord)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">&#8220;Driving Task&#8221; app, which is new in iOS 16, lets users track miles while driving.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App for EV charging<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fueling app (new on iOS 16) allows paying for petrol from CarPlay<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Navigational software (such as Apple Maps or Google Maps)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Parking payment application<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">App for quickly ordering meals (similar to DoorDash or <\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-create-a-food-delivery-app-like-uber-eats-from-scratch\/\"><span style=\"font-weight: 400;\">UberEats<\/span><\/a><span style=\"font-weight: 400;\">)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Music app (YouTube Music or <\/span><a href=\"https:\/\/dianapps.com\/blog\/building-a-music-streaming-app-like-spotify-a-guide-for-2023\/\"><span style=\"font-weight: 400;\">Spotify<\/span><\/a><span style=\"font-weight: 400;\">)\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">And that is all you can customize in your Carplay app categories.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You could think it&#8217;s oppressive of Apple to impose such limitations on what you can and cannot create for CarPlay. But think about CarPlay&#8217;s core premise: users use it in their cars to perform routine chores that shouldn&#8217;t keep them from driving.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Who-Should-Consider-Carplay-App-Development\"><\/span><span style=\"font-weight: 400;\">Who Should Consider Carplay App Development?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If all the above-given criteria match your expectations.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Your app will make a good pair in the Carplay interface.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you have an idea that will provide convenience to the car drivers.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Time to build your Carplay app with top Flutter app development services.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Setting-Up-The-Environment-of-Your-Carplay-App-in-Flutter\"><\/span><span style=\"font-weight: 400;\">Setting Up The Environment of Your Carplay App in Flutter<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Carplay applications are best suited for drivers who aim to have a seamless drive while multi-tasking other tasks such as calling, locating a place, entertaining themselves with good music, and much more.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But before you begin your <\/span><b>app development services in Flutter <\/b><span style=\"font-weight: 400;\">and Carplay app, read the following guidelines directed by Apple: The <\/span><a href=\"https:\/\/developer.apple.com\/carplay\/documentation\/CarPlay-App-Programming-Guide.pdf\"><span style=\"font-weight: 400;\">Carplay app programming guide<\/span><\/a><span style=\"font-weight: 400;\">. This guide will cut short describe the needs, limitations, and capabilities of Carplay apps in detail.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To set up the environment for your CarPlay app in Flutter, you&#8217;ll need to follow several steps to ensure that your app is compatible with CarPlay and that you can test it on a CarPlay-enabled device or simulator. CarPlay is a system developed by Apple that allows certain iOS apps to be displayed and controlled on a car&#8217;s infotainment system.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><span style=\"font-weight: 400;\">Prerequisites:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Make sure you have Flutter and Dart installed on your development machine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Install Xcode if you&#8217;re developing for iOS, as it&#8217;s required for CarPlay development.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Step-To-Build-A-Carplay-App-in-Flutter-Framework\"><\/span><span style=\"font-weight: 400;\">Step To Build A Carplay App in Flutter Framework<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Step-1-Create-a-Flutter-Project\"><\/span><span style=\"font-weight: 400;\">Step 1: Create a Flutter Project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let&#8217;s now go over the flutter_carplay setup instructions that are accessible on pub.dev.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep in mind that by implementing this, your Flutter project will change. It would be best to commit your modifications to source control at this stage if you were adding CarPlay to an existing app. This way, if your modifications lead to issues, you can quickly roll them back.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In our dependencies, we\u2019ll first add a reference to our pubspec.yaml:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true \">dependencies:\r\n\r\n\u00a0\u00a0flutter:\r\n\r\n\u00a0\u00a0\u00a0\u00a0sdk: flutter\r\n\r\n\u00a0\u00a0...other dependencies...\r\n\r\n\u00a0\u00a0flutter_carplay: ^1.0.3<\/pre>\n<p><span style=\"font-weight: 400;\">The<\/span><i><span style=\"font-weight: 400;\"> flutter pub get <\/span><\/i><span style=\"font-weight: 400;\">command should then be executed within our project. This will produce a <\/span><i><span style=\"font-weight: 400;\">Podfile<\/span><\/i><span style=\"font-weight: 400;\"> that aids in flutter_carplay&#8217;s native components being included in our project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As soon as the ios\/Podfile file is opened, the first line should be left uncommented, and the global platform should be set to <\/span><a href=\"https:\/\/dianapps.com\/blog\/new-in-ios-14\/\"><span style=\"font-weight: 400;\">iOS 14<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><b># Uncomment this line to define a global platform for your project<\/b><\/p>\n<p><b>platform :ios, &#8216;14.0&#8217;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Go to the<\/span><i><span style=\"font-weight: 400;\"> ios<\/span><\/i><span style=\"font-weight: 400;\"> folder by changing directories, then execute <\/span><i><span style=\"font-weight: 400;\">pod install &#8211;repo-update<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-2-Modifying-our-XCode-project\"><\/span><span style=\"font-weight: 400;\">Step 2: Modifying our XCode project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7215 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image3.png\" alt=\"\" width=\"730\" height=\"389\" \/><\/p>\n<p><span style=\"font-weight: 400;\">We must alter our XCode app because CarPlay is an iOS feature that is inherent to the platform. Then select Flutter &gt; Open iOS module in Xcode by doing a right-click on the ios folder:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7216\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image8.png\" alt=\"\" width=\"730\" height=\"426\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2022\/10\/img3-Popup-menu-modifying-XCode-project.png\"><span style=\"font-weight: 400;\">Image source<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Go to Runner &gt; Runner &gt; AppDelegate in our project and change the body of the application function to a straightforward return true. It should appear the same for you because we commented out the old code and inserted the new code just underneath it:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a SceneDelegate.swift file in our Runner folder (not the topmost one, but the one that is located one level down), and set its contents to the following:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true \">@available(iOS 13.0, *)\r\n\r\nclass SceneDelegate: UIResponder, UIWindowSceneDelegate {\r\n\r\n\u00a0\u00a0\u00a0\u00a0var window: UIWindow?\r\n\r\n\u00a0\u00a0\u00a0\u00a0func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0guard let windowScene = scene as? UIWindowScene else { return }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window = UIWindow(windowScene: windowScene)\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let flutterEngine = FlutterEngine(name: \"SceneDelegateEngine\")\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flutterEngine.run()\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0GeneratedPluginRegistrant.register(with: flutterEngine)\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let controller = FlutterViewController.init(engine: flutterEngine, nibName: nil, bundle: nil)\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window?.rootViewController = controller\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window?.makeKeyAndVisible()\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">After you complete this step, the SceneDelegate should look like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7216 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image8.png\" alt=\"\" width=\"730\" height=\"426\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Right-click the Info.plist file and select Open As &gt; Source Code from the menu that appears. With the Info.plist now open in plain text, you can quickly put the following configuration into the file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s quite simple to mistakenly break this file if we input the incorrect thing at this stage, so we should be extra cautious:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7218 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image7.png\" alt=\"\" width=\"730\" height=\"613\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Add the next line of text before the dict&#8217;s ending \/dict&gt;. The default setting is as follows, and we will return to this later to tweak it:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true\">&lt;key&gt;UIApplicationSceneManifest&lt;\/key&gt;\r\n\r\n&lt;dict&gt;\r\n\r\n\u00a0\u00a0&lt;key&gt;UIApplicationSupportsMultipleScenes&lt;\/key&gt;\r\n\r\n\u00a0\u00a0&lt;true \/&gt;\r\n\r\n\u00a0\u00a0&lt;key&gt;UISceneConfigurations&lt;\/key&gt;\r\n\r\n\u00a0\u00a0&lt;dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;CPTemplateApplicationSceneSessionRoleApplication&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;array&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UISceneConfigurationName&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;CarPlay Configuration&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UISceneDelegateClassName&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;flutter_carplay.FlutterCarPlaySceneDelegate&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/array&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UIWindowSceneSessionRoleApplication&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;array&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UISceneConfigurationName&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;Default Configuration&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UISceneDelegateClassName&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;$(PRODUCT_MODULE_NAME).SceneDelegate&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;key&gt;UISceneStoryboardFile&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;Main&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/array&gt;\r\n\r\n\u00a0\u00a0&lt;\/dict&gt;\r\n\r\n&lt;\/dict&gt;<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Step-3-Setting-Up-The-Entitlements\"><\/span><span style=\"font-weight: 400;\">Step:3 Setting Up The Entitlements<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We must allow our app to communicate with the CarPlay simulator on our computer, even while it is still in<\/span><b> Flutter app development solutions<\/b><span style=\"font-weight: 400;\">. Now let&#8217;s set up these entitlements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Click on Runner in XCode, then choose Signing &amp; Certificates, and finally click the plus button next to All:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7219 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image2.png\" alt=\"\" width=\"730\" height=\"397\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Keychain Sharing can be chosen from the list that appears. Keychain sharing isn&#8217;t really used by your app, but by implementing this, you&#8217;ll have a Runner.entitlements file in your project:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7220 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image1.png\" alt=\"\" width=\"365\" height=\"660\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In this file, depending on the kind of app you are creating, delete the Keychain Access Groups and add a new entitlement. To choose which entitlement to employ for your project, consult Apple&#8217;s list of those that are currently available.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When finished, your Runner.entitlements file ought to like this:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7221\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image6.png\" alt=\"\" width=\"730\" height=\"426\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Finally, we are prepared to add some features to our Flutter app.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-4-Using-the-CarPlay-feature-of-the-Flutter-app\"><\/span><span style=\"font-weight: 400;\">Step 4: Using the CarPlay feature of the Flutter app<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll now include the following user interface in our app&#8217;s CarPlay section.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7224 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image9-1.png\" alt=\"\" width=\"730\" height=\"459\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here are the steps we must take to accomplish this:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Establish a RootTemplate that will serve as the foundation for our CarPlay experience.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fill in the blanks in the template.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create callbacks in our program.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let&#8217;s take care of these actions right now.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step-5-A-RootTemplate-setting\"><\/span><span style=\"font-weight: 400;\">Step 5: A RootTemplate setting<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We&#8217;ll build a new FlutterCarplay object in our main.dart file. Our connection to CarPlay will be managed by this object, which also gives us control over what happens when we&#8217;re using CarPlay:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true\">final _flutterCarplay = FlutterCarplay();<\/pre>\n<p><span style=\"font-weight: 400;\">Next, we want to set up the RootTemplate with a few tapable settings within our initState for our widget. It&#8217;s simple to make a grid template, give it a label, and then list the buttons we want to be able to press:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true \">@override\r\n\r\nvoid initState() {\r\n\r\n\u00a0\u00a0FlutterCarplay.setRootTemplate(\r\n\r\n\u00a0\u00a0\u00a0\u00a0rootTemplate: CPGridTemplate(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: \"What pizza?\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0buttons: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...Data.FoodItems.map(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(e) =&gt; CPGridButton(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0titleVariants: [e.name],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0image: 'assets\/images\/${e.asset}',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress: () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0showOrderingConfirmationSheet(e);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ showActionSheet();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\r\n\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0animated: true,\r\n\r\n\u00a0\u00a0);\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0_flutterCarplay.forceUpdateRootTemplate(); \/\/ This makes the CarPlay experience reload on hot reload, useful during development.\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0\/\/ TODO: implement initState\r\n\r\n\u00a0\u00a0super.initState();\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">As expected, this is the result:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7222\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/image4.png\" alt=\"\" width=\"730\" height=\"477\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s implement showOrderingConfirmationSheet:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true height:250 nums:false lang:default decode:true\">void showOrderingConfirmationSheet(FoodItem food) {\r\n\r\n\u00a0\u00a0FlutterCarplay.showActionSheet(\r\n\r\n\u00a0\u00a0\u00a0\u00a0template: CPActionSheetTemplate(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: \"Order ${food.name}?\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: \"Your pizza will be ready soon after confirmation.\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0actions: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CPAlertAction(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: \"Cancel\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style: CPAlertActionStyles.cancel,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress: () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ print(\"Cancel pressed in action sheet\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlutterCarplay.popModal(animated: true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CPAlertAction(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: \"Ok\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style: CPAlertActionStyles.normal,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress: () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print(\"Ok pressed in action sheet\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlutterCarplay.popModal(animated: true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlutterCarplay.showAlert(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0template: CPAlertTemplate(titleVariants: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'${food.name} ordered!'\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0], actions: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CPAlertAction(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: \"Dismiss\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style: CPAlertActionStyles.destructive,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPress: () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0print(\"Dismiss pressed in action sheet\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlutterCarplay.popModal(animated: true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0]));\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\r\n\r\n\u00a0\u00a0\u00a0\u00a0),\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">As a consequence, the specific food item is opened, and a confirmation message is shown. Depending on your requirements, you may also use native Flutter app capabilities at this point, such as adding or deleting things from an internal database.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Over-To-You\"><\/span><span style=\"font-weight: 400;\">Over To You<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As always, you can get the complete source code on Github. You can use this to compare what changed because there is a commit from before I introduced CarPlay and a commit from after I had done so. If you have trouble installing CarPlay, this comparison could be helpful.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is how you <\/span><a href=\"https:\/\/dianapps.com\/blog\/how-to-easily-migrate-and-integrate-apps-in-flutter\/\"><span style=\"font-weight: 400;\">integrate and migrate apps<\/span><\/a><span style=\"font-weight: 400;\"> in CarPlay using Flutter. Getting Apple to authorize your use of CarPlay inside your app takes up the most time when implementing CarPlay. You should begin developing your Flutter app as soon as possible if you want to start integrating CarPlay inside it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The process of adding CarPlay to your Flutter app might be time-consuming, but if CarPlay is a suitable fit for your app, simply hiring a <\/span><a href=\"https:\/\/dianapps.com\/flutter-app-development\"><b>top<\/b> <b>Flutter app development company<\/b><\/a><span style=\"font-weight: 400;\"> like us can significantly improve the user experience.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter framework has gone beyond creating applications for users staying put at one place. With Flutter\u2019s Carplay app functionality, people can now access a wide range of apps while enjoying the drive during the ongoing business call.\u00a0 How to build a Carplay app with Flutter? This expert-curated walkthrough guide will help with the best!\u00a0 How [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[374,58,124,305],"class_list":["post-7214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-carplay-app-with-flutter","tag-flutter-app-development","tag-flutter-app-development-company","tag-flutter-update"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png",791,445,false],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png",463,260,false],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png",300,169,false],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build a Carplay App with Flutter?<\/title>\n<meta name=\"description\" content=\"Flutter can now build an Apple Carplay app for you. This blog aims to provide step-by-step instructions on creating a Carplay app with Flutter\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Carplay App with Flutter?\" \/>\n<meta property=\"og:description\" content=\"Flutter can now build an Apple Carplay app for you. This blog aims to provide step-by-step instructions on creating a Carplay app with Flutter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-05T12:01:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Carplay App with Flutter?","description":"Flutter can now build an Apple Carplay app for you. This blog aims to provide step-by-step instructions on creating a Carplay app with Flutter","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:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Carplay App with Flutter?","og_description":"Flutter can now build an Apple Carplay app for you. This blog aims to provide step-by-step instructions on creating a Carplay app with Flutter","og_url":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-10-05T12:01:26+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/10\/flutter.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/","url":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/","name":"How to Build a Carplay App with Flutter?","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-10-05T12:01:26+00:00","dateModified":"2023-10-05T12:01:26+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Flutter can now build an Apple Carplay app for you. This blog aims to provide step-by-step instructions on creating a Carplay app with Flutter","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/how-to-build-a-carplay-app-with-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build a Carplay App with Flutter?"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=7214"}],"version-history":[{"count":1,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7214\/revisions"}],"predecessor-version":[{"id":7225,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/7214\/revisions\/7225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/7226"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=7214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=7214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=7214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}