{"id":3898,"date":"2020-05-27T12:35:45","date_gmt":"2020-05-27T07:05:45","guid":{"rendered":"https:\/\/www.concettolabs.com\/blog\/?p=3898"},"modified":"2020-05-27T12:35:45","modified_gmt":"2020-05-27T07:05:45","slug":"whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website","status":"publish","type":"post","link":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/","title":{"rendered":"What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?"},"content":{"rendered":"<p>Flutter is a framework that creates a native app for android and iOS. And has now started with the web. This means you can now create a <strong>website using Flutter<\/strong>. DartPad an open-source tool allows using Dart language for any modern browser. It comes with several pages on this site especially codelabs that have to embed Dartpads. To get started with this, you need to visit the <a href=\"https:\/\/dartpad.dev\/\" target=\"_blank\" rel=\"nofollow\">DartPad site (dartpad.dev).<\/a><\/p>\n<p><strong>Flutter Dartpad looks like below:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3899 size-full\" title=\"DartPad site\" src=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/1.2-2.png\" alt=\"DartPad site\" width=\"965\" height=\"572\" srcset=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/1.2-2.png 965w, https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/1.2-2-300x178.png 300w, https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/1.2-2-768x455.png 768w\" sizes=\"auto, (max-width: 965px) 100vw, 965px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_get_started_with_DartPad_Flutter_Online\"><\/span>How to get started with DartPad Flutter Online?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Open\u00a0DartPad: A sample shown above will open on the left, and you\u2019ll get output on the right. Click on New pad to get the previous screen.<\/li>\n<li>Click on Run to get updated output<\/li>\n<li>Choose HTML sample and check output again<\/li>\n<li>Click on Console to view the sample\u2019s console output<\/li>\n<li>On the left, click on HTML tab and see the sample\u2019s HTML markup<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"How_to_create_a_command-line_app\"><\/span>How to create a command-line app?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Click on the new pad and make sure you discard the change.<\/li>\n<li>Clear the show web content at the bottom right so HTML and CSS tabs will disappear<\/li>\n<li>Change the code as per your need. Here DartPad will show the hints and autocomplete suggestions.<\/li>\n<li>Click on the Format button. Ensure the code you have written has proper spacing, indentation, and line-wrapping.<\/li>\n<li>Now, Run your application<\/li>\n<\/ul>\n<p>I hope you\u2019re clear about the installation and working of <strong>Flutter DartPad<\/strong>. Let\u2019s move on with embedding code in web pages.<\/p>\n<p>Instead of hosting the <strong>Flutter application<\/strong>, you can make a simple application. The application should work on the web and share with others. It comes with powerful and useful features that we can\u2019t even imagine. Here we have a list of steps that helps in the <strong>Dartpad embed Flutter app<\/strong>. According to Jose Alba, a developer at Google said: There are two ways to create a DartPad instance.<\/p>\n<ul>\n<li>Using a Gist File<\/li>\n<li>Using a GitHub Repo<\/li>\n<\/ul>\n<p><strong>Let\u2019s understand in brief how it works<\/strong><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Using_a_Gist_File\"><\/span>Using a Gist File<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As explained above, open DartPad and create an application. You can write code in the main.dart file in flutter application. <strong>Flutter app Developer<\/strong> can use the editor to be aware of the DartPad limitations. Where suppose one limited Dart file can\u2019t import non-Dart libraries.<\/p>\n<p><strong>Note that the below import package example tells DartPad that this is a Flutter Application.<\/strong><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"601\">import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>void main() =&gt; runApp(MyApp());<\/p>\n<p>&nbsp;<\/p>\n<p>class MyApp extends StatelessWidget {<\/p>\n<p>@override<\/p>\n<p>Widget build(BuildContext context) {<\/p>\n<p>return MaterialApp(<\/p>\n<p>title: &#8216;Flutter Demo&#8217;,<\/p>\n<p>debugShowCheckedModeBanner: false,<\/p>\n<p>theme: ThemeData(<\/p>\n<p>primarySwatch: Colors.blue,<\/p>\n<p>),<\/p>\n<p>home: MyHomePage(),<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>&nbsp;<\/p>\n<p>class MyHomePage extends StatelessWidget {<\/p>\n<p>@override<\/p>\n<p>Widget build(BuildContext context) {<\/p>\n<p>return Scaffold(<\/p>\n<p>appBar: AppBar(<\/p>\n<p>title: Text(&#8216;Flutter Applcation Embedded in Website&#8217;),<\/p>\n<p>),<\/p>\n<p>body: Center(<\/p>\n<p>child: Column(<\/p>\n<p>mainAxisAlignment: MainAxisAlignment.center,<\/p>\n<p>children: &lt;Widget&gt;[<\/p>\n<p>Text(<\/p>\n<p>&#8216;The Gist URL to this website is:&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;https:\/\/gist.github.com\/JoseAlba\/a205e21aa0d0a64fe7c977107ce22cbf \\n&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;The Dartpad URL to this website is:&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;https:\/\/dartpad.dev\/a205e21aa0d0a64fe7c977107ce22cbf \\n&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;The iFrame code is:&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;&lt;iframe src=&#8221;https:\/\/dartpad.dev\/embed-flutter.html?id=a205e21aa0d0a64fe7c977107ce22cbf&#8221;&gt;&lt;\/iframe&gt; \\n&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>Text(<\/p>\n<p>&#8216;This Flutter application might be within an iFrame. \\n&#8217;,<\/p>\n<p>textAlign: TextAlign.center,<\/p>\n<p>),<\/p>\n<p>],<\/p>\n<p>),<\/p>\n<p>),<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: center;\">Source: Hosted by <a href=\"https:\/\/gist.githubusercontent.com\/JoseAlba\/a205e21aa0d0a64fe7c977107ce22cbf\/raw\/dd18e557a06a2a6a36909c563ce0a9c3c23f6e5a\/main.dart\" target=\"_blank\" rel=\"nofollow\">Github<\/a><\/p>\n<p>As soon as the <strong>Flutter app is built on DartPad<\/strong>, you can copy-paste it on the new gist file. The new gist file on GitHub can be either Public or Private. Check the file name on your main.dart before sharing code. If you found any errors you can look at <a href=\"https:\/\/github.com\/dart-lang\/dart-pad\/wiki\/Sharing-Guide\" target=\"_blank\" rel=\"nofollow\">DartPad Sharing Guide<\/a>. To test the file, you can check on gist that\u2019s available on DartPad. For DartPad Embed Flutter app, you can get most of the information from <a href=\"https:\/\/github.com\/dart-lang\/dart-pad\/wiki\/Embedding-Guide\" target=\"_blank\" rel=\"nofollow\">DartPad Embedding Guide<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using_a_GitHub_Repo\"><\/span>Using a GitHub Repo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you\u2019re planning to create a repository, then there are few files that you can use.<\/p>\n<ul>\n<li>dartpad_metadata.yaml (MANDATORY)<\/li>\n<li>hint.txt (OPTIONAL)<\/li>\n<li>main.dart (MANDATORY)<\/li>\n<li>solution.dart (OPTIONAL)<\/li>\n<li>test.dart (OPTIONAL)<\/li>\n<\/ul>\n<p>If you have one Dart file, then you need to use dartpad_metadata.yaml and main.dart rest all are optional. Suppose you need to test the file then without using runApp() method, you can test the application. As main. Dart and test.dart considered as a single file.<\/p>\n<p>Moving on, if you want to import the material package from main.dart the use test.dart. DartPad instance will load the file. But to load the folder, you need to have the following access into DartPad.<\/p>\n<ul>\n<li>gh_owner: Owner of the GitHub account.<\/li>\n<li>gh_repo: Name of the repo within the above account.<\/li>\n<li>gh_path: Path to a dartpad_metadata.yaml file within the repo.<\/li>\n<li>gh_ref: (optional) Branch to use when loading the file. Defaults to master.<\/li>\n<\/ul>\n<p>Source:\u00a0<a href=\"https:\/\/medium.com\/flutter\/how-to-embed-a-flutter-application-in-a-website-using-dartpad-b8fd0ee8c4b9\" target=\"_blank\" rel=\"nofollow\">Flutter in DartPad<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span>Final Thoughts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dart is a mobile-friendly object-oriented class and is defined as a garbage collector language. Whereas, DartPad uses Dart language, which helps to embed the <strong>Flutter app on a website<\/strong>. If you\u2019re interested in playing with Flutter. <a href=\"https:\/\/www.concettolabs.com\/flutter-app-development\" target=\"_blank\" rel=\"nofollow\"><strong>Hire flutter app developer<\/strong><\/a> and customize your site.<\/p>\n<style>\n.blog-block-1{background:url(https:\/\/www.concettolabs.com\/blog\/wp-content\/uploads\/2020\/08\/app-development.png);background-position: center;background-repeat: no-repeat;background-size: cover;width:100%;margin: 0 auto;padding: 20px 60px 80px;text-align: center; }.blog-block-1 h3{font-size: 40px;color: #fff;line-height: 60px;text-align:center;}.blog-block-1 p{color: #fff;font-size: 20px;}a.blog-btn-1{padding:10px 30px;background: #fbbf13;color: #fff!important;font-size: 18px;border: 0;cursor: poi<span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span>nter; text-align:center}.blog-block-1 p{text-align:center;color:#fff!important;}<\/style>\n<p>&nbsp;<\/p>\n<div class=\"blog-block-1\">\n<h3><span class=\"ez-toc-section\" id=\"Whats_so_Great_About_DartPad_How_Can_We_Embed_Flutter_App_in_a_Website\"><\/span>What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a class=\"blog-btn-1\" href=\"https:\/\/www.concettolabs.com\/inquiry\" target=\"_blank\" rel=\"nofollow\">Contact Us<\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#How_to_get_started_with_DartPad_Flutter_Online\" title=\"How to get started with DartPad Flutter Online?\">How to get started with DartPad Flutter Online?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#How_to_create_a_command-line_app\" title=\"How to create a command-line app?\">How to create a command-line app?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#Using_a_Gist_File\" title=\"Using a Gist File\">Using a Gist File<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#Using_a_GitHub_Repo\" title=\"Using a GitHub Repo\">Using a GitHub Repo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#Final_Thoughts\" title=\"Final Thoughts\">Final Thoughts<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#Whats_so_Great_About_DartPad_How_Can_We_Embed_Flutter_App_in_a_Website\" title=\"What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?\">What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is a framework that creates a native app for android and iOS. And has now started with the web. This means you can now create a website using Flutter. DartPad an open-source tool allows using Dart language for any modern browser. It comes with several pages on this site especially codelabs that have to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3900,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[1953,1954,1955,1956,1957,1958,1959,1695,1960,1961,1174,1962,1963,1964,1965,1966,1967,1968,1969,973,1970],"class_list":["post-3898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-dart-pad-flutter","tag-dartpad-embed-flutter","tag-dartpad-embed-flutter-app","tag-dartpad-flutter-online","tag-dartpad-for-flutter","tag-dartpad-with-flutter","tag-embed-flutter-app","tag-flutter-app-developer","tag-flutter-app-is-built-on-dartpad","tag-flutter-app-on-a-website","tag-flutter-application","tag-flutter-dartpad","tag-flutter-embed-html","tag-flutter-embed-iframe","tag-flutter-health-app-github","tag-flutter-in-dartpad","tag-flutter-on-dartpad","tag-flutter-online-editor","tag-flutter-pad","tag-hire-flutter-app-developer","tag-website-using-flutter"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What About DartPad, How Can We Embed Flutter App in a Website?<\/title>\n<meta name=\"description\" content=\"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What About DartPad, How Can We Embed Flutter App in a Website?\" \/>\n<meta property=\"og:description\" content=\"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/\" \/>\n<meta property=\"og:site_name\" content=\"concettolabs\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/manish.patel.710\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-27T07:05:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manish Patel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/withmanish\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manish Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/\",\"name\":\"What About DartPad, How Can We Embed Flutter App in a Website?\",\"isPartOf\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg\",\"datePublished\":\"2020-05-27T07:05:45+00:00\",\"dateModified\":\"2020-05-27T07:05:45+00:00\",\"author\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9\"},\"description\":\"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.\",\"breadcrumb\":{\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg\",\"contentUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg\",\"width\":1170,\"height\":540,\"caption\":\"Embed Flutter App\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/\",\"name\":\"concettolabs\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9\",\"name\":\"Manish Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png\",\"contentUrl\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png\",\"caption\":\"Manish Patel\"},\"description\":\"Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.\",\"sameAs\":[\"https:\/\/websitelaravel.concettoprojects.com\/blog\",\"https:\/\/www.facebook.com\/manish.patel.710\",\"https:\/\/in.linkedin.com\/in\/manishpatel2509\",\"https:\/\/x.com\/https:\/\/twitter.com\/withmanish\"],\"url\":\"https:\/\/websitelaravel.concettoprojects.com\/blog\/author\/manish-patel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What About DartPad, How Can We Embed Flutter App in a Website?","description":"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"What About DartPad, How Can We Embed Flutter App in a Website?","og_description":"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.","og_url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/","og_site_name":"concettolabs","article_author":"https:\/\/www.facebook.com\/manish.patel.710","article_published_time":"2020-05-27T07:05:45+00:00","og_image":[{"width":1170,"height":540,"url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg","type":"image\/jpeg"}],"author":"Manish Patel","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/withmanish","twitter_misc":{"Written by":"Manish Patel","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/","name":"What About DartPad, How Can We Embed Flutter App in a Website?","isPartOf":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage"},"image":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg","datePublished":"2020-05-27T07:05:45+00:00","dateModified":"2020-05-27T07:05:45+00:00","author":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9"},"description":"DartPad uses Dart language, which helps to embed Flutter app on a website. If you\u2019re interested in playing with Flutter. Hire flutter app developer now.","breadcrumb":{"@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#primaryimage","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg","contentUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/05\/DARTPAD-FLUTTER-2.jpg","width":1170,"height":540,"caption":"Embed Flutter App"},{"@type":"BreadcrumbList","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/whats-about-dartpad-how-can-we-embed-a-flutter-app-in-a-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/websitelaravel.concettoprojects.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What\u2019s so Great About DartPad, How Can We Embed Flutter App in a Website?"}]},{"@type":"WebSite","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#website","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/","name":"concettolabs","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/websitelaravel.concettoprojects.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/b27e0500ea2f536f7f0f5e7ab13566b9","name":"Manish Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitelaravel.concettoprojects.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png","contentUrl":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2022\/03\/manish2-96x96.png","caption":"Manish Patel"},"description":"Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.","sameAs":["https:\/\/websitelaravel.concettoprojects.com\/blog","https:\/\/www.facebook.com\/manish.patel.710","https:\/\/in.linkedin.com\/in\/manishpatel2509","https:\/\/x.com\/https:\/\/twitter.com\/withmanish"],"url":"https:\/\/websitelaravel.concettoprojects.com\/blog\/author\/manish-patel\/"}]}},"_links":{"self":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts\/3898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/comments?post=3898"}],"version-history":[{"count":0,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/posts\/3898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/media\/3900"}],"wp:attachment":[{"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/media?parent=3898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/categories?post=3898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-json\/wp\/v2\/tags?post=3898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}