CINXE.COM
Flutter on the Web
<!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> Flutter on the Web </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="Flutter鈥檚 web support combines the power of the web and the flexibility of Flutter to reach more users with the same experience in the browser as on mobile devices."/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter on the Web"> <meta property="og:url" content="//flutter.dev/multi-platform/web/"> <meta property="og:description" content="Flutter鈥檚 web support combines the power of the web and the flexibility of Flutter to reach more users with the same experience in the browser as on mobile devices."> <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 web" 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>Flutter on the Web</h1> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/08fffc930eee0a035ef1.png" alt="Flutter on Web"> </div> </div> <h2>Easily reach more users in browsers with the same experience as on mobile devices through the power of Flutter on the web.</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>Shared codebase</h3> <p>Share your Dart code between mobile and web applications; web is just another device target for your app.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/4be0403a6ec8e57457d1.png" alt="Shared codebase"> </div> <div> <h3>Reach more users</h3> <p>Acquire users beyond app stores without limitations from just a click of a URL in a web browser.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/ad13bfae043ef9f6188e.png" alt="Reach more users"> </div> <div> <h3>Powered by WebAssembly</h3> <p>Ship your app using WebAssembly for an efficient and fast experience on the web.</p> <img src="https://storage.googleapis.com/cms-storage-bucket/099bb68f42d23b6056f5.png" alt="Ship with WebAssembly"> </div> </div> </section> <section> <div class="features container"> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow">Flutter on the Web</h4> <h3>Build better web apps</h3> </hgroup> <p>The web itself is a flexible platform, but Flutter is ideal for building web applications like PWAs or SPAs and bringing your existing mobile app to the web. </p> <a class="btn" href="https://docs.flutter.dev/get-started/web">Learn more</a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/9db01b57fb95256961ee.png" alt="Build better web apps"> </div> </div> </div> </section> <section id="feature-grid" class="module"> <div class="feature-grid container"> <div class="feature-header full"> <hgroup> <h4 class="eyebrow">Resources</h4> <h2>Start learning about Flutter on the web</h2> </hgroup> </div> <div class="feature-grid-features col-2"> <div> <a href="https://flutter.github.io/samples/#?platform=web"> <img src="https://storage.googleapis.com/cms-storage-bucket/see-the-samples.svg" alt="See the samples"> <h3>See the samples <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Reference code examples and sample applications for building Flutter web apps while you learn.</p> </a> </div> <div> <a href="https://www.youtube.com/watch?v=lpnKWK-KEYs"> <img src="https://storage.googleapis.com/cms-storage-bucket/ab6776c7b80cc36b88d6.svg" alt="Watch the video"> <h3>Watch the video <i class="fas fa-arrow-right fa-sm"></i></h3> <p>What's new in Flutter. Learn how WebAssembly works and how it makes Flutter web apps faster.</p> </a> </div> <div> <a href="https://docs.flutter.dev/platform-integration/web"> <img src="https://storage.googleapis.com/cms-storage-bucket/9a785df0a861799fcc58.svg" alt="Get started in docs"> <h3>Get started in docs <i class="fas fa-arrow-right fa-sm"></i></h3> <p>Dig in and start building with more detailed resources for Flutter on the web in docs.</p> </a> </div> <div> <a href="https://docs.flutter.dev/platform-integration/web/wasm"> <img src="https://storage.googleapis.com/cms-storage-bucket/0bd81f4a512e84a7cd84.svg" alt="Learn about WebAssembly support"> <h3>Learn about Wasm support <i class="fas fa-arrow-right fa-sm"></i></h3> <p>See how to deploy your app using WebAssembly and learn more about how it works.</p> </a> </div> </div> </div> </section> <section id="case-studies" class="module carousel-section"> <div class="stacked-header container"> <h2>Case studies</h2> </div> <div class="carousel" x-data="Carousel" x-on:resize.window.debounce.300="onResize"> <div class="carousel-slider" x-ref="slider" x-on:scroll="onScroll"> <div class="story-item"> <a href="/showcase/stage/"> <img alt="Stage Case Study 1@2x.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/Stage_Case_Study_12x.width-635.png" width="635"> <div class="text"> <h3>STAGE</h3> <p>STAGE uses Firebase and Flutter to cut release time in half</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/romwe-fashion-shein/"> <img alt="image 6.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/image_6.width-635.png" width="635"> <div class="text"> <h3>Romwe Fashion</h3> <p>ROMWE improves developer efficiency by 30% with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/tencent-cloud-chat/"> <img alt="case-study.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case-study.width-635.png" width="635"> <div class="text"> <h3>Tencent Cloud Chat</h3> <p>Tencent Cloud Chat increased development efficiency by 77% with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/google-classroom/"> <img alt="Googleclassroom_casestudy.png" height="473" src="https://storage.googleapis.com/cms-storage-bucket/images/Googleclassroom_casestudy.width-635.png" width="635"> <div class="text"> <h3>Google Classroom</h3> <p>Increasing productivity with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/reflectionapp/"> <img alt="Journal Dark Mobile + Desktop.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/Journal_Dark_Mobile__Desktop.width-635.png" width="635"> <div class="text"> <h3>Reflection.app</h3> <p>Reflection.app scales their business with Flutter</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/rive/"> <img alt="case study part 2_Rive.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_2_Rive.width-635.png" width="635"> <div class="text"> <h3>Rive</h3> <p>Rive rewrote their powerful animation tool entirely in Flutter to enable developers to create beautiful, multi-platform illustrations.</p> </div> </a> </div> <div class="story-item"> <a href="/showcase/irobot/"> <img alt="case study part 1_iRobot.png" height="472" src="https://storage.googleapis.com/cms-storage-bucket/images/case_study_part_1_iRobot.width-635.png" width="635"> <div class="text"> <h3>iRobot</h3> <p>iRobot Uses Flutter to Expand Access to Coding</p> </div> </a> </div> </div> <div class="carousel-progress container"> <div class="carousel-track"> <div class="carousel-completed" x-ref="progress"></div> </div> <div class="carousel-nav"> <a href="#" class="disabled" x-ref="prevBtn" @click.prevent="navigate($event, 'bwd')"> <i class="far fa-arrow-alt-circle-left fa-2x"></i> </a> <a href="#" class="disabled" x-ref="nextBtn" @click.prevent="navigate($event, 'fwd')"> <i class="far fa-arrow-alt-circle-right fa-2x"></i> </a> </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>