CINXE.COM
Multi-Platform
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" /> <link rel="apple-touch-icon" href="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" /> <title> Multi-Platform </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="Flutter allows you to build apps for mobile, web, desktop, and embedded devices — all from a single codebase."/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Multi-Platform"> <meta property="og:url" content="//flutter.dev/multi-platform/"> <meta property="og:description" content="Flutter allows you to build apps for mobile, web, desktop, and embedded devices — all from a single codebase."> <meta property="og:image" content="https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png"> <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" /> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-ND4LWWZ'); </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67589403-1', 'auto'); ga('send', 'pageview'); </script> <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,700" rel="stylesheet" media="all"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" media="all"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css" rel="stylesheet"> <link href="https://storage.googleapis.com/cms-storage-bucket/main.abd603ab7472199617c4.css" rel="stylesheet" media="all"> <style> [x-cloak] { display: none !important; } </style> <script async defer src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" data-auto-replace-svg="nest"></script> </head> <body class="interior multiplatform" x-data="ScrollSpy" x-on:scroll.window="onScroll" x-bind:class="{ 'in-content': $store.spy.inContent }"> <header role="banner" x-data="Header()" class="page-header" x-bind:class="{ 'hide': !navOpen && $store.spy.inHomeHero, 'mobile': isMobile, 'mobile-nav-open': navOpen, 'searching': searchActive, 'header-dark': window.location.href.includes('games'), 'header-light': window.location.href.indexOf('games') === -1, }" x-on:resize.window.debounce.200="onResize" > <a class='event-bar' href='https://io.google/2025/register?utm_source=flutter&utm_medium=embedded_marketing&utm_campaign=svd&utm_content=' target='_blank' id='event-bar' > Flutter is back at Google I/O on May 20-21! <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="content" x-data="{ darkMode: window.location.href.includes('games') }"> <div> <div class="logo logo-white"> <a href="/"> <img src="https://storage.googleapis.com/cms-storage-bucket/ec64036b4eacc9f3fd73.svg" alt="Flutter" /> </a> </div> <div class="logo logo-normal"> <a href="/"> <img src="https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg" alt="Flutter" x-cloak x-show="!darkMode"/> <img src="https://storage.googleapis.com/cms-storage-bucket/1870bdaf4a9523a10d5b.svg" alt="Flutter" x-cloak x-show="darkMode"/> </a> </div> </div> <div class="tray"> <nav role="navigation"> <ul> <li> <a href="/multi-platform" class="btn top-level" @click="handleMobileClick($event)" > Multi-Platform <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/multi-platform">Overview</a> </li> <li> <a class="btn" href="/multi-platform/mobile">Mobile</a> <ul> <li> <a class="btn subMenu" href="/multi-platform/ios">Flutter on iOS</a> </li> </ul> </li> <li><a class="btn" href="/multi-platform/web">Web</a></li> <li> <a class="btn" href="/multi-platform/desktop">Desktop</a> </li> <li> <a class="btn" href="/multi-platform/embedded">Embedded</a> </li> </ul> </div> </li> <li> <a href="/development" class="btn top-level" @click="handleMobileClick($event)" > Development <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/development">Overview</a> </li> <li><a class="btn" href="/learn">Learn</a></li> <li> <a class="btn" href="https://docs.flutter.dev/development/packages-and-plugins/favorites" target="_blank" >Flutter Favorites</a > </li> <li> <a class="btn" href="https://pub.dev" target="_blank" >Packages</a > </li> <li> <a class="btn" href="/ai"> AI </a> </li> <li><a class="btn" href="/google-integrations">Google Integrations</a></li> <li><a class="btn" href="/monetization">Monetization</a></li> <li><a class="btn" href="/games">Games</a></li> <li><a class="btn" href="/news">News</a></li> </ul> </div> </li> <li> <a href="/ecosystem" class="btn top-level" @click="handleMobileClick($event)" > Ecosystem <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd"> <ul> <li class="mobile-only"> <a class="btn" href="/ecosystem">Overview</a> </li> <li><a class="btn" href="/community">Community</a></li> <li><a class="btn" href="/events">Events</a></li> <li><a class="btn" href="/culture">Culture</a></li> <li><a class="btn" href="/consultants">Consultants</a></li> </ul> </div> </li> <li> <a href="/showcase" class="btn top-level"> Showcase </a> </li> <li> <a href="https://docs.flutter.dev" class="btn top-level" @click="handleMobileClick($event)" > Docs <i class="fas fa-caret-down"></i> </a> <div class="dd-connector"></div> <div class="dd dd-double"> <ul> <li class="mobile-only"> <a class="btn" href="https://docs.flutter.dev">Overview</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/whats-new">What's new</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/get-started/editor" >Editor support</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/development/tools/hot-reload" >Hot reload</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/perf/ui-performance" >Profiling</a > </li> </ul> <ul> <li> <a class="btn" href="https://docs.flutter.dev/get-started/install" >Install Flutter</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/development/tools/devtools/overview" >DevTools</a > </li> <li> <a class="btn" href="https://docs.flutter.dev/cookbook">Cookbook</a> </li> <li> <a class="btn" href="https://docs.flutter.dev/reference/tutorials" >Tutorials</a > </li> </ul> </div> </li> </ul> </nav> <div class="icon-btn search" x-bind:class="{ 'active': searchActive || navOpen }" > <i class="fas fa-search search-icon" @click="toggleSearch($event)" x-show="!darkMode"> </i> <i class="fas fa-search search-icon" style="color: #f8f9fa;" @click="toggleSearch($event)" x-show="darkMode"> </i> <form action="https://docs.flutter.dev/search"> <input type="search" placeholder="Search..." aria-label="Search" name="q" id="q" autocomplete="off" /> </form> <i class="fas fa-times" @click="toggleSearch($event)" x-show="searchActive" > </i> </div> <a href="https://docs.flutter.dev/get-started/install" id="get-started__header" class="btn" >Get started</a > <div class="icon-btn hamburger" x-show="!navOpen" @click="toggleMobileNav" > <i class="fas fa-bars fa-lg" aria-hidden="true" x-show="!darkMode"></i> <i class="fas fa-bars fa-lg" style="color: #f8f9fa;" aria-hidden="true" x-show="darkMode"></i> </div> <div class="icon-btn close" x-show="navOpen" @click="toggleMobileNav"> <i class="fas fa-times fa-lg"></i> </div> </div> </div> </header> <main> <section class="hero"> <div class="container"> <div class="mantle"> <div class="text"> <h1>Beautiful apps for every screen</h1> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/2d23077f41d09cd07cef.png" alt="Beautiful apps for every screen"> </div> </div> <h2>Flutter allows you to build apps for mobile, web, desktop, and embedded devices — all from a single codebase.</h2> </div> </section> <section class="content-container" x-data="initSpy(headerOffset, toggleContentActive)"> <section id="feature-columns" class="module"> <div class="feature-columns container"> <div> <h3>Single codebase</h3> <p>Maintain one codebase and deploy to multiple platforms, speeding up and simplifying workflows.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/825fd1ab2096da69244e.png" alt="Single codebase"> </div> <div> <h3>Performant by design</h3> <p>Flutter gives you the power of hardware-accelerated graphics for performant apps on any platform.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/7b7d4f050ff2156430c1.png" alt="Performant by design"> </div> <div> <h3>Customize every pixel</h3> <p>The Flutter rendering engine lets you control every pixel, and its widget library automatically adapts to any screen.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/79c527c9ec518598f6c4.svg" alt="Customize every pixel"> </div> </div> </section> <section id="featured"> <div class="features container"> <div class="feature" x-data="initSpy"> <div class="text"> <hgroup> <h4 class="eyebrow">Mobile</h4> <h3>iOS and Android apps</h3> </hgroup> <p>Build features once and deploy to both iOS and Android. Cupertino and Material designs are built into the Flutter framework, so your apps feel at home on both platforms.</p> <a class="btn" href="/multi-platform/mobile">Flutter on mobile</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/f3cfcce36ef135b029b3.jpg" alt="iOS and Android apps"> </div> </div> <div class="feature reverse" x-data="initSpy"> <div class="text"> <hgroup> <h4 class="eyebrow">Web</h4> <h3>Web apps</h3> </hgroup> <p>Reach users everywhere by deploying Flutter apps on the web. Build fast prototypes and deploy your mobile app to the web from the same codebase.</p> <a class="btn" href="/multi-platform/web">Flutter on the web</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/84d91ab110e47d04378d.jpg" alt="Web apps"> </div> </div> <div class="feature" x-data="initSpy"> <div class="text"> <hgroup> <h4 class="eyebrow">Desktop</h4> <h3>Windows, macOS, and Linux apps</h3> </hgroup> <p>Transform your apps into desktop experiences with a single codebase and familiar tooling. Target Windows, macOS, and Linux without rewriting.</p> <a class="btn" href="/multi-platform/desktop">Flutter on desktop</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/ab505c5326e4eab56fdc.jpg" alt="Windows, macOS, and Linux apps"> </div> </div> <div class="feature reverse" x-data="initSpy"> <div class="text"> <hgroup> <h4 class="eyebrow">Embedded</h4> <h3>Flutter apps — anywhere</h3> </hgroup> <p>Create custom solutions with the power and flexibility of Flutter. Deploy anywhere, including smart devices, cars, and more.</p> <a class="btn" href="/multi-platform/embedded">Flutter on embedded devices</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/29afa962e52455a4bada.jpg" alt="Flutter apps - anywhere"> </div> </div> </div> </section> <section id="quote" class="module"> <div class="testimonial container"> <img src="https://storage.googleapis.com/cms-storage-bucket/83dc9d10bbe239f596ee.jpg" role="presentation"> <div class="testimonial-wrapper"> <div class="testimonial-logo"> <img src="https://storage.googleapis.com/cms-storage-bucket/d67e0d9ef41c618324b3.svg" alt="Tencent"> </div> <div class="testimonial-quote"> <blockquote> <p>When using Flutter, 90% of the code became multi-platform and only needed to be updated once.</p> </blockquote> <div class="sep"></div> <span rel="author">Fei Song</span><br/> <span rel="company">Senior Software Engineer, Tencent</span> </div> </div> </div> </section> <section id="cta" class="module"> <div class="insert cta-insert container"> <div class="text"> <h3>Get started</h3> <p>Instant access to the power of the Flutter framework</p> <div> <a href="https://docs.flutter.dev/get-started/install" class="btn"> Install </a> <a href="https://docs.flutter.dev" class="btn quiet"> Read the docs <i class="fas fa-arrow-right fa-sm"></i> </a> </div> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/72521e62275b24d3c37d.png" alt="Powered by Dart"> </div> </div> </section> </section> </main> <footer x-data="{ darkMode: window.location.href.includes('games') }" :class="window.location.href.includes('games') ? 'footer-dark' : 'footer-light'"> <div class="content footer-main"> <div class="logo"> <a href="/"> <img x-show="!darkMode" src="https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg" width="154" alt="Flutter" /> <img x-show="darkMode" src="https://storage.googleapis.com/cms-storage-bucket/1870bdaf4a9523a10d5b.svg" width="154" alt="Flutter" /> </a> </div> <div class="footer-links"> <ul> <li>About Flutter</li> <li> <a href="https://docs.flutter.dev/jobs" target="_blank">Careers</a> </li> <li><a href="https://medium.com/flutter" target="_blank">News</a></li> <li><a href="/brand">Brand</a></li> <li><a href="/culture">Culture</a></li> </ul> <ul> <li>Learn Flutter</li> <li><a href="/learn" target="_blank">Learning Journey</a></li> <li><a href="https://docs.flutter.dev/codelabs" target="_blank">Codelabs</a></li> <li> <a href="https://flutter.github.io/samples" target="_blank" >Samples</a > </li> <li><a href="https://docs.flutter.dev/cookbook" target="_blank">Cookbook</a></li> </ul> <ul> <li>Multi-Platform</li> <li><a href="/multi-platform/mobile">Mobile</a></li> <li><a href="/multi-platform/web">Web</a></li> <li><a href="/multi-platform/desktop">Desktop</a></li> <li><a href="/multi-platform/embedded">Embedded</a></li> <li><a href="/multi-platform/ios">iOS</a></li> </ul> </div> </div> <div class="content footer-social"> <div> <a href="https://www.youtube.com/flutterdev" target="_blank" aria-label="Flutter YouTube" > <i class="fab fa-youtube fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-youtube fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://twitter.com/flutterdev" target="_blank" aria-label="Flutter Twittter" > <i class="fab fa-x-twitter fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-x-twitter fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://github.com/flutter" target="_blank" aria-label="Flutter Github" > <i class="fab fa-github fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-github fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://medium.com/flutter" target="_blank" aria-label="Flutter Medium" > <i class="fab fa-medium fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-medium fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://www.meetup.com/pro/flutter/" target="_blank" aria-label="Flutter Meetup" > <i class="fab fa-meetup fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-meetup fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> <a href="https://www.linkedin.com/showcase/flutterdevofficial/" target="_blank" aria-label="Flutter LinkedIn" > <i class="fab fa-linkedin fa-lg" x-show="!darkMode"></i> <i class="fa-brands fa-linkedin fa-lg" style="color: #e8eaed;" x-show="darkMode"></i> </a> </div> </div> <div class="content footer-tray"> <div> Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the BSD License. </div> <div> <ul> <li><a href="https://docs.flutter.dev/tos">Terms</a></li> <li> <a href="https://policies.google.com/privacy?hl=en" target="_blank" >Privacy</a > </li> <li><a href="https://docs.flutter.dev/security">Security</a></li> </ul> </div> </div> </footer> <script src="https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2A" data-glue-cookie-notification-bar-site-id="flutter.dev" ></script> <section class="cookie-snack" x-data="Snack" x-bind:class="{ 'show': !agreed && window.location.href.includes('consultants') }"> <div class="container"> <p>NOTICE: Flutter hopes this directory is useful for customers seeking consultants with Flutter experience; however, Flutter makes no representation to you or anyone else that the listed consultants are Flutter or Google partners, and Flutter does not represent or warrant their qualifications or the quality of services you may receive. Your relationship is strictly between you and the consultants.</p> <button @click.prevent="dismiss" class="solid">Okay</button> </div> </section> <script src="https://storage.googleapis.com/cms-storage-bucket/main.9a862e2d420586ef99e8.js"></script> </body> </html>