CINXE.COM
Flutter - Build apps for any screen
<!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 - Build apps for any screen </title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase."/> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Flutter - Build apps for any screen"> <meta property="og:url" content="//flutter.dev/"> <meta property="og:description" content="Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps 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.d2a5457adec4fe7d8967.css" rel="stylesheet" media="all"> <script async defer src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" data-auto-replace-svg="nest"></script> </head> <body class="home" 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://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d' target='_blank' id='event-bar' > Flutter 3.24 and Dart 3.5 are here. Read the blog. <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-show="!darkMode"/> <img src="https://storage.googleapis.com/cms-storage-bucket/1870bdaf4a9523a10d5b.svg" alt="Flutter" 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" x-data="initSpy(86, hideShowHeaderHome)"> <div class="container"> <h1>Build for any screen</h1> <div class="gallery"> <div class="inner-fixed"> <div class="col col-outer col-left"> <div class="card card-a" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/ab8b95b9e14883037297.png)"> </div> <div class="card card-b" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/32c264af3b738a0d5a5e.png)"> </div> <div class="card card-c" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/42b50a45c3cfd815e2aa.png)"> </div> </div> <div class="col col-center"> <div class="card card-a" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/90e34daecca082eb9b28.png)"> </div> </div> <div class="col col-outer col-right"> <div class="card card-a" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/f3c373924a5075e883cf.png)"> </div> <div class="card card-b" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/4e15fea30ba9d8a14208.png)"> </div> <div class="card card-c" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/389ff8f9e4d6becae73a.png)"> </div> <div class="card card-d" style="background-image:url(https://storage.googleapis.com/cms-storage-bucket/b8bd15d096f0557123b1.jpg)"> </div> </div> </div> </div> <h2>Flutter transforms the development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded experiences from a single codebase.</h2> <a id="get-started__home-hero-bottom" href="https://docs.flutter.dev/get-started/install" class="btn white">Get started</a> </div> </section> <section class="content-container" x-data="initSpy(headerOffset, toggleContentActive)"> <section id="notification" class="module"> <div class="notification container"> <div class="notification-message"> <img src="https://storage.googleapis.com/cms-storage-bucket/a40ceb6e5d342207de7b.png" alt="Notification"> <a href="https://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d" target="_blank"> Flutter 3.24 and Dart 3.5 are here. Read the blog. <i class="fas fa-arrow-right fa-sm"></i> </a> </div> <div class="notification-nav"> <span class="active"><a href="#"></a></span> </div> </div> </section> <section id="tabs" class="module" x-data="initSpy(-300)"> <div class="tabs container" x-data="Tabs"> <div class="tabs-header"> <h2>Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.</h2> <div class="tabs-menu"> <ul x-ref="tabs"> <li class="btn" @click="selectTab($event, 'a')">Fast</li> <li class="btn" @click="selectTab($event, 'b')">Productive</li> <li class="btn" @click="selectTab($event, 'c')">Flexible</li> </ul> </div> </div> <div class="tabs-content" x-ref="contents"> <div class="tab-content" x-ref="a"> <div class="media"> <video muted autoplay loop src="https://storage.googleapis.com/cms-storage-bucket/029113ae2cbbcf9493fe.mp4" type="video/mp4"> <img src="https://storage.googleapis.com/cms-storage-bucket/a667e994fc2f3e85de36.png" alt="Fast"> </video> </div> <div class="text"> <h3 class="text-green">Fast</h3> <p>Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.</p> <a class="btn" href="https://dartpad.dev/?id=e66e420f2f0201c772f73819711bf290" target="_blank">Try it in DartPad</a> </div> </div> <div class="tab-content" x-ref="b"> <div class="media"> <video muted autoplay loop src="https://storage.googleapis.com/cms-storage-bucket/31e54d4c95600ffb3a77.mp4" type="video/mp4"> <img src="https://storage.googleapis.com/cms-storage-bucket/cb99531360d0d596bda6.png" alt="Productive"> </video> </div> <div class="text"> <h3 class="text-violet">Productive</h3> <p>Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.</p> <a class="btn" href="https://dartpad.dev/?id=bbd3f10c2593f0add04dd770318b33f7" target="_blank">Try it in DartPad</a> </div> </div> <div class="tab-content" x-ref="c"> <div class="media"> <video muted autoplay loop src="https://storage.googleapis.com/cms-storage-bucket/80b7a7ee6bbad2d2d7f8.mp4" type="video/mp4"> <img src="https://storage.googleapis.com/cms-storage-bucket/8faa27fce97470a6fa42.png" alt="Flexible"> </video> </div> <div class="text"> <h3 class="text-coral">Flexible</h3> <p>Control every pixel to create customized, adaptive designs that look and feel great on any screen.</p> <a class="btn" href="https://dartpad.dev/?id=1ab1b78a18039bbbd5cfbb4b835b5b8d" target="_blank">Try it in DartPad</a> </div> </div> </div> </div> </section> <section id="featured"> <div class="features container"> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow text-blue">Multi-Platform</h4> <h3>Reach users on every screen</h3> </hgroup> <p>Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.</p> <a class="btn" href="/multi-platform">See the target platforms</a> </div> <div class="media"> <img alt="Multi-Platform" src="https://storage.googleapis.com/cms-storage-bucket/ed2e069ee37807f5975a.jpg"> </div> </div> <div class="feature reverse nospy"> <div class="text"> <hgroup> <h4 class="eyebrow text-green">Developer Experience</h4> <h3>Transform your workflow</h3> </hgroup> <p>Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.</p> <a class="btn" href="/development">Flutter for developers</a> </div> <div class="media"> <img alt="Developer Experience" src="https://storage.googleapis.com/cms-storage-bucket/75c5b74c32dfd7b7e8f3.jpg"> </div> </div> <div class="feature nospy"> <div class="text"> <hgroup> <h4 class="eyebrow text-coral">Stable & Reliable</h4> <h3>Trusted by many</h3> </hgroup> <p>Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.</p> <a class="btn" href="/ecosystem">Explore the ecosystem</a> </div> <div class="media"> <img alt="Ecosystem" src="https://storage.googleapis.com/cms-storage-bucket/3461c6a5b33c339001c5.jpg"> </div> </div> <div class="feature reverse nospy"> <div class="text"> <hgroup> <h4 class="eyebrow text-violet">Flutter and Google</h4> <h3>Seamless integration with Google services</h3> </hgroup> <p>Connect to Google's app development ecosystem, allowing you to streamline development and reach a wider audience through seamless integration with Firebase, Google Ads, Google Play, Google Pay, Google Wallet, Google Maps, and more.</p> <a class="btn" href="/google-integrations">Explore Google integrations</a> </div> <div class="media"> <img alt="Seamless Integrations" src="https://storage.googleapis.com/cms-storage-bucket/9abb63d8732b978c7ea1.png"> </div> </div> </div> </section> <br/> <section id="developer-story" class="module"> <div class="insert developer-story-insert container"> <div class="text"> <h4 class="eyebrow">Developer Story</h4> <h3>See how Google Pay uses Flutter to change the world of mobile payments</h3> <a href="/showcase/google-pay" class="btn quiet collapsed">Read story <i class="fas fa-arrow-right fa-sm"></i> </a> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/17b428191082bb916954.png" alt="Google Pay Developer Story"> </div> </div> </section> <section id="community" class="module"> <div class="container"> <div class="logo-garden"> <div class="inner-fixed"> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/026e9dc31ddab22dde07.svg" alt="Abbey Road"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/c1000ff9421405743627.svg" alt="Alibaba"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/65e30624efb7a782550a.svg" alt="BMW"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/f777219d6581e15d8eeb.svg" alt="Byte Dance"></div> </div> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/def11a7e7d20e91d5ef9.svg" alt="Capitalone"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/8e2858e92284b9d64bc9.svg" alt="Dream11"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/d10d50462c35626a2ed8.svg" alt="Ebay"></div> </div> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/82de7f0e24cb515bda86.svg" alt="Emaar"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/f3e315ddcd534a574bb5.svg" alt="Grab"></div> </div> <div class="logo-col logo-centerpiece"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/0b591100c77c7f332b7f.svg" alt="Google"></div> </div> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/0935a9aa643a1a19b3cd.svg" alt="Groupon"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/6769550706195145726c.svg" alt="Toyota"></div> </div> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/a95814af82f794458f82.svg" alt="MGM"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/ca52c4bd71327451166b.svg" alt="Nubank"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/755432d87de85ced1687.svg" alt="NY Times"></div> </div> <div class="logo-col"> <div><img src="https://storage.googleapis.com/cms-storage-bucket/3d2c4bdcf7c2b402aaf8.png" alt="Philips Hue"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/05719422f9c40930b2e6.svg" alt="Sonos"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/b2f75154dc7faecd4e47.svg" alt="Square"></div> <div><img src="https://storage.googleapis.com/cms-storage-bucket/d67e0d9ef41c618324b3.svg" alt="Tencent"></div> </div> </div> </div> <div class="text"> <hgroup> <h4 class="eyebrow">A Global Open Source Community</h4> <h2>Supported by Google, open to everyone</h2> </hgroup> <p>Collaborate on the open source framework, contribute to the package ecosystem on pub.dev, and find help when you need it.</p> <div> <a class="btn" href="/showcase">Learn more</a> <a class="btn quiet" href="/community"> Join the community <i class="fas fa-arrow-right fa-sm"></i> </a> </div> </div> </div> </section> <section id="dart" class="module"> <div class="insert dart-insert container"> <div class="text"> <h4 class="eyebrow">Dart</h4> <h3>Flutter is powered by Dart, a language optimized for fast apps on any platform</h3> <div> <a href="https://dart.dev" class="btn" target="_blank">Visit dart.dev</a> <a href="https://pub.dev" class="btn quiet" target="_blank">Get packages <i class="fas fa-arrow-right fa-sm"></i> </a> </div> </div> <div class="media"> <img src="https://storage.googleapis.com/cms-storage-bucket/ea027b4b573d9e8acfdc.svg" alt="Powered by Dart"> </div> </div> </section> <section id="news" class="module carousel-section"> <div class="container"> <h2>Latest news</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="carousel-card"> <a href="https://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d" target="_blank"> <img alt="Flutter324_Still_V2.png" height="357" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter324_Still_V2.width-635.png" width="635"> <h4>Announcing Flutter 3.24 and Dart 3.5</h4> <a href="https://medium.com/flutter/flutter-3-24-dart-3-5-204b7d20c45d" target="_blank"> Read more <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="carousel-card-bg"></div> </a> </div> <div class="carousel-card"> <a href="https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4" target="_blank"> <img alt="Flutter_324_Header_v01.png" height="357" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_324_Header_v01.width-635.png" width="635"> <h4>What鈥檚 new in Flutter 3.24</h4> <a href="https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4" target="_blank"> Read more <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="carousel-card-bg"></div> </a> </div> <div class="carousel-card"> <a href="https://medium.com/dartlang/dart-3-5-6ca36259fa2f" target="_blank"> <img alt="Dart_3_5_horizontal_v01.png" height="357" src="https://storage.googleapis.com/cms-storage-bucket/images/Dart_3_5_horizontal_v01.width-635.png" width="635"> <h4>Announcing Dart 3.5</h4> <a href="https://medium.com/dartlang/dart-3-5-6ca36259fa2f" target="_blank"> Read more <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="carousel-card-bg"></div> </a> </div> <div class="carousel-card"> <a href="https://medium.com/flutter/getting-started-with-flutter-gpu-f33d497b7c11" target="_blank"> <img alt="Flutter_gpu.webp" height="474" src="https://storage.googleapis.com/cms-storage-bucket/images/Flutter_gpu.width-635.png" width="635"> <h4>Getting started with Flutter GPU</h4> <a href="https://medium.com/flutter/getting-started-with-flutter-gpu-f33d497b7c11" target="_blank"> Read more <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="carousel-card-bg"></div> </a> </div> <div class="carousel-card"> <a href="https://medium.com/@mit.mit/22debd2bbd22" target="_blank"> <img alt="roadmap_image.png" height="341" src="https://storage.googleapis.com/cms-storage-bucket/images/roadmap_image.width-635.png" width="512"> <h4>Sharing Flutter鈥檚 2024 roadmap</h4> <a href="https://medium.com/@mit.mit/22debd2bbd22" target="_blank"> Read more <i class="fas fa-arrow-right fa-sm"></i> </a> <div class="carousel-card-bg"></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="newsletter"> <div class="newsletter container"> <div class="text"> <h2>Join our <br/>newsletter</h2> </div> <div class="form"> <form x-data="Newsletter" x-on:submit="onSubmit($event)"> <fieldset x-show="!submitted"> <h3>Keep up with the latest Flutter news, releases, and more:</h3> <div class="global-error"> <span class="error" x-show="!!errors['unknown']"> There was an unknown error submitting your data. Please try again. </span> </div> <div class="field-wrapper"> <div class="field" x-bind:class="{ 'error': !!errors['email'] }"> <i class="far fa-envelope fa-2x"></i> <label for="email" class="hidden">Email</label> <input type="email" id="email" name="email" placeholder="Enter your email address" x-model="fields.email" x-on:focus="focused = true"> </div> <span class="error" x-show="!!errors['email']" x-text="errors['email']"> </span> </div> <div class="hidden-fields" x-show="focused" x-bind:class="{ 'active': focused }"> <div class="field-grid"> <div class="field-wrapper"> <div class="field" x-bind:class="{ 'error': !!errors['first_name'] }"> <label for="firstname" class="hidden">First name</label> <input type="text" id="firstname" name="firstname" placeholder="First name" x-model="fields.first_name"> </div> <span class="error" x-show="!!errors['first_name']" x-text="errors['first_name']"> </span> </div> <div class="field-wrapper"> <div class="field" x-bind:class="{ 'error': !!errors['last_name'] }"> <label for="lastname" class="hidden">Last name</label> <input type="text" id="lastname" name="lastname" placeholder="Last name" x-model="fields.last_name"> </div> <span class="error" x-show="!!errors['last_name']" x-text="errors['last_name']"> </span> </div> </div> <div class="field-wrapper"> <div class="field" x-bind:class="{ 'error': !!errors['country'] }"> <label for="country" class="hidden">Country</label> <select name="countries" id="country" x-model="fields.country"> <option value="" disabled selected>Country</option> <option value="US">United States of America</option> <option value="AF">Afghanistan</option> <option value="AX">脜land Islands</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AG">Antigua and Barbuda</option> <option value="AR">Argentina</option> <option value="AM">Armenia</option> <option value="AW">Aruba</option> <option value="AU">Australia</option> <option value="AT">Austria</option> <option value="AZ">Azerbaijan</option> <option value="BS">Bahamas</option> <option value="BH">Bahrain</option> <option value="BD">Bangladesh</option> <option value="BB">Barbados</option> <option value="BY">Belarus</option> <option value="BE">Belgium</option> <option value="BZ">Belize</option> <option value="BJ">Benin</option> <option value="BM">Bermuda</option> <option value="BT">Bhutan</option> <option value="BO">Bolivia</option> <option value="BQ">Bonaire, Sint Eustatius and Saba</option> <option value="BA">Bosnia and Herzegovina</option> <option value="BW">Botswana</option> <option value="BV">Bouvet Island</option> <option value="BR">Brazil</option> <option value="IO">British Indian Ocean Territory</option> <option value="BN">Brunei</option> <option value="BG">Bulgaria</option> <option value="BF">Burkina Faso</option> <option value="BI">Burundi</option> <option value="CV">Cabo Verde</option> <option value="KH">Cambodia</option> <option value="CM">Cameroon</option> <option value="CA">Canada</option> <option value="KY">Cayman Islands</option> <option value="CF">Central African Republic</option> <option value="TD">Chad</option> <option value="CL">Chile</option> <option value="CN">China</option> <option value="CX">Christmas Island</option> <option value="CC">Cocos (Keeling) Islands</option> <option value="CO">Colombia</option> <option value="KM">Comoros</option> <option value="CG">Congo</option> <option value="CD">Congo (the Democratic Republic of the)</option> <option value="CK">Cook Islands</option> <option value="CR">Costa Rica</option> <option value="CI">C么te d'Ivoire</option> <option value="HR">Croatia</option> <option value="CU">Cuba</option> <option value="CW">Cura莽ao</option> <option value="CY">Cyprus</option> <option value="CZ">Czechia</option> <option value="DK">Denmark</option> <option value="DJ">Djibouti</option> <option value="DM">Dominica</option> <option value="DO">Dominican Republic</option> <option value="EC">Ecuador</option> <option value="EG">Egypt</option> <option value="SV">El Salvador</option> <option value="GQ">Equatorial Guinea</option> <option value="ER">Eritrea</option> <option value="EE">Estonia</option> <option value="SZ">Eswatini</option> <option value="ET">Ethiopia</option> <option value="FK">Falkland Islands (Malvinas)</option> <option value="FO">Faroe Islands</option> <option value="FJ">Fiji</option> <option value="FI">Finland</option> <option value="FR">France</option> <option value="GF">French Guiana</option> <option value="PF">French Polynesia</option> <option value="TF">French Southern Territories</option> <option value="GA">Gabon</option> <option value="GM">Gambia</option> <option value="GE">Georgia</option> <option value="DE">Germany</option> <option value="GH">Ghana</option> <option value="GI">Gibraltar</option> <option value="GR">Greece</option> <option value="GL">Greenland</option> <option value="GD">Grenada</option> <option value="GP">Guadeloupe</option> <option value="GU">Guam</option> <option value="GT">Guatemala</option> <option value="GG">Guernsey</option> <option value="GN">Guinea</option> <option value="GW">Guinea-Bissau</option> <option value="GY">Guyana</option> <option value="HT">Haiti</option> <option value="HM">Heard Island and McDonald Islands</option> <option value="VA">Holy See</option> <option value="HN">Honduras</option> <option value="HK">Hong Kong</option> <option value="HU">Hungary</option> <option value="IS">Iceland</option> <option value="IN">India</option> <option value="ID">Indonesia</option> <option value="IR">Iran</option> <option value="IQ">Iraq</option> <option value="IE">Ireland</option> <option value="IM">Isle of Man</option> <option value="IL">Israel</option> <option value="IT">Italy</option> <option value="JM">Jamaica</option> <option value="JP">Japan</option> <option value="JE">Jersey</option> <option value="JO">Jordan</option> <option value="KZ">Kazakhstan</option> <option value="KE">Kenya</option> <option value="KI">Kiribati</option> <option value="KW">Kuwait</option> <option value="KG">Kyrgyzstan</option> <option value="LA">Laos</option> <option value="LV">Latvia</option> <option value="LB">Lebanon</option> <option value="LS">Lesotho</option> <option value="LR">Liberia</option> <option value="LY">Libya</option> <option value="LI">Liechtenstein</option> <option value="LT">Lithuania</option> <option value="LU">Luxembourg</option> <option value="MO">Macao</option> <option value="MG">Madagascar</option> <option value="MW">Malawi</option> <option value="MY">Malaysia</option> <option value="MV">Maldives</option> <option value="ML">Mali</option> <option value="MT">Malta</option> <option value="MH">Marshall Islands</option> <option value="MQ">Martinique</option> <option value="MR">Mauritania</option> <option value="MU">Mauritius</option> <option value="YT">Mayotte</option> <option value="MX">Mexico</option> <option value="FM">Micronesia (Federated States of)</option> <option value="MD">Moldova</option> <option value="MC">Monaco</option> <option value="MN">Mongolia</option> <option value="ME">Montenegro</option> <option value="MS">Montserrat</option> <option value="MA">Morocco</option> <option value="MZ">Mozambique</option> <option value="MM">Myanmar</option> <option value="NA">Namibia</option> <option value="NR">Nauru</option> <option value="NP">Nepal</option> <option value="NL">Netherlands</option> <option value="NC">New Caledonia</option> <option value="NZ">New Zealand</option> <option value="NI">Nicaragua</option> <option value="NE">Niger</option> <option value="NG">Nigeria</option> <option value="NU">Niue</option> <option value="NF">Norfolk Island</option> <option value="KP">North Korea</option> <option value="MK">North Macedonia</option> <option value="MP">Northern Mariana Islands</option> <option value="NO">Norway</option> <option value="OM">Oman</option> <option value="PK">Pakistan</option> <option value="PW">Palau</option> <option value="PS">Palestine, State of</option> <option value="PA">Panama</option> <option value="PG">Papua New Guinea</option> <option value="PY">Paraguay</option> <option value="PE">Peru</option> <option value="PH">Philippines</option> <option value="PN">Pitcairn</option> <option value="PL">Poland</option> <option value="PT">Portugal</option> <option value="PR">Puerto Rico</option> <option value="QA">Qatar</option> <option value="RE">R茅union</option> <option value="RO">Romania</option> <option value="RU">Russia</option> <option value="RW">Rwanda</option> <option value="BL">Saint Barth茅lemy</option> <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option> <option value="KN">Saint Kitts and Nevis</option> <option value="LC">Saint Lucia</option> <option value="MF">Saint Martin (French part)</option> <option value="PM">Saint Pierre and Miquelon</option> <option value="VC">Saint Vincent and the Grenadines</option> <option value="WS">Samoa</option> <option value="SM">San Marino</option> <option value="ST">Sao Tome and Principe</option> <option value="SA">Saudi Arabia</option> <option value="SN">Senegal</option> <option value="RS">Serbia</option> <option value="SC">Seychelles</option> <option value="SL">Sierra Leone</option> <option value="SG">Singapore</option> <option value="SX">Sint Maarten (Dutch part)</option> <option value="SK">Slovakia</option> <option value="SI">Slovenia</option> <option value="SB">Solomon Islands</option> <option value="SO">Somalia</option> <option value="ZA">South Africa</option> <option value="GS">South Georgia and the South Sandwich Islands</option> <option value="KR">South Korea</option> <option value="SS">South Sudan</option> <option value="ES">Spain</option> <option value="LK">Sri Lanka</option> <option value="SD">Sudan</option> <option value="SR">Suriname</option> <option value="SJ">Svalbard and Jan Mayen</option> <option value="SE">Sweden</option> <option value="CH">Switzerland</option> <option value="SY">Syria</option> <option value="TW">Taiwan</option> <option value="TJ">Tajikistan</option> <option value="TZ">Tanzania</option> <option value="TH">Thailand</option> <option value="TL">Timor-Leste</option> <option value="TG">Togo</option> <option value="TK">Tokelau</option> <option value="TO">Tonga</option> <option value="TT">Trinidad and Tobago</option> <option value="TN">Tunisia</option> <option value="TR">Turkey</option> <option value="TM">Turkmenistan</option> <option value="TC">Turks and Caicos Islands</option> <option value="TV">Tuvalu</option> <option value="UG">Uganda</option> <option value="UA">Ukraine</option> <option value="AE">United Arab Emirates</option> <option value="GB">United Kingdom</option> <option value="UM">United States Minor Outlying Islands</option> <option value="US">United States of America</option> <option value="UY">Uruguay</option> <option value="UZ">Uzbekistan</option> <option value="VU">Vanuatu</option> <option value="VE">Venezuela</option> <option value="VN">Vietnam</option> <option value="VG">Virgin Islands (British)</option> <option value="VI">Virgin Islands (U.S.)</option> <option value="WF">Wallis and Futuna</option> <option value="EH">Western Sahara</option> <option value="YE">Yemen</option> <option value="ZM">Zambia</option> <option value="ZW">Zimbabwe</option> </select> </div> <span class="error" x-show="!!errors['country']" x-text="errors['country']"> </span> </div> <div class="field-wrapper"> <div class="checkbox opt-in"> <div class="field" x-bind:class="{ 'error': !!errors['optin'] }"> <input type="checkbox" name="optin" id="optin" x-model="fields.optin"> </div> <label for="optin" class="optin"> By using this service, you agree to be bound by our <a href="https://policies.google.com/terms">Google Terms of Service</a>. I acknowledge that the information provided in this form will be subject to <a href="https://policies.google.com/privacy">Google's Privacy Policy</a>. </label> </div> <span class="error" x-show="!!errors['optin']" x-text="errors['optin']"> </div> <div class="captcha-container field-wrapper"> <div class="g-recaptcha" data-sitekey="6LdG504kAAAAAPZGIhZd_--CkTASNKaW64oMriCL" x-model="fields.captcha" x-bind:class="{ 'error': !!errors['captcha'] }" > </div> <span class="error" x-show="!!errors['captcha']" x-text="errors['captcha']"> </span> </div> <div> <input type="submit" class="btn primary" value="Subscribe"> </div> </div> </fieldset> <div class="success" x-show="submitted"> <h3>You're in!</h3> <p>You have successfully signed up for the latest Flutter updates and announcements.</p> </div> </form> </div> </div> <script src="https://www.google.com/recaptcha/api.js"></script> </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> <!-- <script src="assets/js/rss-parser.min.js"></script> --> </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.975bb47d6cdf5b83c693.js"></script> </body> </html>