CINXE.COM

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>FAQ | Flutter</title><link rel="icon" href="/assets/images/branding/flutter/icon/64.png" eleventy:ignore><link rel="apple-touch-icon" href="/assets/images/branding/flutter/logo/flutter-logomark-320px.png" eleventy:ignore><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4"><script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-ND4LWWZ",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script><script>!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-67589403-1","auto"),ga("send","pageview")</script><meta name="description" content="Frequently asked questions and answers about Flutter."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@flutterdev"><meta property="og:title" content="FAQ"><meta property="og:url" content="https://docs.flutter.dev/resources/faq"><meta property="og:description" content="Frequently asked questions and answers about Flutter."><meta property="og:image" content="https://docs.flutter.dev/assets/images/flutter-logo-sharing.png" eleventy:ignore><link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Google+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"><script>window.__CALLBACKS=[]</script><link rel="stylesheet" href="/assets/css/main.css?v=4"></head><body><section id="cookie-notice"><div class="container"><p>docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.</p><button id="cookie-consent" class="filled-button">OK, got it</button></div></section><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div id="site-banner" role="alert"><p>Flutter 3.29 is here with a bouquet of performance and fidelity improvements for your apps! <a href="https://medium.com/flutter/whats-new-in-flutter-3-29-f90c380c2317">Learn more</a><br></p></div><header class="site-header"><a href="#document-title" id="skip-to-main" class="filled-button" tabindex="1">Skip to main content</a><nav class="navbar"><div id="site-switcher" class="dropdown"><button class="dropdown-button site-wordmark" aria-expanded="false" aria-controls="site-switcher-menu" aria-label="Switch between Flutter and Dart sites"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span> <span class="material-symbols" aria-hidden="true">unfold_more</span></button><div class="dropdown-content" id="site-switcher-menu"><nav class="dropdown-menu" role="menu"><ul><li role="presentation"><a href="https://flutter.dev" class="site-wordmark" role="menuitem" title="Flutter homepage" aria-label="Go to the Flutter homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span></a></li><li role="presentation"><a href="https://docs.flutter.dev" class="site-wordmark current-site" role="menuitem" aria-current="true" title="Flutter docs homepage" aria-label="Go to the Flutter docs homepage"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">Docs</span></a></li><li role="presentation"><a href="https://api.flutter.dev" class="site-wordmark" role="menuitem" title="Flutter API reference" aria-label="Go to the Flutter API reference"><img src="/assets/images/branding/flutter/logo/default.svg" alt="Flutter logo" width="28"> <span>Flutter</span> <span class="subtype">API</span></a></li><li aria-hidden="true" class="dropdown-divider" role="separator"></li><li role="presentation"><a href="https://dart.dev" class="site-wordmark" role="menuitem" title="Dart homepage" aria-label="Go to the Dart homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>Dart</span></a></li><li role="presentation"><a href="https://dartpad.dev" class="site-wordmark" role="menuitem" title="DartPad playground" aria-label="Go to the DartPad playground"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>DartPad</span></a></li><li role="presentation"><a href="https://pub.dev" class="site-wordmark" role="menuitem" title="pub.dev homepage" aria-label="Go to the pub.dev homepage"><img src="/assets/images/branding/dart/logo.svg" alt="Dart logo" width="28" height="28"> <span>pub.dev</span></a></li></ul></nav></div></div><div class="navbar-contents"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="https://flutter.dev">Homepage</a></li><li class="nav-item"><a class="nav-link" href="https://flutter.dev/community">Community</a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev">Packages</a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev">API reference</a></li></ul><form action="/search/" class="site-header__search"><input class="site-header__searchfield search-field" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"></form><a href="/search" id="fallback-search-button" class="icon-button" aria-label="Navigate to the docs search page." title="Navigate to the docs search page."><span class="material-symbols" aria-hidden="true">search</span> </a><a id="call-to-action" class="filled-button" href="/get-started/install/">Get started</a> <button id="menu-toggle" class="icon-button" type="button" aria-controls="sidenav" aria-label="Toggle navigation" title="Toggle navigation"><span class="material-symbols" aria-hidden="true">menu</span></button></div></nav></header><div id="site-below-header"><div id="site-main-row"><div id="sidenav" class="site-sidebar"><nav><ul><li class="nav-header">Get started</li><li class="nav-item"><a class="nav-link" href="/get-started/install"><div><span>Set up Flutter</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-3" role="button" aria-expanded="false" aria-controls="sidenav-3"><span>Learn Flutter</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3"><li class="nav-item"><a class="nav-link" href="/get-started/learn-flutter"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/codelab"><div><span>Write your first app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible" data-toggle="collapse" data-target="#sidenav-3-3" role="button" aria-expanded="true" aria-controls="sidenav-3-3"><span>Learn the fundamentals</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-3-3"><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/dart"><div><span>Intro to Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/widgets"><div><span>Widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/layout"><div><span>Layout</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/state-management"><div><span>State management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/user-input"><div><span>Handling user input</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/networking"><div><span>Networking and data</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/fundamentals/local-caching"><div><span>Local data and caching</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-3-4" role="button" aria-expanded="false" aria-controls="sidenav-3-4"><span>From another platform?</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-3-4"><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/android-devs"><div><span>Flutter for Android devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/compose-devs"><div><span>Flutter for Jetpack Compose devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/swiftui-devs"><div><span>Flutter for SwiftUI devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/uikit-devs"><div><span>Flutter for UIKit devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/react-native-devs"><div><span>Flutter for React Native devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/web-devs"><div><span>Flutter for web devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs"><div><span>Flutter for Xamarin.Forms devs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/declarative"><div><span>Introduction to declarative UI</span></div></a></li><li class="nav-item"><a class="nav-link" href="/get-started/flutter-for/dart-swift-concurrency"><div><span>Flutter versus Swift concurrency</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/codelabs"><div><span>Codelabs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook"><div><span>Cookbook</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/samples" target="_blank" rel="noopener"><div><span>Demos and samples</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4"><span>Stay up to date</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-4"><li class="nav-item"><a class="nav-link" href="/release/upgrade"><div><span>Upgrade</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/archive"><div><span>SDK archive</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/release/whats-new"><div><span>What's new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/release-notes"><div><span>Release notes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes"><div><span>Breaking changes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/compatibility-policy"><div><span>Compatibility policy</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5"><span>App solutions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1"><span>AI</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-1-1" role="button" aria-expanded="false" aria-controls="sidenav-5-1-1"><span>AI Toolkit guide</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-1-1"><li class="nav-item"><a class="nav-link" href="/ai-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/user-experience"><div><span>User experience</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/feature-integration"><div><span>Feature integration</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/custom-llm-providers"><div><span>Custom LLM providers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ai-toolkit/chat-client-sample"><div><span>Chat client sample</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=1AuzJEiHjO4" target="_blank" rel="noopener"><div><span>Build with Google AI Dart SDK (video)</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-2" role="button" aria-expanded="false" aria-controls="sidenav-5-2"><span>Firebase & Firestore</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter" target="_blank" rel="noopener"><div><span>Discover Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://www.youtube.com/watch?v=wUSkeTaBonA" target="_blank" rel="noopener"><div><span>Get to know Firebase for Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add a user authentication flow to a Flutter app using FirebaseUI</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-get-to-know-web" target="_blank" rel="noopener"><div><span>Get to know Firebase for web</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-3" role="button" aria-expanded="false" aria-controls="sidenav-5-3"><span>Games</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-3"><li class="nav-item"><a class="nav-link" href="/resources/games-toolkit"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/achievements-leaderboard"><div><span>Add achievements and leaderboards</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0" target="_blank" rel="noopener"><div><span>Build leaderboards with Firestore</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/games/firestore-multiplayer"><div><span>Add multiplayer support</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps" target="_blank" rel="noopener"><div><span>Add user authentication</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/crashlytics/get-started?platform=flutter" target="_blank" rel="noopener"><div><span>Debug using Crashlytics</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker" target="_blank" rel="noopener"><div><span>Intro to Flame with Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4" role="button" aria-expanded="false" aria-controls="sidenav-5-4"><span>Monetization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-1" role="button" aria-expanded="false" aria-controls="sidenav-5-4-1"><span>Advertising</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-1"><li class="nav-item"><a class="nav-link" href="/resources/ads-overview"><div><span>Ads overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/google-mobile-ads"><div><span>Add advertising</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add AdMob ads to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter" target="_blank" rel="noopener"><div><span>Add an AdMob banner and native inline ads</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/admob/flutter/mediation" target="_blank" rel="noopener"><div><span>Google AdMob mediation</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/interactive_media_ads" target="_blank" rel="noopener"><div><span>Interactive Media Ads SDK</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-2" role="button" aria-expanded="false" aria-controls="sidenav-5-4-2"><span>In-app purchases</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-2"><li class="nav-item"><a class="nav-link" href="/resources/in-app-purchases-overview"><div><span>In-app purchases overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases" target="_blank" rel="noopener"><div><span>Add in-app purchases</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-4-3" role="button" aria-expanded="false" aria-controls="sidenav-5-4-3"><span>Payments</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-4-3"><li class="nav-item"><a class="nav-link" href="/resources/payments-overview"><div><span>Payments overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/pay" target="_blank" rel="noopener"><div><span>Google pay package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-5" role="button" aria-expanded="false" aria-controls="sidenav-5-5"><span>Maps</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-5"><li class="nav-item"><a class="nav-link" href="https://codelabs.developers.google.com/codelabs/google-maps-in-flutter" target="_blank" rel="noopener"><div><span>Add Google maps to a Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://developers.google.com/maps/flutter-package" target="_blank" rel="noopener"><div><span>Google Maps package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-5-6" role="button" aria-expanded="false" aria-controls="sidenav-5-6"><span>News</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-5-6"><li class="nav-item"><a class="nav-link" href="/resources/news-toolkit"><div><span>Build a news app</span></div></a></li></ul></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">User interface</li><li class="nav-item"><a class="nav-link" href="/ui"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/widgets"><div><span>Widget catalog</span></div></a></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-10" role="button" aria-expanded="false" aria-controls="sidenav-10"><span>Layout</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10"><li class="nav-item"><a class="nav-link" href="/ui/layout"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/tutorial"><div><span>Build a layout</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-3" role="button" aria-expanded="false" aria-controls="sidenav-10-3"><span>Lists & grids</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-3"><li class="nav-item"><a class="nav-link" href="/cookbook/lists/basic-list"><div><span>Create and use lists</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/horizontal-list"><div><span>Create a horizontal list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/grid-lists"><div><span>Create a grid view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/mixed-list"><div><span>Create lists with different types of items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/spaced-items"><div><span>Create lists with spaced items</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/long-lists"><div><span>Work with long lists</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-10-4" role="button" aria-expanded="false" aria-controls="sidenav-10-4"><span>Scrolling</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-10-4"><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/scrolling/slivers"><div><span>Use slivers to achieve fancy scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/lists/floating-app-bar"><div><span>Place a floating app bar above a list</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/parallax-scrolling"><div><span>Create a scrolling parallax effect</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-11" role="button" aria-expanded="false" aria-controls="sidenav-11"><span>Adaptive & responsive design</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-11"><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/general"><div><span>General approach</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/safearea-mediaquery"><div><span>SafeArea & MediaQuery</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/large-screens"><div><span>Large screens & foldables</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/input"><div><span>User input & accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/capabilities"><div><span>Capabilities & policies</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/platform-adaptations"><div><span>Automatic platform adaptations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/best-practices"><div><span>Best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/adaptive-responsive/more-info"><div><span>Additional resources</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-12" role="button" aria-expanded="false" aria-controls="sidenav-12"><span>Design & theming</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12"><li class="nav-item"><a class="nav-link" href="/cookbook/design/themes"><div><span>Share styles with themes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/design/material"><div><span>Material design</span></div></a></li><li class="nav-item"><a class="nav-link" href="/release/breaking-changes/material-3-migration"><div><span>Migrate to Material 3</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-4" role="button" aria-expanded="false" aria-controls="sidenav-12-4"><span>Text</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-4"><li class="nav-item"><a class="nav-link" href="/ui/design/text/typography"><div><span>Fonts & typography</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/fonts"><div><span>Use a custom font</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/package-fonts"><div><span>Export fonts from a package</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/packages/google_fonts" target="_blank" rel="noopener"><div><span>Google Fonts package</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-12-5" role="button" aria-expanded="false" aria-controls="sidenav-12-5"><span>Custom graphics</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-12-5"><li class="nav-item"><a class="nav-link" href="/ui/design/graphics/fragment-shaders"><div><span>Use custom fragment shaders</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-13" role="button" aria-expanded="false" aria-controls="sidenav-13"><span>Interactivity</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13"><li class="nav-item"><a class="nav-link" href="/ui/interactivity"><div><span>Add interactivity to your app</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-2" role="button" aria-expanded="false" aria-controls="sidenav-13-2"><span>Gestures</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-2"><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/handling-taps"><div><span>Handle taps</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/gestures/drag-outside"><div><span>Drag an object outside an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/drag-a-widget"><div><span>Drag a UI element within an app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/ripples"><div><span>Add Material touch ripples</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/gestures/dismissible"><div><span>Implement swipe to dismiss</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-13-3" role="button" aria-expanded="false" aria-controls="sidenav-13-3"><span>Input & forms</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-13-3"><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-input"><div><span>Create and style a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/retrieve-input"><div><span>Retrieve the value of a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/text-field-changes"><div><span>Handle changes to a text field</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/focus"><div><span>Manage focus in text fields</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/forms/validation"><div><span>Build a form with validation</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/snackbars"><div><span>Display a snackbar</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/actions-and-shortcuts"><div><span>Implement actions & shortcuts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/interactivity/focus"><div><span>Manage keyboard focus</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-14" role="button" aria-expanded="false" aria-controls="sidenav-14"><span>Assets & media</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-14"><li class="nav-item"><a class="nav-link" href="/ui/assets/assets-and-images"><div><span>Add assets and images</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/network-image"><div><span>Display images from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/images/fading-in-images"><div><span>Fade in images with a placeholder</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/plugins/play-video"><div><span>Play and pause a video</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/assets/asset-transformation"><div><span>Transform assets at build time</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-15" role="button" aria-expanded="false" aria-controls="sidenav-15"><span>Navigation & routing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-15"><li class="nav-item"><a class="nav-link" href="/ui/navigation"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/tabs"><div><span>Add tabs to your app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/navigation-basics"><div><span>Navigate to a new screen and back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/passing-data"><div><span>Send data to a new screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/returning-data"><div><span>Return data from a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/design/drawer"><div><span>Add a drawer to a screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/deep-linking"><div><span>Set up deep linking</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-app-links"><div><span>Set up app links for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/navigation/set-up-universal-links"><div><span>Set up universal links for iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/navigation/url-strategies"><div><span>Configure web URL strategies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-16" role="button" aria-expanded="false" aria-controls="sidenav-16"><span>Animations & transitions</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-16"><li class="nav-item"><a class="nav-link" href="/ui/animations"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/tutorial"><div><span>Tutorial</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/implicit-animations"><div><span>Implicit animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/animated-container"><div><span>Animate the properties of a container</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/opacity-animation"><div><span>Fade a widget in and out</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/hero-animations"><div><span>Hero animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/page-route-animation"><div><span>Animate a page route transition</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/animation/physics-simulation"><div><span>Animate using a physics simulation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/staggered-animations"><div><span>Staggered animations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/effects/staggered-menu-animation"><div><span>Create a staggered menu animation</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/animations/overview"><div><span>API overview</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-17" role="button" aria-expanded="false" aria-controls="sidenav-17"><span>Accessibility & internationalization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-17"><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/accessibility"><div><span>Accessibility</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/accessibility-and-internationalization/internationalization"><div><span>Internationalization</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-header">Beyond UI</li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-20" role="button" aria-expanded="false" aria-controls="sidenav-20"><span>Data & backend</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20"><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-1" role="button" aria-expanded="false" aria-controls="sidenav-20-1"><span>State management</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-1"><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/intro"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/declarative"><div><span>Think declaratively</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/ephemeral-vs-app"><div><span>Ephemeral vs app state</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/simple"><div><span>Simple app state management</span></div></a></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/state-mgmt/options"><div><span>Options</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-2" role="button" aria-expanded="false" aria-controls="sidenav-20-2"><span>Networking & http</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-2"><li class="nav-item"><a class="nav-link" href="/data-and-backend/networking"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/fetch-data"><div><span>Fetch data from the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/authenticated-requests"><div><span>Make authenticated requests</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/send-data"><div><span>Send data to the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/update-data"><div><span>Update data over the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/delete-data"><div><span>Delete data on the internet</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/web-sockets"><div><span>Communicate with WebSockets</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-3" role="button" aria-expanded="false" aria-controls="sidenav-20-3"><span>Serialization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-3"><li class="nav-item"><a class="nav-link" href="/data-and-backend/serialization/json"><div><span>JSON serialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/networking/background-parsing"><div><span>Parse JSON in the background</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-4" role="button" aria-expanded="false" aria-controls="sidenav-20-4"><span>Persistence</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-4"><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/key-value"><div><span>Store key-value data on disk</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/reading-writing-files"><div><span>Read and write files</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/persistence/sqlite"><div><span>Persist data with SQLite</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-20-5" role="button" aria-expanded="false" aria-controls="sidenav-20-5"><span>Firebase</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-20-5"><li class="nav-item"><a class="nav-link" href="/data-and-backend/firebase"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://firebase.google.com/docs/flutter/setup" target="_blank" rel="noopener"><div><span>Add Firebase to your Flutter app</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/data-and-backend/google-apis"><div><span>Google APIs</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-21" role="button" aria-expanded="false" aria-controls="sidenav-21"><span>App architecture</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21"><li class="nav-item"><a class="nav-link" href="/app-architecture"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/concepts"><div><span>Architecture concepts</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/guide"><div><span>Guide to app architecture</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-21-4" role="button" aria-expanded="false" aria-controls="sidenav-21-4"><span>Architecture case study</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-21-4"><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/ui-layer"><div><span>UI layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/data-layer"><div><span>Data layer</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/dependency-injection"><div><span>Dependency injection</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/case-study/testing"><div><span>Testing each layer</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/app-architecture/recommendations"><div><span>Recommendations</span></div></a></li><li class="nav-item"><a class="nav-link" href="/app-architecture/design-patterns"><div><span>Design patterns</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-22" role="button" aria-expanded="false" aria-controls="sidenav-22"><span>Platform integration</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22"><li class="nav-item"><a class="nav-link" href="/reference/supported-platforms"><div><span>Supported platforms</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/desktop"><div><span>Build desktop apps with Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/platform-channels"><div><span>Write platform-specific code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-4" role="button" aria-expanded="false" aria-controls="sidenav-22-4"><span>Android</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-4"><li class="nav-item"><a class="nav-link" href="/platform-integration/android/install-android"><div><span>Add Android as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/splash-screen"><div><span>Add a splash screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/predictive-back"><div><span>Add predictive back</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/platform-views"><div><span>Host a native Android view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/call-jetpack-apis"><div><span>Calling JetPack APIs</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/compose-activity"><div><span>Launch a Jetpack Compose activity</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/restore-state-android"><div><span>Restore state on Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/android/chromeos"><div><span>Target ChromeOS with Android</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-5" role="button" aria-expanded="false" aria-controls="sidenav-22-5"><span>iOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-5"><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/install-ios"><div><span>Add iOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-latest"><div><span>Flutter on latest iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/apple-frameworks"><div><span>Leverage Apple's system libraries</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/launch-screen"><div><span>Add a launch screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-app-clip"><div><span>Add iOS App Clip support</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/app-extensions"><div><span>Add iOS app extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/platform-views"><div><span>Host a native iOS view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/ios-debugging"><div><span>Enable debugging on iOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/ios/restore-state-ios"><div><span>Restore state on iOS</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-6" role="button" aria-expanded="false" aria-controls="sidenav-22-6"><span>Linux</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-6"><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/install-linux"><div><span>Add Linux as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/linux/building"><div><span>Build a Linux app</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-7" role="button" aria-expanded="false" aria-controls="sidenav-22-7"><span>macOS</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-7"><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/install-macos"><div><span>Add macOS as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/building"><div><span>Build a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/c-interop"><div><span>Bind to native code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/macos/platform-views"><div><span>Host a native macOS view</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-8" role="button" aria-expanded="false" aria-controls="sidenav-22-8"><span>Web</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-8"><li class="nav-item"><a class="nav-link" href="/platform-integration/web"><div><span>Web support in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/install-web"><div><span>Add web as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/building"><div><span>Build a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/wasm"><div><span>Compile to WebAssembly</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/initialization"><div><span>Customize app initialization</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add Flutter to any web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-content-in-flutter"><div><span>Web content in Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/renderers"><div><span>Web renderers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/web-images"><div><span>Display images on the web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/faq"><div><span>Web FAQ</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-22-9" role="button" aria-expanded="false" aria-controls="sidenav-22-9"><span>Windows</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-22-9"><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/install-windows"><div><span>Add Windows as build target</span></div></a></li><li class="nav-item"><a class="nav-link" href="/platform-integration/windows/building"><div><span>Build a Windows app</span></div></a></li></ul></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-23" role="button" aria-expanded="false" aria-controls="sidenav-23"><span>Packages & plugins</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/using-packages"><div><span>Use packages & plugins</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/developing-packages"><div><span>Develop packages & plugins</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-23-3" role="button" aria-expanded="false" aria-controls="sidenav-23-3"><span>Swift Package Manager</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-23-3"><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-app-developers"><div><span>For app developers</span></div></a></li><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/swift-package-manager/for-plugin-authors"><div><span>For plugin authors</span></div></a></li></ul></li><div class="sidenav-divider"></div><li class="nav-item"><a class="nav-link" href="/packages-and-plugins/favorites"><div><span>Flutter Favorites</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://pub.dev/flutter" target="_blank" rel="noopener"><div><span>Package repository</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-24" role="button" aria-expanded="false" aria-controls="sidenav-24"><span>Testing & debugging</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24"><li class="nav-header">Testing</li><li class="nav-item"><a class="nav-link" href="/testing/overview"><div><span>Overview</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-3" role="button" aria-expanded="false" aria-controls="sidenav-24-3"><span>Unit testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-3"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/unit/mocking"><div><span>Mock dependencies</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-4" role="button" aria-expanded="false" aria-controls="sidenav-24-4"><span>Widget testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-4"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/finders"><div><span>Find widgets</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/scrolling"><div><span>Simulate scrolling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/widget/tap-drag"><div><span>Simulate user interaction</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-24-5" role="button" aria-expanded="false" aria-controls="sidenav-24-5"><span>Integration testing</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-24-5"><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/introduction"><div><span>Introduction</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/integration-tests"><div><span>Write and run an integration test</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/testing/integration/profiling"><div><span>Profile an integration test</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/testing/testing-plugins"><div><span>Test a plugin</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/plugins-in-tests"><div><span>Handle plugin code in tests</span></div></a></li><li class="nav-header">Debugging</li><li class="nav-item"><a class="nav-link" href="/testing/debugging"><div><span>Debugging tools</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/code-debugging"><div><span>Debug your app programmatically</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/native-debugging"><div><span>Use a native language debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/common-errors"><div><span>Common Flutter errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/errors"><div><span>Handle errors</span></div></a></li><li class="nav-item"><a class="nav-link" href="/cookbook/maintenance/error-reporting"><div><span>Report errors to a service</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-25" role="button" aria-expanded="false" aria-controls="sidenav-25"><span>Performance & optimization</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-25"><li class="nav-item"><a class="nav-link" href="/perf"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/impeller"><div><span>Impeller</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/best-practices"><div><span>Performance best practices</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/app-size"><div><span>App size</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/deferred-components"><div><span>Deferred components</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/rendering-performance"><div><span>Rendering performance</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/ui-performance"><div><span>Performance profiling</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/web-performance"><div><span>Performance profiling for web</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/metrics"><div><span>Performance metrics</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/isolates"><div><span>Concurrency and isolates</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/faq"><div><span>Performance FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/perf/appendix"><div><span>Appendix</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-26" role="button" aria-expanded="false" aria-controls="sidenav-26"><span>Deployment</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-26"><li class="nav-item"><a class="nav-link" href="/deployment/obfuscate"><div><span>Obfuscate Dart code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors"><div><span>Create app flavors for Android</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/flavors-ios"><div><span>Create app flavors for iOS and macOS</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/android"><div><span>Build and release an Android app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/ios"><div><span>Build and release an iOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/macos"><div><span>Build and release a macOS app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/linux"><div><span>Build and release a Linux app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/windows"><div><span>Build and release a Windows app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/web"><div><span>Build and release a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/deployment/cd"><div><span>Set up continuous deployment</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-27" role="button" aria-expanded="false" aria-controls="sidenav-27"><span>Add to an existing app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27"><li class="nav-item"><a class="nav-link" href="/add-to-app"><div><span>Introduction</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-2" role="button" aria-expanded="false" aria-controls="sidenav-27-2"><span>Add to an Android app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27-2"><li class="nav-item"><a class="nav-link" href="/add-to-app/android/project-setup"><div><span>Set up Android project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-fragment"><div><span>Add a Flutter Fragment</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/add-flutter-view"><div><span>Add a Flutter View</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/android/plugin-setup"><div><span>Use a Flutter plugin</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-27-3" role="button" aria-expanded="false" aria-controls="sidenav-27-3"><span>Add to an iOS app</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-27-3"><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/project-setup"><div><span>Set up iOS project</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/ios/add-flutter-screen"><div><span>Add a single Flutter screen</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/platform-integration/web/embedding-flutter-web"><div><span>Add to a web app</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/debugging"><div><span>Debug embedded Flutter module</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/multiple-flutters"><div><span>Add multiple Flutter instances</span></div></a></li><li class="nav-item"><a class="nav-link" href="/add-to-app/performance"><div><span>Loading sequence and performance</span></div></a></li></ul></li><li aria-hidden="true"><div class="sidenav-divider"></div></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-29" role="button" aria-expanded="false" aria-controls="sidenav-29"><span>Tools & editors</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29"><li class="nav-item"><a class="nav-link" href="/tools/android-studio"><div><span>Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/vs-code"><div><span>Visual Studio Code</span></div></a></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-29-3" role="button" aria-expanded="false" aria-controls="sidenav-29-3"><span>DevTools</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-29-3"><li class="nav-item"><a class="nav-link" href="/tools/devtools"><div><span>Overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/android-studio"><div><span>Run from Android Studio & IntelliJ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/vscode"><div><span>Run from VS Code</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cli"><div><span>Run from command line</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/inspector"><div><span>Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/legacy-inspector"><div><span>Legacy Flutter inspector</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/performance"><div><span>Performance view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/cpu-profiler"><div><span>CPU Profiler view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/memory"><div><span>Memory view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/console"><div><span>Debug console view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/network"><div><span>Network view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/debugger"><div><span>Debugger</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/logging"><div><span>Logging view</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/app-size"><div><span>App size tool</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/extensions"><div><span>DevTools extensions</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/deep-links"><div><span>Validate deep links</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/devtools/release-notes"><div><span>Release notes</span></div></a></li></ul></li><li class="nav-item"><a class="nav-link" href="/tools/sdk"><div><span>SDK overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/pubspec"><div><span>Flutter's pubspec options</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/flutter-fix"><div><span>Automated fixes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/formatting"><div><span>Code formatting</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsed collapsible" data-toggle="collapse" data-target="#sidenav-30" role="button" aria-expanded="false" aria-controls="sidenav-30"><span>Flutter concepts</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-30"><li class="nav-item"><a class="nav-link" href="/resources/architectural-overview"><div><span>Architectural overview</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/inside-flutter"><div><span>Inside Flutter</span></div></a></li><li class="nav-item"><a class="nav-link" href="/ui/layout/constraints"><div><span>Understanding constraints</span></div></a></li><li class="nav-item"><a class="nav-link" href="/testing/build-modes"><div><span>Flutter's build modes</span></div></a></li><li class="nav-item"><a class="nav-link" href="/tools/hot-reload"><div><span>Hot reload</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link active collapsible" data-toggle="collapse" data-target="#sidenav-31" role="button" aria-expanded="true" aria-controls="sidenav-31"><span>Resources</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse show" id="sidenav-31"><li class="nav-item"><a class="nav-link active" href="/resources/faq"><div><span>FAQ</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/books"><div><span>Books</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/videos"><div><span>Videos</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/courses"><div><span>Courses</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/bootstrap-into-dart"><div><span>Learn Dart</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/support"><div><span>Get support</span></div></a></li><div class="sidenav-divider"></div><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-8" role="button" aria-expanded="false" aria-controls="sidenav-31-8"><span>Contribute</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-8"><li class="nav-item"><a class="nav-link" href="/resources/bug-reports"><div><span>Create useful bug reports</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener"><div><span>Contribute to Flutter</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li><li class="nav-item"><a class="nav-link" href="/resources/design-docs"><div><span>Discover proposed features</span></div></a></li></ul></li><li class="nav-item"><button class="nav-link collapsible collapsed" data-toggle="collapse" data-target="#sidenav-31-9" role="button" aria-expanded="false" aria-controls="sidenav-31-9"><span>Reference</span> <span class="material-symbols expander" aria-hidden="true">expand_more</span></button><ul class="nav collapse" id="sidenav-31-9"><li class="nav-item"><a class="nav-link" href="/dash"><div><span>Who is Dash?</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/widgets"><div><span>Widget index</span></div></a></li><li class="nav-item"><a class="nav-link" href="/reference/flutter-cli"><div><span>flutter CLI</span></div></a></li><li class="nav-item"><a class="nav-link" href="https://api.flutter.dev" target="_blank" rel="noopener"><div><span>API docs</span><span class="material-symbols" aria-hidden="true">open_in_new</span></div></a></li></ul></li></ul></li></ul></nav></div><main class="site-content"><div id="site-toc--side" class="site-toc"><header class="site-toc__title">Contents</header><ul class="section-nav"><li class="toc-entry nav-item"><a class="nav-link" href="#introduction">Introduction</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#what-is-flutter">What is Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#who-is-flutter-for">Who is Flutter for?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-much-development-experience-do-i-need-to-use-flutter">How much development experience do I need to use Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-kinds-of-apps-can-i-build-with-flutter">What kinds of apps can I build with Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#who-makes-flutter">Who makes Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#who-uses-flutter">Who uses Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-makes-flutter-unique">What makes Flutter unique?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#should-i-build-my-next-production-app-with-flutter">Should I build my next production app with Flutter?</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-does-flutter-provide">What does Flutter provide?</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#what-is-inside-the-flutter-sdk">What is inside the Flutter SDK?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-work-with-any-editors-or-ides">Does Flutter work with any editors or IDEs?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-a-framework">Does Flutter come with a framework?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-widgets">Does Flutter come with widgets?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-support-material-design">Does Flutter support Material Design?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-a-testing-framework">Does Flutter come with a testing framework?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-debugging-tools">Does Flutter come with debugging tools?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-a-dependency-injection-framework">Does Flutter come with a dependency injection framework?</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#technology">Technology</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#what-technology-is-flutter-built-with">What technology is Flutter built with?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#run-android">How does Flutter run my code on Android?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#run-ios">How does Flutter run my code on iOS?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-use-my-operating-systems-built-in-platform-widgets">Does Flutter use my operating system's built-in platform widgets?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-happens-when-my-mobile-os-updates-and-introduces-new-widgets">What happens when my mobile OS updates and introduces new widgets?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-happens-when-my-mobile-os-updates-and-introduces-new-platform-capabilities">What happens when my mobile OS updates and introduces new platform capabilities?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-support-code-push">Does Flutter support code push?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-operating-systems-can-i-use-to-build-a-flutter-app">What operating systems can I use to build a Flutter app?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-language-is-flutter-written-in">What language is Flutter written in?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#why-did-flutter-choose-to-use-dart">Why did Flutter choose to use Dart?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-flutter-run-any-dart-code">Can Flutter run any Dart code?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-flutter-compile-dart-to-javascript">Can Flutter compile Dart to JavaScript?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-big-is-the-flutter-engine">How big is the Flutter engine?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-does-flutter-define-a-pixel">How does Flutter define a pixel?</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#capabilities">Capabilities</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#what-kind-of-app-performance-can-i-expect">What kind of app performance can I expect?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#hot-reload">What kind of developer cycles can I expect? How long between edit and refresh?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-is-hot-reload-different-from-hot-restart">How is hot reload different from hot restart?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#where-can-i-deploy-my-flutter-app">Where can I deploy my Flutter app?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-devices-and-os-versions-does-flutter-run-on">What devices and OS versions does Flutter run on?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-run-on-the-web">Does Flutter run on the web?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-use-flutter-to-build-desktop-apps">Can I use Flutter to build desktop apps?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-use-flutter-inside-of-my-existing-native-app">Can I use Flutter inside of my existing native app?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-access-platform-services-and-apis-like-sensors-and-local-storage">Can I access platform services and APIs like sensors and local storage?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-extend-and-customize-the-bundled-widgets">Can I extend and customize the bundled widgets?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#why-would-i-want-to-share-layout-code-across-ios-and-android">Why would I want to share layout code across iOS and Android?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-interop-with-my-mobile-platforms-default-programming-language">Can I interop with my mobile platform's default programming language?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#does-flutter-come-with-a-reflection-mirrors-system">Does Flutter come with a reflection / mirrors system?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#are-internationalization-and-localization-supported">Are internationalization and localization supported?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-accessibility-is-supported">What accessibility is supported?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-do-i-write-parallel-andor-concurrent-apps-for-flutter">How do I write parallel and/or concurrent apps for Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-run-dart-code-in-the-background-of-a-flutter-app">Can I run Dart code in the background of a Flutter app?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-use-jsonxmlprotobufs-and-so-on-with-flutter">Can I use JSON/XML/Protobufs (and so on) with Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#can-i-build-3d-opengl-apps-with-flutter">Can I build 3D (OpenGL) apps with Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#why-is-my-apk-or-ipa-so-big">Why is my APK or IPA so big?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#do-flutter-apps-run-on-chromebooks">Do Flutter apps run on Chromebooks?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#is-flutter-abi-compatible">Is Flutter ABI compatible?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-does-flutter-handle-scrolling">How does Flutter handle scrolling?</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#framework">Framework</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#why-is-the-build-method-on-state-rather-than-statefulwidget">Why is the build() method on State, rather than StatefulWidget?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#where-is-flutters-markup-language-why-doesnt-flutter-have-a-markup-syntax">Where is Flutter's markup language? Why doesn't Flutter have a markup syntax?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#my-app-has-a-debug-bannerribbon-in-the-upper-right-why-am-i-seeing-that">My app has a Debug banner/ribbon in the upper right. Why am I seeing that?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-programming-paradigm-does-flutters-framework-use">What programming paradigm does Flutter's framework use?</a></li></ul></li><li class="toc-entry nav-item"><a class="nav-link" href="#project">Project</a><ul class="nav"><li class="toc-entry nav-item"><a class="nav-link" href="#where-can-i-get-support">Where can I get support?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-do-i-get-involved">How do I get involved?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#is-flutter-open-source">Is Flutter open source?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#which-software-licenses-apply-to-flutter-and-its-dependencies">Which software license(s) apply to Flutter and its dependencies?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#how-can-i-determine-the-licenses-my-flutter-application-needs-to-show">How can I determine the licenses my Flutter application needs to show?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#who-works-on-flutter">Who works on Flutter?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#what-are-flutters-guiding-principles">What are Flutter's guiding principles?</a></li><li class="toc-entry nav-item"><a class="nav-link" href="#will-apple-reject-my-flutter-app">Will Apple reject my Flutter app?</a></li></ul></li></ul></div><article><header class="site-content__title"><h1 id="document-title">FAQ</h1></header><div id="site-toc--inline" class="site-toc toc-collapsible toc-collapsed"><header class="site-toc__title">Contents <span class="site-toc--inline__toggle toc-toggle-down" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_down</i></span> <span class="site-toc--inline__toggle toc-toggle-up" title="Collapse table of contents"><i class="material-symbols" aria-hidden="true">keyboard_arrow_up</i></span></header><ul class="section-nav"><li class="toc-entry"><a href="#introduction">Introduction</a><ul><li class="toc-entry"><a href="#what-is-flutter">What is Flutter?</a></li><li class="toc-entry"><a href="#who-is-flutter-for">Who is Flutter for?</a></li><li class="toc-entry"><a href="#how-much-development-experience-do-i-need-to-use-flutter">How much development experience do I need to use Flutter?</a></li><li class="toc-entry"><a href="#what-kinds-of-apps-can-i-build-with-flutter">What kinds of apps can I build with Flutter?</a></li><li class="toc-entry"><a href="#who-makes-flutter">Who makes Flutter?</a></li><li class="toc-entry"><a href="#who-uses-flutter">Who uses Flutter?</a></li><li class="toc-entry"><a href="#what-makes-flutter-unique">What makes Flutter unique?</a></li><li class="toc-entry"><a href="#should-i-build-my-next-production-app-with-flutter">Should I build my next production app with Flutter?</a></li></ul></li><li class="toc-entry"><a href="#what-does-flutter-provide">What does Flutter provide?</a><ul><li class="toc-entry"><a href="#what-is-inside-the-flutter-sdk">What is inside the Flutter SDK?</a></li><li class="toc-entry"><a href="#does-flutter-work-with-any-editors-or-ides">Does Flutter work with any editors or IDEs?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-a-framework">Does Flutter come with a framework?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-widgets">Does Flutter come with widgets?</a></li><li class="toc-entry"><a href="#does-flutter-support-material-design">Does Flutter support Material Design?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-a-testing-framework">Does Flutter come with a testing framework?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-debugging-tools">Does Flutter come with debugging tools?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-a-dependency-injection-framework">Does Flutter come with a dependency injection framework?</a></li></ul></li><li class="toc-entry"><a href="#technology">Technology</a><ul><li class="toc-entry"><a href="#what-technology-is-flutter-built-with">What technology is Flutter built with?</a></li><li class="toc-entry"><a href="#run-android">How does Flutter run my code on Android?</a></li><li class="toc-entry"><a href="#run-ios">How does Flutter run my code on iOS?</a></li><li class="toc-entry"><a href="#does-flutter-use-my-operating-systems-built-in-platform-widgets">Does Flutter use my operating system's built-in platform widgets?</a></li><li class="toc-entry"><a href="#what-happens-when-my-mobile-os-updates-and-introduces-new-widgets">What happens when my mobile OS updates and introduces new widgets?</a></li><li class="toc-entry"><a href="#what-happens-when-my-mobile-os-updates-and-introduces-new-platform-capabilities">What happens when my mobile OS updates and introduces new platform capabilities?</a></li><li class="toc-entry"><a href="#does-flutter-support-code-push">Does Flutter support code push?</a></li><li class="toc-entry"><a href="#what-operating-systems-can-i-use-to-build-a-flutter-app">What operating systems can I use to build a Flutter app?</a></li><li class="toc-entry"><a href="#what-language-is-flutter-written-in">What language is Flutter written in?</a></li><li class="toc-entry"><a href="#why-did-flutter-choose-to-use-dart">Why did Flutter choose to use Dart?</a></li><li class="toc-entry"><a href="#can-flutter-run-any-dart-code">Can Flutter run any Dart code?</a></li><li class="toc-entry"><a href="#can-flutter-compile-dart-to-javascript">Can Flutter compile Dart to JavaScript?</a></li><li class="toc-entry"><a href="#how-big-is-the-flutter-engine">How big is the Flutter engine?</a></li><li class="toc-entry"><a href="#how-does-flutter-define-a-pixel">How does Flutter define a pixel?</a></li></ul></li><li class="toc-entry"><a href="#capabilities">Capabilities</a><ul><li class="toc-entry"><a href="#what-kind-of-app-performance-can-i-expect">What kind of app performance can I expect?</a></li><li class="toc-entry"><a href="#hot-reload">What kind of developer cycles can I expect? How long between edit and refresh?</a></li><li class="toc-entry"><a href="#how-is-hot-reload-different-from-hot-restart">How is hot reload different from hot restart?</a></li><li class="toc-entry"><a href="#where-can-i-deploy-my-flutter-app">Where can I deploy my Flutter app?</a></li><li class="toc-entry"><a href="#what-devices-and-os-versions-does-flutter-run-on">What devices and OS versions does Flutter run on?</a></li><li class="toc-entry"><a href="#does-flutter-run-on-the-web">Does Flutter run on the web?</a></li><li class="toc-entry"><a href="#can-i-use-flutter-to-build-desktop-apps">Can I use Flutter to build desktop apps?</a></li><li class="toc-entry"><a href="#can-i-use-flutter-inside-of-my-existing-native-app">Can I use Flutter inside of my existing native app?</a></li><li class="toc-entry"><a href="#can-i-access-platform-services-and-apis-like-sensors-and-local-storage">Can I access platform services and APIs like sensors and local storage?</a></li><li class="toc-entry"><a href="#can-i-extend-and-customize-the-bundled-widgets">Can I extend and customize the bundled widgets?</a></li><li class="toc-entry"><a href="#why-would-i-want-to-share-layout-code-across-ios-and-android">Why would I want to share layout code across iOS and Android?</a></li><li class="toc-entry"><a href="#can-i-interop-with-my-mobile-platforms-default-programming-language">Can I interop with my mobile platform's default programming language?</a></li><li class="toc-entry"><a href="#does-flutter-come-with-a-reflection-mirrors-system">Does Flutter come with a reflection / mirrors system?</a></li><li class="toc-entry"><a href="#are-internationalization-and-localization-supported">Are internationalization and localization supported?</a></li><li class="toc-entry"><a href="#what-accessibility-is-supported">What accessibility is supported?</a></li><li class="toc-entry"><a href="#how-do-i-write-parallel-andor-concurrent-apps-for-flutter">How do I write parallel and/or concurrent apps for Flutter?</a></li><li class="toc-entry"><a href="#can-i-run-dart-code-in-the-background-of-a-flutter-app">Can I run Dart code in the background of a Flutter app?</a></li><li class="toc-entry"><a href="#can-i-use-jsonxmlprotobufs-and-so-on-with-flutter">Can I use JSON/XML/Protobufs (and so on) with Flutter?</a></li><li class="toc-entry"><a href="#can-i-build-3d-opengl-apps-with-flutter">Can I build 3D (OpenGL) apps with Flutter?</a></li><li class="toc-entry"><a href="#why-is-my-apk-or-ipa-so-big">Why is my APK or IPA so big?</a></li><li class="toc-entry"><a href="#do-flutter-apps-run-on-chromebooks">Do Flutter apps run on Chromebooks?</a></li><li class="toc-entry"><a href="#is-flutter-abi-compatible">Is Flutter ABI compatible?</a></li><li class="toc-entry"><a href="#how-does-flutter-handle-scrolling">How does Flutter handle scrolling?</a></li></ul></li><li class="toc-entry"><a href="#framework">Framework</a><ul><li class="toc-entry"><a href="#why-is-the-build-method-on-state-rather-than-statefulwidget">Why is the build() method on State, rather than StatefulWidget?</a></li><li class="toc-entry"><a href="#where-is-flutters-markup-language-why-doesnt-flutter-have-a-markup-syntax">Where is Flutter's markup language? Why doesn't Flutter have a markup syntax?</a></li><li class="toc-entry"><a href="#my-app-has-a-debug-bannerribbon-in-the-upper-right-why-am-i-seeing-that">My app has a Debug banner/ribbon in the upper right. Why am I seeing that?</a></li><li class="toc-entry"><a href="#what-programming-paradigm-does-flutters-framework-use">What programming paradigm does Flutter's framework use?</a></li></ul></li><li class="toc-entry"><a href="#project">Project</a><ul><li class="toc-entry"><a href="#where-can-i-get-support">Where can I get support?</a></li><li class="toc-entry"><a href="#how-do-i-get-involved">How do I get involved?</a></li><li class="toc-entry"><a href="#is-flutter-open-source">Is Flutter open source?</a></li><li class="toc-entry"><a href="#which-software-licenses-apply-to-flutter-and-its-dependencies">Which software license(s) apply to Flutter and its dependencies?</a></li><li class="toc-entry"><a href="#how-can-i-determine-the-licenses-my-flutter-application-needs-to-show">How can I determine the licenses my Flutter application needs to show?</a></li><li class="toc-entry"><a href="#who-works-on-flutter">Who works on Flutter?</a></li><li class="toc-entry"><a href="#what-are-flutters-guiding-principles">What are Flutter's guiding principles?</a></li><li class="toc-entry"><a href="#will-apple-reject-my-flutter-app">Will Apple reject my Flutter app?</a></li></ul></li></ul><span class="site-toc--inline__toggle toc-toggle-more-items" title="Expand table of contents"><i class="material-symbols" aria-hidden="true">more_horiz</i></span></div><div class="header-wrapper"><h2 id="introduction">Introduction</h2><a class="heading-link" href="#introduction" aria-label="Link to 'Introduction' section">#</a></div><p>This page collects some common questions asked about Flutter. You might also check out the following specialized FAQs:</p><ul><li><a href="/platform-integration/web/faq">Web FAQ</a></li><li><a href="/perf/faq">Performance FAQ</a></li></ul><div class="header-wrapper"><h3 id="what-is-flutter">What is Flutter?</h3><a class="heading-link" href="#what-is-flutter" aria-label="Link to 'What is Flutter?' section">#</a></div><p>Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.</p><div class="header-wrapper"><h3 id="who-is-flutter-for">Who is Flutter for?</h3><a class="heading-link" href="#who-is-flutter-for" aria-label="Link to 'Who is Flutter for?' section">#</a></div><p>For users, Flutter makes beautiful apps come to life.</p><p>For developers, Flutter lowers the bar to entry for building apps. It speeds app development and reduces the cost and complexity of app production across platforms.</p><p>For designers, Flutter provides a canvas for high-end user experiences. Fast Company described Flutter as <a href="https://www.fastcompany.com/90442092/the-14-most-important-design-ideas-of-the-decade-according-to-the-experts">one of the top design ideas of the decade</a> for its ability to turn concepts into production code without the compromises imposed by typical frameworks. It also acts as a productive prototyping tool with drag-and-drop tools like <a href="https://flutterflow.io/">FlutterFlow</a> and web-based IDEs like <a href="https://zapp.run/">Zapp!</a>.</p><p>For engineering managers and businesses, Flutter allows the unification of app developers into a single <em>mobile, web, and desktop app team</em>, building branded apps for multiple platforms out of a single codebase. Flutter speeds feature development and synchronizes release schedules across the entire customer base.</p><div class="header-wrapper"><h3 id="how-much-development-experience-do-i-need-to-use-flutter">How much development experience do I need to use Flutter?</h3><a class="heading-link" href="#how-much-development-experience-do-i-need-to-use-flutter" aria-label="Link to 'How much development experience do I need to use Flutter?' section">#</a></div><p>Flutter is approachable to programmers familiar with object-oriented concepts (classes, methods, variables, etc) and imperative programming concepts (loops, conditionals, etc).</p><p>We have seen people with very little programming experience learn and use Flutter for prototyping and app development.</p><div class="header-wrapper"><h3 id="what-kinds-of-apps-can-i-build-with-flutter">What kinds of apps can I build with Flutter?</h3><a class="heading-link" href="#what-kinds-of-apps-can-i-build-with-flutter" aria-label="Link to 'What kinds of apps can I build with Flutter?' section">#</a></div><p>Flutter is designed to support mobile apps that run on both Android and iOS, as well as interactive apps that you want to run on your web pages or on the desktop.</p><p>Apps that need to deliver highly branded designs are particularly well suited for Flutter. However, you can also create pixel-perfect experiences that match the Android and iOS design languages with Flutter.</p><p>Flutter's <a href="https://pub.dev/flutter">package ecosystem</a> supports a wide variety of hardware (such as camera, GPS, network, and storage) and services (such as payments, cloud storage, authentication, and <a href="https://flutter.dev/monetization">ads</a>).</p><div class="header-wrapper"><h3 id="who-makes-flutter">Who makes Flutter?</h3><a class="heading-link" href="#who-makes-flutter" aria-label="Link to 'Who makes Flutter?' section">#</a></div><p>Flutter is an open source project, with contributions from Google and other companies and individuals.</p><div class="header-wrapper"><h3 id="who-uses-flutter">Who uses Flutter?</h3><a class="heading-link" href="#who-uses-flutter" aria-label="Link to 'Who uses Flutter?' section">#</a></div><p>Developers inside and outside of Google use Flutter to build beautiful natively-compiled apps for iOS and Android. To learn about some of these apps, visit the <a href="https://flutter.dev/showcase">showcase</a>.</p><div class="header-wrapper"><h3 id="what-makes-flutter-unique">What makes Flutter unique?</h3><a class="heading-link" href="#what-makes-flutter-unique" aria-label="Link to 'What makes Flutter unique?' section">#</a></div><p>Flutter is different than most other options for building mobile apps because it doesn't rely on web browser technology nor the set of widgets that ship with each device. Instead, Flutter uses its own high-performance rendering engine to draw widgets.</p><p>In addition, Flutter is different because it only has a thin layer of C/C++ code. Flutter implements most of its system (compositing, gestures, animation, framework, widgets, etc) in <a href="https://dart.dev/">Dart</a> (a modern, concise, object-oriented language) that developers can easily approach read, change, replace, or remove. This gives developers tremendous control over the system, as well as significantly lowers the bar to approachability for the majority of the system.</p><div class="header-wrapper"><h3 id="should-i-build-my-next-production-app-with-flutter">Should I build my next production app with Flutter?</h3><a class="heading-link" href="#should-i-build-my-next-production-app-with-flutter" aria-label="Link to 'Should I build my next production app with Flutter?' section">#</a></div><p><a href="https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-toolkit.html">Flutter 1</a> was launched on Dec 4th, 2018, <a href="https://developers.googleblog.com/2021/03/announcing-flutter-2.html">Flutter 2</a> on March 3rd, 2021, and <a href="https://developers.googleblog.com/flutter/introducing-flutter-3-5eb69151622f">Flutter 3</a> on May 10th, 2023. As of May 2023, over <em>one million</em> apps have shipped using Flutter to many hundreds of millions of devices. Check out some sample apps in the <a href="https://flutter.dev/showcase">showcase</a>.</p><p>Flutter ships updates on a roughly-quarterly cadence that improve stability and performance and address commonly-requested user features.</p><div class="header-wrapper"><h2 id="what-does-flutter-provide">What does Flutter provide?</h2><a class="heading-link" href="#what-does-flutter-provide" aria-label="Link to 'What does Flutter provide?' section">#</a></div><div class="header-wrapper"><h3 id="what-is-inside-the-flutter-sdk">What is inside the Flutter SDK?</h3><a class="heading-link" href="#what-is-inside-the-flutter-sdk" aria-label="Link to 'What is inside the Flutter SDK?' section">#</a></div><p>Flutter includes:</p><ul><li>Heavily optimized, mobile-first 2D rendering engine with excellent support for text</li><li>Modern react-style framework</li><li>Rich set of widgets implementing Material Design and iOS-style</li><li>APIs for unit and integration tests</li><li>Interop and plugin APIs to connect to the system and 3rd-party SDKs</li><li>Headless test runner for running tests on Windows, Linux, and Mac</li><li><a href="/tools/devtools">Flutter DevTools</a> (also called Dart DevTools) for testing, debugging, and profiling your app</li><li>Command-line tools for creating, building, testing, and compiling your apps</li></ul><div class="header-wrapper"><h3 id="does-flutter-work-with-any-editors-or-ides">Does Flutter work with any editors or IDEs?</h3><a class="heading-link" href="#does-flutter-work-with-any-editors-or-ides" aria-label="Link to 'Does Flutter work with any editors or IDEs?' section">#</a></div><p>We provide plugins for <a href="https://code.visualstudio.com/">VS Code</a>, <a href="https://developer.android.com/studio">Android Studio</a>, and <a href="https://www.jetbrains.com/idea/">IntelliJ IDEA</a>. See <a href="/get-started/editor">editor configuration</a> for setup details, and <a href="https://code.visualstudio.com/">VS Code</a> and <a href="/tools/android-studio">Android Studio/IntelliJ</a> for tips on how to use the plugins.</p><p><a href="https://idx.dev/">Project IDX</a>, currently in beta, is an AI-assisted workspace for full-stack, multiplatform app development in the cloud. IDX supports Dart and Flutter. For more information, check out the <a href="https://developers.google.com/idx/guides/get-started">Project IDX Getting Started</a> guide.</p><p>Alternatively, you can use the <code>flutter</code> command from a terminal, along with one of the many editors that support <a href="https://dart.dev/tools">editing Dart</a>.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-a-framework">Does Flutter come with a framework?</h3><a class="heading-link" href="#does-flutter-come-with-a-framework" aria-label="Link to 'Does Flutter come with a framework?' section">#</a></div><p>Yes! Flutter ships with a modern react-style framework. Flutter's framework is designed to be layered and customizable (and optional). Developers can choose to use only parts of the framework, or even replace upper layers of the framework entirely.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-widgets">Does Flutter come with widgets?</h3><a class="heading-link" href="#does-flutter-come-with-widgets" aria-label="Link to 'Does Flutter come with widgets?' section">#</a></div><p>Yes! Flutter ships with a set of <a href="/ui/widgets">high-quality Material Design and Cupertino (iOS-style) widgets</a>, layouts, and themes. Of course, these widgets are only a starting point. Flutter is designed to make it easy to create your own widgets, or customize the existing widgets.</p><div class="header-wrapper"><h3 id="does-flutter-support-material-design">Does Flutter support Material Design?</h3><a class="heading-link" href="#does-flutter-support-material-design" aria-label="Link to 'Does Flutter support Material Design?' section">#</a></div><p>Yes! The Flutter and Material teams collaborate closely, and Material is fully supported. For more information, check out the Material 2 and Material 3 widgets in the <a href="/ui/widgets/material">widget catalog</a>.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-a-testing-framework">Does Flutter come with a testing framework?</h3><a class="heading-link" href="#does-flutter-come-with-a-testing-framework" aria-label="Link to 'Does Flutter come with a testing framework?' section">#</a></div><p>Yes, Flutter provides APIs for writing unit and integration tests. Learn more about <a href="/testing/overview">testing with Flutter</a>.</p><p>We use our own testing capabilities to test our SDK, and we measure our <a href="https://coveralls.io/github/flutter/flutter?branch=master">test coverage</a> on every commit.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-debugging-tools">Does Flutter come with debugging tools?</h3><a class="heading-link" href="#does-flutter-come-with-debugging-tools" aria-label="Link to 'Does Flutter come with debugging tools?' section">#</a></div><p>Yes, Flutter comes with <a href="/tools/devtools">Flutter DevTools</a> (also called Dart DevTools). For more information, see <a href="/testing/debugging">Debugging with Flutter</a> and the <a href="/tools/devtools">Flutter DevTools</a> docs.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-a-dependency-injection-framework">Does Flutter come with a dependency injection framework?</h3><a class="heading-link" href="#does-flutter-come-with-a-dependency-injection-framework" aria-label="Link to 'Does Flutter come with a dependency injection framework?' section">#</a></div><p>We don't ship with an opinionated solution, but there are a variety of packages that offer dependency injection and service location, such as <a href="https://pub.dev/packages/injectable">injectable</a>, <a href="https://pub.dev/packages/get_it">get_it</a>, <a href="https://pub.dev/packages/kiwi">kiwi</a>, and <a href="https://pub.dev/packages/riverpod">riverpod</a>.</p><div class="header-wrapper"><h2 id="technology">Technology</h2><a class="heading-link" href="#technology" aria-label="Link to 'Technology' section">#</a></div><div class="header-wrapper"><h3 id="what-technology-is-flutter-built-with">What technology is Flutter built with?</h3><a class="heading-link" href="#what-technology-is-flutter-built-with" aria-label="Link to 'What technology is Flutter built with?' section">#</a></div><p>Flutter is built with C, C++, Dart, Skia (a 2D rendering engine), and <a href="/perf/impeller">Impeller</a> (the default rendering engine on iOS). See this <a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.gbb3c3233b_0_162">architecture diagram</a> for a better picture of the main components. For a more detailed description of the layered architecture of Flutter, read the <a href="/resources/architectural-overview">architectural overview</a>.</p><div class="header-wrapper"><h3 id="run-android">How does Flutter run my code on Android?</h3><a class="heading-link" href="#run-android" aria-label="Link to 'How does Flutter run my code on Android?' section">#</a></div><p>The engine's C and C++ code are compiled with Android's NDK. The Dart code (both the SDK's and yours) are ahead-of-time (AOT) compiled into native, ARM, and x86-64 libraries. Those libraries are included in a "runner" Android project, and the whole thing is built into an <code>.apk</code>. When launched, the app loads the Flutter library. Any rendering, input, or event handling, and so on, is delegated to the compiled Flutter and app code. This is similar to the way many game engines work.</p><p>During debug mode, Flutter uses a virtual machine (VM) to run its code in order to enable stateful hot reload, a feature that lets you make changes to your running code without recompilation. You'll see a "debug" banner in the top right-hand corner of your app when running in this mode, to remind you that performance is not characteristic of the finished release app.</p><div class="header-wrapper"><h3 id="run-ios">How does Flutter run my code on iOS?</h3><a class="heading-link" href="#run-ios" aria-label="Link to 'How does Flutter run my code on iOS?' section">#</a></div><p>The engine's C and C++ code are compiled with LLVM. The Dart code (both the SDK's and yours) are ahead-of-time (AOT) compiled into a native, ARM library. That library is included in a "runner" iOS project, and the whole thing is built into an <code>.ipa</code>. When launched, the app loads the Flutter library. Any rendering, input or event handling, and so on, are delegated to the compiled Flutter and app code. This is similar to the way many game engines work.</p><p>During debug mode, Flutter uses a virtual machine (VM) to run its code in order to enable stateful hot reload, a feature that lets you make changes to your running code without recompilation. You'll see a "debug" banner in the top right-hand corner of your app when running in this mode, to remind you that performance is not characteristic of the finished release app.</p><div class="header-wrapper"><h3 id="does-flutter-use-my-operating-systems-built-in-platform-widgets">Does Flutter use my operating system's built-in platform widgets?</h3><a class="heading-link" href="#does-flutter-use-my-operating-systems-built-in-platform-widgets" aria-label="Link to 'Does Flutter use my operating system's built-in platform widgets?' section">#</a></div><p>No. Instead, Flutter provides a set of widgets (including Material Design and Cupertino (iOS-styled) widgets), managed and rendered by Flutter's framework and engine. You can browse a <a href="/ui/widgets">catalog of Flutter's widgets</a>.</p><p>We believe that the end result is higher quality apps. If we reused the built-in platform widgets, the quality and performance of Flutter apps would be limited by the flexibility and quality of those widgets.</p><p>In Android, for example, there's a hard-coded set of gestures and fixed rules for disambiguating them. In Flutter, you can write your own gesture recognizer that is a first class participant in the <a href="/ui/interactivity/gestures">gesture system</a>. Moreover, two widgets authored by different people can coordinate to disambiguate gestures.</p><p>Modern app design trends point towards designers and users wanting more motion-rich UIs and brand-first designs. In order to achieve that level of customized, beautiful design, Flutter is architectured to drive pixels instead of the built-in widgets.</p><p>By using the same renderer, framework, and set of widgets, it's easier to publish for multiple platforms from the same codebase, without having to do careful and costly planning to align different feature sets and API characteristics.</p><p>By using a single language, a single framework, and a single set of libraries for all of your code (regardless if your UI is different for each platform or not), we also aim to help lower app development and maintenance costs.</p><div class="header-wrapper"><h3 id="what-happens-when-my-mobile-os-updates-and-introduces-new-widgets">What happens when my mobile OS updates and introduces new widgets?</h3><a class="heading-link" href="#what-happens-when-my-mobile-os-updates-and-introduces-new-widgets" aria-label="Link to 'What happens when my mobile OS updates and introduces new widgets?' section">#</a></div><p>The Flutter team watches the adoption and demand for new mobile widgets from iOS and Android, and aims to work with the community to build support for new widgets. This work might come in the form of lower-level framework features, new composable widgets, or new widget implementations.</p><p>Flutter's layered architecture is designed to support numerous widget libraries, and we encourage and support the community in building and maintaining widget libraries.</p><div class="header-wrapper"><h3 id="what-happens-when-my-mobile-os-updates-and-introduces-new-platform-capabilities">What happens when my mobile OS updates and introduces new platform capabilities?</h3><a class="heading-link" href="#what-happens-when-my-mobile-os-updates-and-introduces-new-platform-capabilities" aria-label="Link to 'What happens when my mobile OS updates and introduces new platform capabilities?' section">#</a></div><p>Flutter's interop and plugin system is designed to allow developers to access new mobile OS features and capabilities immediately. Developers don't have to wait for the Flutter team to expose the new mobile OS capability.</p><div class="header-wrapper"><h3 id="does-flutter-support-code-push">Does Flutter support code push?</h3><a class="heading-link" href="#does-flutter-support-code-push" aria-label="Link to 'Does Flutter support code push?' section">#</a></div><p>Code push, or the ability to push app updates directly to a user's device, isn't directly supported by Flutter. However, we are aware of a third party solution, called <a href="https://shorebird.dev/">Shorebird</a>. Note that this is not an official endorsement or recommendation.</p><div class="header-wrapper"><h3 id="what-operating-systems-can-i-use-to-build-a-flutter-app">What operating systems can I use to build a Flutter app?</h3><a class="heading-link" href="#what-operating-systems-can-i-use-to-build-a-flutter-app" aria-label="Link to 'What operating systems can I use to build a Flutter app?' section">#</a></div><p>Flutter supports development using Linux, macOS, ChromeOS, and Windows.</p><div class="header-wrapper"><h3 id="what-language-is-flutter-written-in">What language is Flutter written in?</h3><a class="heading-link" href="#what-language-is-flutter-written-in" aria-label="Link to 'What language is Flutter written in?' section">#</a></div><p><a href="https://dart.dev/">Dart</a>, a fast-growing modern language optimized for client apps. The underlying graphics framework and the Dart virtual machine are implemented in C/C++.</p><div class="header-wrapper"><h3 id="why-did-flutter-choose-to-use-dart">Why did Flutter choose to use Dart?</h3><a class="heading-link" href="#why-did-flutter-choose-to-use-dart" aria-label="Link to 'Why did Flutter choose to use Dart?' section">#</a></div><p>During the initial development phase, the Flutter team looked at a lot of languages and runtimes, and ultimately adopted Dart for the framework and widgets. Flutter used four primary dimensions for evaluation, and considered the needs of framework authors, developers, and end users. We found many languages met some requirements, but Dart scored highly on all of our evaluation dimensions and met all our requirements and criteria.</p><p>Dart runtimes and compilers support the combination of two critical features for Flutter: a JIT-based fast development cycle that allows for shape changing and stateful hot reloads in a language with types, plus an Ahead-of-Time compiler that emits efficient ARM code for fast startup and predictable performance of production deployments.</p><p>In addition, we have the opportunity to work closely with the Dart community, which is actively investing resources in improving Dart for use in Flutter. For example, when we adopted Dart, the language didn't have an ahead-of-time toolchain for producing native binaries, which is instrumental in achieving predictable, high performance, but now the language does because the Dart team built it for Flutter. Similarly, the Dart VM has previously been optimized for throughput but the team is now optimizing the VM for latency, which is more important for Flutter's workload.</p><p>Dart scores highly for us on the following primary criteria:</p><dl><dt><em>Developer productivity</em></dt><dd>One of Flutter's main value propositions is that it saves engineering resources by letting developers create apps for both iOS and Android with the same codebase. Using a highly productive language accelerates developers further and makes Flutter more attractive. This was very important to both our framework team as well as our developers. The majority of Flutter is built in the same language we give to our users, so we need to stay productive at 100k's lines of code, without sacrificing approachability or readability of the framework and widgets for our developers.</dd><dt><em>Object-orientation</em></dt><dd>For Flutter, we want a language that's suited to Flutter's problem domain: creating visual user experiences. The industry has multiple decades of experience building user interface frameworks in object-oriented languages. While we could use a non-object-oriented language, this would mean reinventing the wheel to solve several hard problems. Plus, the vast majority of developers have experience with object-oriented development, making it easier to learn how to develop with Flutter.</dd><dt><em>Predictable, high performance</em></dt><dd>With Flutter, we want to empower developers to create fast, fluid user experiences. In order to achieve that, we need to be able to run a significant amount of end-developer code during every animation frame. That means we need a language that both delivers high performance and predictable performance, without periodic pauses that would cause dropped frames.</dd><dt><em>Fast allocation</em></dt><dd>The Flutter framework uses a functional-style flow that depends heavily on the underlying memory allocator efficiently handling small, short-lived allocations. This style was developed in languages with this property and doesn't work efficiently in languages that lack this facility.</dd></dl><div class="header-wrapper"><h3 id="can-flutter-run-any-dart-code">Can Flutter run any Dart code?</h3><a class="heading-link" href="#can-flutter-run-any-dart-code" aria-label="Link to 'Can Flutter run any Dart code?' section">#</a></div><p>Flutter can run Dart code that doesn't directly or transitively import <code>dart:mirrors</code> or <code>dart:html</code>.</p><div class="header-wrapper"><h3 id="can-flutter-compile-dart-to-javascript">Can Flutter compile Dart to JavaScript?</h3><a class="heading-link" href="#can-flutter-compile-dart-to-javascript" aria-label="Link to 'Can Flutter compile Dart to JavaScript?' section">#</a></div><p>Flutter compiles Dart to JavaScript with the <a href="https://dart.dev/tools/dart-compile#js"><code>js.dart</code></a> package.</p><div class="header-wrapper"><h3 id="how-big-is-the-flutter-engine">How big is the Flutter engine?</h3><a class="heading-link" href="#how-big-is-the-flutter-engine" aria-label="Link to 'How big is the Flutter engine?' section">#</a></div><p>In March 2021, we measured the download size of a <a href="https://github.com/flutter/flutter/tree/75228a59dacc24f617272f7759677e242bbf74ec/examples/hello_world">minimal Flutter app</a> (no Material Components, just a single <code>Center</code> widget, built with <code>flutter build apk --split-per-abi</code>), bundled and compressed as a release APK, to be approximately 4.3 MB for ARM32, and 4.8 MB for ARM64.</p><p>On ARM32, the core engine is approximately 3.4 MB (compressed), the framework + app code is approximately 765 KB (compressed), the LICENSE file is 58 KB (compressed), and necessary Java code (<code>classes.dex</code>) is 120 KB (compressed).</p><p>In ARM64, the core engine is approximately 4.0 MB (compressed), the framework + app code is approximately 659 KB (compressed), the LICENSE file is 58 KB (compressed), and necessary Java code (<code>classes.dex</code>) is 120 KB (compressed).</p><p>These numbers were measured using <a href="https://developer.android.com/studio/command-line/apkanalyzer">apkanalyzer</a>, which is also <a href="https://developer.android.com/studio/build/apk-analyzer">built into Android Studio</a>.</p><p>On iOS, a release IPA of the same app has a download size of 10.9 MB on an iPhone X, as reported by Apple's App Store Connect. The IPA is larger than the APK mainly because Apple encrypts binaries within the IPA, making the compression less efficient (see the <a href="https://developer.apple.com/library/archive/qa/qa1795/_index.html#//apple_ref/doc/uid/DTS40014195-CH1-APP_STORE_CONSIDERATIONS">iOS App Store Specific Considerations</a> section of Apple's <a href="https://developer.apple.com/library/archive/qa/qa1795/_index.html">QA1795</a>).</p><aside class="alert alert-info"><div class="alert-header"><i class="material-symbols" aria-hidden="true">info</i> <span>Note</span></div><div class="alert-content"><p>The release engine binary used to include LLVM IR (bitcode). However, Apple <a href="https://developer.apple.com/documentation/xcode-release-notes/xcode-14-release-notes">deprecated bitcode in Xcode 14</a> and removed support, so it has been removed from the Flutter 3.7 release.</p></div></aside><p>Of course, we recommend that you measure your own app. To do that, see <a href="/perf/app-size">Measuring your app's size</a>.</p><div class="header-wrapper"><h3 id="how-does-flutter-define-a-pixel">How does Flutter define a pixel?</h3><a class="heading-link" href="#how-does-flutter-define-a-pixel" aria-label="Link to 'How does Flutter define a pixel?' section">#</a></div><p>Flutter uses logical pixels, and often refers to them merely as "pixels". Flutter's <a href="https://api.flutter.dev/flutter/dart-html/Window/devicePixelRatio.html"><code>devicePixelRatio</code></a> expresses the ratio between physical pixels and logical CSS pixels.</p><div class="header-wrapper"><h2 id="capabilities">Capabilities</h2><a class="heading-link" href="#capabilities" aria-label="Link to 'Capabilities' section">#</a></div><div class="header-wrapper"><h3 id="what-kind-of-app-performance-can-i-expect">What kind of app performance can I expect?</h3><a class="heading-link" href="#what-kind-of-app-performance-can-i-expect" aria-label="Link to 'What kind of app performance can I expect?' section">#</a></div><p>In general, you can expect excellent performance. Flutter is designed to help developers easily achieve a constant 60fps. Flutter apps run using natively compiled code, so no interpreters are involved. This means that Flutter apps start quickly.</p><p>Flutter's performance when using native code depends on your <a href="/app-architecture">app's architecture</a>. For optimal performance, familiarize yourself with Flutter's <a href="/platform-integration/platform-channels">platform channels</a>. These channels provide an asynchronous message-passing system for communicating with native code.</p><p>To learn more about performance and Flutter, see the <a href="/perf/faq">Performance FAQ</a>.</p><div class="header-wrapper"><h3 id="hot-reload">What kind of developer cycles can I expect? How long between edit and refresh?</h3><a class="heading-link" href="#hot-reload" aria-label="Link to 'What kind of developer cycles can I expect? How long between edit and refresh?' section">#</a></div><p>Flutter implements a <em>hot reload</em> developer cycle. You can expect sub-second reload times, on a device or an emulator/simulator.</p><p>Flutter's hot reload is <em>stateful</em> so the app state is retained after a reload. This means you can quickly iterate on a screen deeply nested in your app, without starting from the home screen after every reload.</p><div class="header-wrapper"><h3 id="how-is-hot-reload-different-from-hot-restart">How is <em>hot reload</em> different from <em>hot restart</em>?</h3><a class="heading-link" href="#how-is-hot-reload-different-from-hot-restart" aria-label="Link to 'How is hot reload different from hot restart?' section">#</a></div><p>Hot reload works by injecting updated source code files into the running Dart VM (Virtual Machine). This doesn't only add new classes, but also adds methods and fields to existing classes, and changes existing functions. Hot restart resets the state to the app's initial state.</p><p>For more information, see <a href="/tools/hot-reload">Hot reload</a>.</p><div class="header-wrapper"><h3 id="where-can-i-deploy-my-flutter-app">Where can I deploy my Flutter app?</h3><a class="heading-link" href="#where-can-i-deploy-my-flutter-app" aria-label="Link to 'Where can I deploy my Flutter app?' section">#</a></div><p>You can compile and deploy your Flutter app to iOS, Android, <a href="/platform-integration/web">web</a>, and <a href="/platform-integration/desktop">desktop</a>.</p><div class="header-wrapper"><h3 id="what-devices-and-os-versions-does-flutter-run-on">What devices and OS versions does Flutter run on?</h3><a class="heading-link" href="#what-devices-and-os-versions-does-flutter-run-on" aria-label="Link to 'What devices and OS versions does Flutter run on?' section">#</a></div><ul><li><p>We support and test running Flutter on a variety of low-end to high-end platforms. For a detailed list of the platforms on which we test, see the list of <a href="/reference/supported-platforms">supported platforms</a>.</p></li><li><p>Flutter supports building ahead-of-time (AOT) compiled libraries for <code>x86-64</code>, <code>armeabi-v7a</code>, and <code>arm64-v8a</code>.</p></li><li><p>Apps built for ARMv7 or ARM64 run fine (using ARM emulation) on many x86-64 Android devices.</p></li><li><p>We support developing Flutter apps on a range of platforms. See the system requirements listed under each <a href="/get-started/install">development operating system</a>.</p></li></ul><div class="header-wrapper"><h3 id="does-flutter-run-on-the-web">Does Flutter run on the web?</h3><a class="heading-link" href="#does-flutter-run-on-the-web" aria-label="Link to 'Does Flutter run on the web?' section">#</a></div><p>Yes, web support is available in the stable channel. For more details, check out the <a href="/platform-integration/web/building">web instructions</a>.</p><div class="header-wrapper"><h3 id="can-i-use-flutter-to-build-desktop-apps">Can I use Flutter to build desktop apps?</h3><a class="heading-link" href="#can-i-use-flutter-to-build-desktop-apps" aria-label="Link to 'Can I use Flutter to build desktop apps?' section">#</a></div><p>Yes, desktop support is in stable for Windows, macOS, and Linux.</p><div class="header-wrapper"><h3 id="can-i-use-flutter-inside-of-my-existing-native-app">Can I use Flutter inside of my existing native app?</h3><a class="heading-link" href="#can-i-use-flutter-inside-of-my-existing-native-app" aria-label="Link to 'Can I use Flutter inside of my existing native app?' section">#</a></div><p>Yes, learn more in the <a href="/add-to-app">add-to-app</a> section of our website.</p><div class="header-wrapper"><h3 id="can-i-access-platform-services-and-apis-like-sensors-and-local-storage">Can I access platform services and APIs like sensors and local storage?</h3><a class="heading-link" href="#can-i-access-platform-services-and-apis-like-sensors-and-local-storage" aria-label="Link to 'Can I access platform services and APIs like sensors and local storage?' section">#</a></div><p>Yes. Flutter gives developers out-of-the-box access to <em>some</em> platform-specific services and APIs from the operating system. However, we want to avoid the "lowest common denominator" problem with most cross-platform APIs, so we don't intend to build cross-platform APIs for all native services and APIs.</p><p>A number of platform services and APIs have <a href="https://pub.dev/flutter/">ready-made packages</a> available on pub.dev. Using an existing package <a href="/packages-and-plugins/using-packages">is easy</a>.</p><p>Finally, we encourage developers to use Flutter's asynchronous message passing system to create your own integrations with <a href="/platform-integration/platform-channels">platform and third-party APIs</a>. Developers can expose as much or as little of the platform APIs as they need, and build layers of abstractions that are a best fit for their project.</p><div class="header-wrapper"><h3 id="can-i-extend-and-customize-the-bundled-widgets">Can I extend and customize the bundled widgets?</h3><a class="heading-link" href="#can-i-extend-and-customize-the-bundled-widgets" aria-label="Link to 'Can I extend and customize the bundled widgets?' section">#</a></div><p>Absolutely. Flutter's widget system was designed to be easily customizable.</p><p>Rather than having each widget provide a large number of parameters, Flutter embraces composition. Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets. For example, rather than subclassing a generic button widget, <code>ElevatedButton</code> combines a Material widget with a <code>GestureDetector</code> widget. The Material widget provides the visual design and the <code>GestureDetector</code> widget provides the interaction design.</p><p>To create a button with a custom visual design, you can combine widgets that implement your visual design with a <code>GestureDetector</code>, which provides the interaction design. For example, <code>CupertinoButton</code> follows this approach and combines a <code>GestureDetector</code> with several other widgets that implement its visual design.</p><p>Composition gives you maximum control over the visual and interaction design of your widgets while also allowing a large amount of code reuse. In the framework, we've decomposed complex widgets to pieces that separately implement the visual, interaction, and motion design. You can remix these widgets however you like to make your own custom widgets that have full range of expression.</p><div class="header-wrapper"><h3 id="why-would-i-want-to-share-layout-code-across-ios-and-android">Why would I want to share layout code across iOS and Android?</h3><a class="heading-link" href="#why-would-i-want-to-share-layout-code-across-ios-and-android" aria-label="Link to 'Why would I want to share layout code across iOS and Android?' section">#</a></div><p>You can choose to implement different app layouts for iOS and Android. Developers are free to check the mobile OS at runtime and render different layouts, though we find this practice to be rare.</p><p>More and more, we see mobile app layouts and designs evolving to be more brand-driven and unified across platforms. This implies a strong motivation to share layout and UI code across iOS and Android.</p><p>The brand identity and customization of the app's aesthetic design is now becoming more important than strictly adhering to traditional platform aesthetics. For example, app designs often require custom fonts, colors, shapes, motion, and more in order to clearly convey their brand identity.</p><p>We also see common layout patterns deployed across iOS and Android. For example, the "bottom nav bar" pattern can now be naturally found across iOS and Android. There seems to be a convergence of design ideas across mobile platforms.</p><div class="header-wrapper"><h3 id="can-i-interop-with-my-mobile-platforms-default-programming-language">Can I interop with my mobile platform's default programming language?</h3><a class="heading-link" href="#can-i-interop-with-my-mobile-platforms-default-programming-language" aria-label="Link to 'Can I interop with my mobile platform's default programming language?' section">#</a></div><p>Yes, Flutter supports calling into the platform, including integrating with Java or Kotlin code on Android, and Swift or Objective-C code on iOS. This is enabled by a flexible message passing style where a Flutter app might send and receive messages to the mobile platform using a <a href="https://api.flutter.dev/flutter/services/BasicMessageChannel-class.html"><code>BasicMessageChannel</code></a>.</p><p>Learn more about accessing platform and third-party services in Flutter with <a href="/platform-integration/platform-channels">platform channels</a>.</p><p>Here is an <a href="https://github.com/flutter/flutter/tree/main/examples/platform_channel">example project</a> that shows how to use a platform channel to access battery state information on iOS and Android.</p><div class="header-wrapper"><h3 id="does-flutter-come-with-a-reflection-mirrors-system">Does Flutter come with a reflection / mirrors system?</h3><a class="heading-link" href="#does-flutter-come-with-a-reflection-mirrors-system" aria-label="Link to 'Does Flutter come with a reflection / mirrors system?' section">#</a></div><p>No. Dart includes <code>dart:mirrors</code>, which provides type reflection. But since Flutter apps are pre-compiled for production, and binary size is always a concern with mobile apps, this library is unavailable for Flutter apps.</p><p>Using static analysis we can strip out anything that isn't used ("tree shaking"). If you import a huge Dart library but only use a self-contained two-line method, then you only pay the cost of the two-line method, even if that Dart library itself imports dozens and dozens of other libraries. This guarantee is only secure if Dart can identify the code path at compile time. To date, we've found other approaches for specific needs that offer a better trade-off, such as code generation.</p><div class="header-wrapper"><h3 id="are-internationalization-and-localization-supported">Are internationalization and localization supported?</h3><a class="heading-link" href="#are-internationalization-and-localization-supported" aria-label="Link to 'Are internationalization and localization supported?' section">#</a></div><p>Yes, Flutte`r supports internationalization (i18n) and localization (l10n) so that your apps are adaptable to different languages and cultures. You can learn more in the <a href="/ui/accessibility-and-internationalization/internationalization">internationalization documentation</a>.</p><div class="header-wrapper"><h3 id="what-accessibility-is-supported">What accessibility is supported?</h3><a class="heading-link" href="#what-accessibility-is-supported" aria-label="Link to 'What accessibility is supported?' section">#</a></div><p>Flutter supports strict accessibility requirements (a11y). For example, screen readers, large text, color contrast, and hardware switch control are all supported. To learn more, see the <a href="/ui/accessibility-and-internationalization/accessibility">accessibility documentation</a>.</p><div class="header-wrapper"><h3 id="how-do-i-write-parallel-andor-concurrent-apps-for-flutter">How do I write parallel and/or concurrent apps for Flutter?</h3><a class="heading-link" href="#how-do-i-write-parallel-andor-concurrent-apps-for-flutter" aria-label="Link to 'How do I write parallel and/or concurrent apps for Flutter?' section">#</a></div><p>Flutter supports isolates. Isolates are separate heaps in Flutter's VM, and they are able to run in parallel (usually implemented as separate threads). Isolates communicate by sending and receiving asynchronous messages.</p><p>Check out an <a href="https://github.com/flutter/flutter/blob/main/examples/layers/services/isolate.dart">example of using isolates with Flutter</a>.</p><div class="header-wrapper"><h3 id="can-i-run-dart-code-in-the-background-of-a-flutter-app">Can I run Dart code in the background of a Flutter app?</h3><a class="heading-link" href="#can-i-run-dart-code-in-the-background-of-a-flutter-app" aria-label="Link to 'Can I run Dart code in the background of a Flutter app?' section">#</a></div><p>Yes, you can run Dart code in a background process on both iOS and Android. For more information, see the free Medium article <a href="https://medium.com/flutter/executing-dart-in-the-background-with-flutter-plugins-and-geofencing-2b3e40a1a124">Executing Dart in the Background with Flutter Plugins and Geofencing</a>.</p><div class="header-wrapper"><h3 id="can-i-use-jsonxmlprotobufs-and-so-on-with-flutter">Can I use JSON/XML/<wbr>Protobufs (and so on) with Flutter?</h3><a class="heading-link" href="#can-i-use-jsonxmlprotobufs-and-so-on-with-flutter" aria-label="Link to 'Can I use JSON/XML/Protobufs (and so on) with Flutter?' section">#</a></div><p>Absolutely. There are libraries on <a href="https://pub.dev">pub.dev</a> for JSON, XML, protobufs, and many other utilities and formats.</p><p>For a detailed writeup on using JSON with Flutter, check out the <a href="/data-and-backend/serialization/json">JSON tutorial</a>.</p><div class="header-wrapper"><h3 id="can-i-build-3d-opengl-apps-with-flutter">Can I build 3D (OpenGL) apps with Flutter?</h3><a class="heading-link" href="#can-i-build-3d-opengl-apps-with-flutter" aria-label="Link to 'Can I build 3D (OpenGL) apps with Flutter?' section">#</a></div><p>Today we don't support 3D using OpenGL ES or similar. We have long-term plans to expose an optimized 3D API, but right now we're focused on 2D.</p><div class="header-wrapper"><h3 id="why-is-my-apk-or-ipa-so-big">Why is my APK or IPA so big?</h3><a class="heading-link" href="#why-is-my-apk-or-ipa-so-big" aria-label="Link to 'Why is my APK or IPA so big?' section">#</a></div><p>Usually, assets including images, sound files, fonts, and so on, are the bulk of an APK or IPA. Various tools in the Android and iOS ecosystems can help you understand what's inside of your APK or IPA.</p><p>Also, be sure to create a <em>release build</em> of your APK or IPA with the Flutter tools. A release build is usually <em>much</em> smaller than a <em>debug build</em>.</p><p>Learn more about creating a <a href="/deployment/android">release build of your Android app</a>, and creating a <a href="/deployment/ios">release build of your iOS app</a>. Also, check out <a href="/perf/app-size">Measuring your app's size</a>.</p><div class="header-wrapper"><h3 id="do-flutter-apps-run-on-chromebooks">Do Flutter apps run on Chromebooks?</h3><a class="heading-link" href="#do-flutter-apps-run-on-chromebooks" aria-label="Link to 'Do Flutter apps run on Chromebooks?' section">#</a></div><p>We have seen Flutter apps run on some Chromebooks. We are tracking <a href="https://github.com/flutter/flutter/labels/platform-arc">issues related to running Flutter on Chromebooks</a>.</p><div class="header-wrapper"><h3 id="is-flutter-abi-compatible">Is Flutter ABI compatible?</h3><a class="heading-link" href="#is-flutter-abi-compatible" aria-label="Link to 'Is Flutter ABI compatible?' section">#</a></div><p>Flutter and Dart don't offer application binary interface (ABI) compatibility. Offering ABI compatibility is not a current goal for Flutter or Dart.</p><div class="header-wrapper"><h3 id="how-does-flutter-handle-scrolling">How does Flutter handle scrolling?</h3><a class="heading-link" href="#how-does-flutter-handle-scrolling" aria-label="Link to 'How does Flutter handle scrolling?' section">#</a></div><p>A custom scrolling implementation is used for each app platform so that scrolling matches that platform's native scrolling look and feel. To learn more about scrolling with Flutter, see the <a href="/ui/layout/scrolling">scrolling</a> documentation.</p><div class="header-wrapper"><h2 id="framework">Framework</h2><a class="heading-link" href="#framework" aria-label="Link to 'Framework' section">#</a></div><div class="header-wrapper"><h3 id="why-is-the-build-method-on-state-rather-than-statefulwidget">Why is the build() method on State, rather than StatefulWidget?</h3><a class="heading-link" href="#why-is-the-build-method-on-state-rather-than-statefulwidget" aria-label="Link to 'Why is the build() method on State, rather than StatefulWidget?' section">#</a></div><p>Putting a <code>Widget build(BuildContext context)</code> method on <code>State</code> rather putting a <code>Widget build(BuildContext context, State state)</code> method on <code>StatefulWidget</code> gives developers more flexibility when subclassing <code>StatefulWidget</code>. You can read a more <a href="https://api.flutter.dev/flutter/widgets/State/build.html">detailed discussion on the API docs for <code>State.build</code></a>.</p><div class="header-wrapper"><h3 id="where-is-flutters-markup-language-why-doesnt-flutter-have-a-markup-syntax">Where is Flutter's markup language? Why doesn't Flutter have a markup syntax?</h3><a class="heading-link" href="#where-is-flutters-markup-language-why-doesnt-flutter-have-a-markup-syntax" aria-label="Link to 'Where is Flutter's markup language? Why doesn't Flutter have a markup syntax?' section">#</a></div><p>Flutter UIs are built with an imperative, object-oriented language (Dart, the same language used to build Flutter's framework). Flutter doesn't ship with a declarative markup.</p><p>We found that UIs dynamically built with code allow for more flexibility. For example, we have found it difficult for a rigid markup system to express and produce customized widgets with bespoke behaviors.</p><p>We have also found that our "code-first" approach better allows for features like hot reload and dynamic environment adaptations.</p><p>It's possible to create a custom language that is then converted to widgets on the fly. Because build methods are "just code", they can do anything, including interpreting markup and turning it into widgets.</p><div class="header-wrapper"><h3 id="my-app-has-a-debug-bannerribbon-in-the-upper-right-why-am-i-seeing-that">My app has a Debug banner/ribbon in the upper right. Why am I seeing that?</h3><a class="heading-link" href="#my-app-has-a-debug-bannerribbon-in-the-upper-right-why-am-i-seeing-that" aria-label="Link to 'My app has a Debug banner/ribbon in the upper right. Why am I seeing that?' section">#</a></div><p>By default, the <code>flutter run</code> command uses the debug build configuration.</p><p>The debug configuration runs your Dart code in a VM (Virtual Machine) enabling a fast development cycle with <a href="/tools/hot-reload">hot reload</a> (release builds are compiled using the standard <a href="#run-android">Android</a> and <a href="#run-ios">iOS</a> toolchains).</p><p>The debug configuration also checks all asserts, which helps you catch errors early during development, but imposes a runtime cost. The "Debug" banner indicates that these checks are enabled. You can run your app without these checks by using either the <code>--profile</code> or <code>--release</code> flag to <code>flutter run</code>.</p><p>If your IDE uses the Flutter plugin, you can launch the app in profile or release mode. For VS Code, use the <strong>Run > Start debugging</strong> or <strong>Run > Run without debugging</strong> menu entries. For IntelliJ, use the menu entries <strong>Run > Flutter Run in Profile Mode</strong> or <strong>Release Mode</strong>.</p><div class="header-wrapper"><h3 id="what-programming-paradigm-does-flutters-framework-use">What programming paradigm does Flutter's framework use?</h3><a class="heading-link" href="#what-programming-paradigm-does-flutters-framework-use" aria-label="Link to 'What programming paradigm does Flutter's framework use?' section">#</a></div><p>Flutter is a multi-paradigm programming environment. Many programming techniques developed over the past few decades are used in Flutter. We use each one where we believe the strengths of the technique make it particularly well-suited. In no particular order:</p><dl><dt><strong>Composition</strong></dt><dd>The primary paradigm used by Flutter is that of using small objects with narrow scopes of behavior, composed together to obtain more complicated effects, sometimes called <em>aggressive composition</em>. Most widgets in the Flutter widget library are built in this way. For example, the Material <a href="https://api.flutter.dev/flutter/material/TextButton-class.html"><code>TextButton</code></a> class is built using an <a href="https://api.flutter.dev/flutter/widgets/IconTheme-class.html"><code>IconTheme</code></a>, an <a href="https://api.flutter.dev/flutter/material/InkWell-class.html"><code>InkWell</code></a>, a <a href="https://api.flutter.dev/flutter/widgets/Padding-class.html"><code>Padding</code></a>, a <a href="https://api.flutter.dev/flutter/widgets/Center-class.html"><code>Center</code></a>, a <a href="https://api.flutter.dev/flutter/material/Material-class.html"><code>Material</code></a>, an <a href="https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html"><code>AnimatedDefaultTextStyle</code></a>, and a <a href="https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html"><code>ConstrainedBox</code></a>. The <a href="https://api.flutter.dev/flutter/material/InkWell-class.html"><code>InkWell</code></a> is built using a <a href="https://api.flutter.dev/flutter/widgets/GestureDetector-class.html"><code>GestureDetector</code></a>. The <a href="https://api.flutter.dev/flutter/material/Material-class.html"><code>Material</code></a> is built using an <a href="https://api.flutter.dev/flutter/widgets/AnimatedDefaultTextStyle-class.html"><code>AnimatedDefaultTextStyle</code></a>, a <a href="https://api.flutter.dev/flutter/widgets/NotificationListener-class.html"><code>NotificationListener</code></a>, and an <a href="https://api.flutter.dev/flutter/widgets/AnimatedPhysicalModel-class.html"><code>AnimatedPhysicalModel</code></a>. And so on. It's widgets all the way down.</dd><dt><strong>Functional programming</strong></dt><dd>Entire applications can be built with only <a href="https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html"><code>StatelessWidget</code></a>s, which are essentially functions that describe how arguments map to other functions, bottoming out in primitives that compute layouts or paint graphics. (Such applications can't easily have state, so are typically non-interactive.) For example, the <a href="https://api.flutter.dev/flutter/widgets/Icon/icon.html"><code>Icon</code></a> widget is essentially a function that maps its arguments (<a href="https://api.flutter.dev/flutter/widgets/Icon/color.html"><code>color</code></a>, <a href="https://api.flutter.dev/flutter/widgets/Icon/icon.html"><code>icon</code></a>, <a href="https://api.flutter.dev/flutter/widgets/Icon/size.html"><code>size</code></a>) into layout primitives. Additionally, heavy use is made of immutable data structures, including the entire <a href="https://api.flutter.dev/flutter/widgets/Widget-class.html"><code>Widget</code></a> class hierarchy as well as numerous supporting classes such as <a href="https://api.flutter.dev/flutter/dart-ui/Rect-class.html"><code>Rect</code></a> and <a href="https://api.flutter.dev/flutter/painting/TextStyle-class.html"><code>TextStyle</code></a>. On a smaller scale, Dart's <a href="https://api.flutter.dev/flutter/dart-core/Iterable-class.html"><code>Iterable</code></a> API, which makes heavy use of the functional style (map, reduce, where, etc), is frequently used to process lists of values in the framework.</dd><dt><strong>Event-driven programming</strong></dt><dd>User interactions are represented by event objects that are dispatched to callbacks registered with event handlers. Screen updates are triggered by a similar callback mechanism. The <a href="https://api.flutter.dev/flutter/foundation/Listenable-class.html"><code>Listenable</code></a> class, which is used as the basis of the animation system, formalizes a subscription model for events with multiple listeners.</dd><dt><strong>Class-based object-oriented programming</strong></dt><dd>Most of the APIs of the framework are built using classes with inheritance. We use an approach whereby we define very high-level APIs in our base classes, then specialize them iteratively in subclasses. For example, our render objects have a base class (<a href="https://api.flutter.dev/flutter/rendering/RenderObject-class.html"><code>RenderObject</code></a>) that is agnostic regarding the coordinate system, and then we have a subclass (<a href="https://api.flutter.dev/flutter/rendering/RenderBox-class.html"><code>RenderBox</code></a>) that introduces the opinion that the geometry should be based on the Cartesian coordinate system (x/width and y/height).</dd><dt><strong>Prototype-based object-oriented programming</strong></dt><dd>The <a href="https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html"><code>ScrollPhysics</code></a> class chains instances to compose the physics that apply to scrolling dynamically at runtime. This lets the system compose, for example, paging physics with platform-specific physics, without the platform having to be selected at compile time.</dd><dt><strong>Imperative programming</strong></dt><dd>Straightforward imperative programming, usually paired with state encapsulated within an object, is used where it provides the most intuitive solution. For example, tests are written in an imperative style, first describing the situation under test, then listing the invariants that the test must match, then advancing the clock or inserting events as necessary for the test.</dd><dt><strong>Reactive programming</strong></dt><dd>The widget and element trees are sometimes described as reactive, because new inputs provided in a widget's constructor are immediately propagated as changes to lower-level widgets by the widget's build method, and changes made in the lower widgets (for example, in response to user input) propagate back up the tree using event handlers. Aspects of both functional-reactive and imperative-reactive are present in the framework, depending on the needs of the widgets. Widgets with build methods that consist of just an expression describing how the widget reacts to changes in its configuration are functional reactive widgets (for example, the Material <a href="https://api.flutter.dev/flutter/material/Divider-class.html"><code>Divider</code></a> class). Widgets whose build methods construct a list of children over several statements, describing how the widget reacts to changes in its configuration, are imperative reactive widgets (for example, the <a href="https://api.flutter.dev/flutter/material/Chip-class.html"><code>Chip</code></a> class).</dd><dt><strong>Declarative programming</strong></dt><dd>The build methods of widgets are often a single expression with multiple levels of nested constructors, written using a strictly declarative subset of Dart. Such nested expressions could be mechanically transformed to or from any suitably expressive markup language. For example, the <a href="https://api.flutter.dev/flutter/material/UserAccountsDrawerHeader-class.html"><code>UserAccountsDrawerHeader</code></a> widget has a long build method (20+ lines), consisting of a single nested expression. This can also be combined with the imperative style to build UIs that would be harder to describe in a pure-declarative approach.</dd><dt><strong>Generic programming</strong></dt><dd>Types can be used to help developers catch programming errors early. The Flutter framework uses generic programming to help in this regard. For example, the <a href="https://api.flutter.dev/flutter/widgets/State-class.html"><code>State</code></a> class is parameterized in terms of the type of its associated widget, so that the Dart analyzer can catch mismatches of states and widgets. Similarly, the <a href="https://api.flutter.dev/flutter/widgets/GlobalKey-class.html"><code>GlobalKey</code></a> class takes a type parameter so that it can access a remote widget's state in a type-safe manner (using runtime checking), the <a href="https://api.flutter.dev/flutter/widgets/Route-class.html"><code>Route</code></a> interface is parameterized with the type that it is expected to use when <a href="https://api.flutter.dev/flutter/widgets/Navigator/pop.html">popped</a>, and collections such as <a href="https://api.flutter.dev/flutter/dart-core/List-class.html"><code>List</code></a>s, <a href="https://api.flutter.dev/flutter/dart-core/Map-class.html"><code>Map</code></a>s, and <a href="https://api.flutter.dev/flutter/dart-core/Set-class.html"><code>Set</code></a>s are all parameterized so that mismatched elements can be caught early either during analysis or at runtime during debugging.</dd><dt><strong>Concurrent programming</strong></dt><dd>Flutter makes heavy use of <a href="https://api.flutter.dev/flutter/dart-async/Future-class.html"><code>Future</code></a>s and other asynchronous APIs. For example, the animation system reports when an animation is finished by completing a future. The image loading system similarly uses futures to report when a load is complete.</dd><dt><strong>Constraint programming</strong></dt><dd>The layout system in Flutter uses a weak form of constraint programming to determine the geometry of a scene. Constraints (for example, for cartesian boxes, a minimum and maximum width and a minimum and maximum height) are passed from parent to child, and the child selects a resulting geometry (for example, for cartesian boxes, a size, specifically a width and a height) that fulfills those constraints. By using this technique, Flutter can usually lay out an entire scene with a single pass.</dd></dl><div class="header-wrapper"><h2 id="project">Project</h2><a class="heading-link" href="#project" aria-label="Link to 'Project' section">#</a></div><div class="header-wrapper"><h3 id="where-can-i-get-support">Where can I get support?</h3><a class="heading-link" href="#where-can-i-get-support" aria-label="Link to 'Where can I get support?' section">#</a></div><p>If you think you've encountered a bug, file it in our <a href="https://github.com/flutter/flutter/issues">issue tracker</a>. You might also use <a href="https://stackoverflow.com/tags/flutter">Stack Overflow</a> for "HOWTO" type questions. For discussions, join our mailing list at <a href="mailto:flutter-dev@googlegroups.com">flutter-dev@googlegroups.com</a> or seek us out on <a href="https://discord.com/invite/rflutterdev">Discord</a>.</p><p>For more information, see our <a href="https://flutter.dev/community">Community</a> page.</p><div class="header-wrapper"><h3 id="how-do-i-get-involved">How do I get involved?</h3><a class="heading-link" href="#how-do-i-get-involved" aria-label="Link to 'How do I get involved?' section">#</a></div><p>Flutter is open source, and we encourage you to contribute. You can start by simply filing issues for feature requests and bugs in our <a href="https://github.com/flutter/flutter/issues">issue tracker</a>.</p><p>We recommend that you join our mailing list at <a href="mailto:flutter-dev@googlegroups.com">flutter-dev@googlegroups.com</a> and let us know how you're using Flutter and what you'd like to do with it.</p><p>If you're interested in contributing code, you can start by reading our <a href="https://github.com/flutter/flutter/blob/main/CONTRIBUTING.md">Contributing guide</a>, and check out our list of <a href="https://github.com/flutter/flutter/issues?q=is%3Aopen+is%3Aissue+label%3A%22easy+fix%22">easy starter issues</a>.</p><p>Finally, you can connect with helpful Flutter communities. For more information, see the <a href="https://flutter.dev/community">Community</a> page.</p><p>You can also engage with other developers on the Flutter <a href="https://discord.com/invite/rflutterdev">Discord</a>.</p><div class="header-wrapper"><h3 id="is-flutter-open-source">Is Flutter open source?</h3><a class="heading-link" href="#is-flutter-open-source" aria-label="Link to 'Is Flutter open source?' section">#</a></div><p>Yes, Flutter is open source technology. You can find the project on <a href="https://github.com/flutter/flutter">GitHub</a>.</p><div class="header-wrapper"><h3 id="which-software-licenses-apply-to-flutter-and-its-dependencies">Which software license(s) apply to Flutter and its dependencies?</h3><a class="heading-link" href="#which-software-licenses-apply-to-flutter-and-its-dependencies" aria-label="Link to 'Which software license(s) apply to Flutter and its dependencies?' section">#</a></div><p>Flutter includes two components: an engine that ships as a dynamically linked binary, and the Dart framework as a separate binary that the engine loads. The engine uses multiple software components with many dependencies; view the complete list in its <a href="https://github.com/flutter/flutter/blob/main/engine/src/flutter/sky/packages/sky_engine/LICENSE">license file</a>.</p><p>The framework is entirely self-contained and requires <a href="https://github.com/flutter/flutter/blob/main/LICENSE">only one license</a>.</p><p>In addition, any Dart packages you use might have their own license requirements.</p><div class="header-wrapper"><h3 id="how-can-i-determine-the-licenses-my-flutter-application-needs-to-show">How can I determine the licenses my Flutter application needs to show?</h3><a class="heading-link" href="#how-can-i-determine-the-licenses-my-flutter-application-needs-to-show" aria-label="Link to 'How can I determine the licenses my Flutter application needs to show?' section">#</a></div><p>There's an API to find the list of licenses you need to show:</p><ul><li><p>If your application has a <a href="https://api.flutter.dev/flutter/material/Drawer-class.html"><code>Drawer</code></a>, add an <a href="https://api.flutter.dev/flutter/material/AboutListTile-class.html"><code>AboutListTile</code></a>.</p></li><li><p>If your application doesn't have a Drawer but does use the Material Components library, call either <a href="https://api.flutter.dev/flutter/material/showAboutDialog.html"><code>showAboutDialog</code></a> or <a href="https://api.flutter.dev/flutter/material/showLicensePage.html"><code>showLicensePage</code></a>.</p></li><li><p>For a more custom approach, you can get the raw licenses from the <a href="https://api.flutter.dev/flutter/foundation/LicenseRegistry-class.html"><code>LicenseRegistry</code></a>.</p></li></ul><div class="header-wrapper"><h3 id="who-works-on-flutter">Who works on Flutter?</h3><a class="heading-link" href="#who-works-on-flutter" aria-label="Link to 'Who works on Flutter?' section">#</a></div><p>We all do! Flutter is an open source project. Currently, the bulk of the development is done by engineers at Google. If you're excited about Flutter, we encourage you to join the community and <a href="https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md">contribute to Flutter</a>!</p><div class="header-wrapper"><h3 id="what-are-flutters-guiding-principles">What are Flutter's guiding principles?</h3><a class="heading-link" href="#what-are-flutters-guiding-principles" aria-label="Link to 'What are Flutter's guiding principles?' section">#</a></div><p>We believe the following:</p><ul><li>In order to reach every potential user, developers need to target multiple mobile platforms.</li><li>HTML and WebViews as they exist today make it challenging to consistently hit high frame rates and deliver high-fidelity experiences, due to automatic behavior (scrolling, layout) and legacy support.</li><li>Today, it's too costly to build the same app multiple times: it requires different teams, different code bases, different workflows, different tools, etc.</li><li>Developers want an easier, better way to use a single codebase to build mobile apps for multiple target platforms, and they don't want to sacrifice quality, control, or performance.</li></ul><p>We are focused on three things:</p><dl><dt><em>Control</em></dt><dd>Developers deserve access to, and control over, all layers of the system. Which leads to:</dd><dt><em>Performance</em></dt><dd>Users deserve perfectly fluid, responsive, jank-free apps. Which leads to:</dd><dt><em>Fidelity</em>:</dt><dd>Everyone deserves precise, beautiful, delightful app experiences.</dd></dl><div class="header-wrapper"><h3 id="will-apple-reject-my-flutter-app">Will Apple reject my Flutter app?</h3><a class="heading-link" href="#will-apple-reject-my-flutter-app" aria-label="Link to 'Will Apple reject my Flutter app?' section">#</a></div><p>We can't speak for Apple, but their App Store contains many apps built with framework technologies such as Flutter. Indeed, Flutter uses the same fundamental architectural model as Unity, the engine that powers many of the most popular games on the Apple store.</p><p>Apple has frequently featured well-designed apps that are built with Flutter, including <a href="https://itunes.apple.com/us/app/hamilton-the-official-app/id1255231054?mt=8">Hamilton</a> and <a href="https://apps.apple.com/us/app/reflectly-journal-ai-diary/id1241229134">Reflectly</a>.</p><p>As with any app submitted to the Apple store, apps built with Flutter should follow Apple's <a href="https://developer.apple.com/app-store/review/guidelines/">guidelines</a> for App Store submission.</p><p id="page-github-links"><span>Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-01-27.</span> <a href="https://github.com/flutter/website/tree/main/src/content/resources/faq.md" target="_blank" rel="noopener">View source</a> <span>or </span><a href="https://github.com/flutter/website/issues/new?template=1_page_issue.yml&&page-url=https://docs.flutter.dev/resources/faq/&page-source=https://github.com/flutter/website/tree/main/src/content/resources/faq.md" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.</p></article></main></div><footer id="site-footer"><div class="footer-section footer-main"><a class="brand" href="https://flutter.dev"><img src="/assets/images/branding/flutter/logo+text/horizontal/white.svg" alt="Flutter logo" width="164"></a><div class="footer-social-links"><a class="icon-button" href="https://medium.com/flutter" target="_blank" rel="noopener" title="Flutter's Medium blog"><svg><use href="/assets/images/social/medium.svg#medium"></use></svg> </a><a class="icon-button" href="https://youtube.com/@flutterdev" target="_blank" rel="noopener" title="Flutter's YouTube"><svg><use href="/assets/images/social/youtube.svg#youtube"></use></svg> </a><a class="icon-button" href="https://github.com/flutter" target="_blank" rel="noopener" title="Flutter's GitHub"><svg><use href="/assets/images/social/github.svg#github"></use></svg> </a><a class="icon-button" href="https://bsky.app/profile/flutter.dev" target="_blank" rel="noopener" title="Flutter's Bluesky"><svg><use href="/assets/images/social/bluesky.svg#bluesky"></use></svg> </a><a class="icon-button" href="https://twitter.com/FlutterDev" target="_blank" rel="noopener" title="Flutter's X (Twitter)"><svg><use href="/assets/images/social/x.svg#x"></use></svg></a></div></div><div class="footer-section footer-tray"><div class="footer-licenses">Except as otherwise noted, this site is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the <a href="https://opensource.org/licenses/BSD-3-Clause">3-Clause BSD License</a>.</div><div class="footer-utility-links"><ul><li><a href="/tos" title="Terms of use">Terms</a></li><li><a href="/brand" title="Brand usage guidelines">Brand</a></li><li><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" title="Privacy policy">Privacy</a></li><li><a href="/security" title="Security philosophy and practices">Security</a></li></ul></div></div></footer></div><script src="/assets/js/tabs.js?v=4"></script><script src="/assets/js/archive.js?v=4"></script><script src="/assets/js/main.js?v=4"></script></body></html>