CINXE.COM

<!DOCTYPE html> <html lang="en"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://flutter.dev/docs/development/add-to-app/ios","20210603201046","https://web.archive.org/","web","/_static/", "1622751046"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Adding Flutter to iOS - Flutter </title> <link rel="shortcut icon" href="/web/20210603201046im_/https://flutter.dev/images/favicon.png">  <script src="https://web.archive.org/web/20210603201046js_/https://www.googleoptimize.com/optimize.js?id=GTM-MPZP6R8"></script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20210603201046/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-ND4LWWZ');</script>  <meta name="description" content=""> <meta name="keywords" content=" "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Adding Flutter to iOS"> <meta property="og:url" content="https://web.archive.org/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios"> <meta property="og:description" content=""> <meta property="og:image" content="https://web.archive.org/web/20210603201046im_/https://flutter.dev/images/flutter-logo-sharing.png"> <link href="https://web.archive.org/web/20210603201046cs_/https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:300,400,500|Roboto+Mono:400,700|Material+Icons" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/web/20210603201046cs_/https://flutter.dev/assets/main-5179236d2a521f0d8c964446a1eaa9bee448793c298286381d5cbdc3f6776229.css" integrity="" crossorigin="anonymous"> <script src="https://web.archive.org/web/20210603201046js_/https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript" src="/web/20210603201046js_/https://flutter.dev/assets/main-3d1fe020941b4eb18d313f0eb6a8ff9fd170a0b3ed6913d333d804fec0136545.js" integrity="" crossorigin="anonymous"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//web.archive.org/web/20210603201046/https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67589403-1', 'auto'); ga('send', 'pageview'); </script> <meta name="google-site-verification" content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4"/> <meta name="google-site-verification" content="Zom-prnFykfYycmI_nzRWYx5r6Z9OwR-yEsgElRz_Ug"/> </head> <body>  <noscript><iframe src="https://web.archive.org/web/20210603201046if_/https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="overlay-under-drawer"></div> <header class="site-header"> <nav class="navbar navbar-expand-md justify-content-start justify-content-md-between"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="material-icons">menu</i> </button> <a class="navbar-brand" href="/web/20210603201046/https://flutter.dev/"> <img alt="Flutter logo" height="37" width="129" class="align-middle" src="/web/20210603201046im_/https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png" integrity="sha256-HK9kdr7tdq3sPEd1htpU3mtVKy9CEI7FvGjcY7ri33U=" crossorigin="anonymous"> </a> <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent"> <div class="site-header__sheet-bg" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></div> <div class="site-header__sheet"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" href="/web/20210603201046/https://flutter.dev/docs">Docs</a> </li> <div class="site-sidebar site-sidebar--header d-md-none"> <ul class="nav flex-column"><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/learn-more">5. Learn more</a> </li><div class="dropdown-divider"></div><li class="nav-item"> <a class="nav-link collapsable" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="true" aria-controls="sidenav-1-7">From another platform? </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/android-devs">Flutter for Android devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/ios-devs">Flutter for iOS devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/react-native-devs">Flutter for React Native devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/web-devs">Flutter for web devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/xamarin-forms-devs">Flutter for Xamarin.Forms devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/declarative">Introduction to declarative UI</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/web">Building a web app</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Samples & tutorials</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-2"> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link active" data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="true" aria-controls="sidenav-3">Development</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1" href="/web/20210603201046/https://flutter.dev/docs/development/ui" role="button" aria-expanded="false" aria-controls="sidenav-3-1">User interface </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/widgets-intro">Introduction to widgets</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-2" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout" role="button" aria-expanded="false" aria-controls="sidenav-3-1-2">Building layouts </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/adaptive-responsive">Creating adaptive and responsive apps</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/building-adaptive-apps">Building adaptive apps [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/box-constraints">Box constraints</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/assets-and-images">Assets and images</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-5" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation" role="button" aria-expanded="false" aria-controls="sidenav-3-1-5">Navigation & routing </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation/url-strategies">URL strategies</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-6" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations" role="button" aria-expanded="false" aria-controls="sidenav-3-1-6">Animations </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/staggered-animations">Staggered animations</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-7" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced" role="button" aria-expanded="false" aria-controls="sidenav-3-1-7">Advanced UI </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/splash-screen">Splash screens</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/widgets">Widget catalog</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend" role="button" aria-expanded="false" aria-controls="sidenav-3-2">Data & backend </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2-1" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt" role="button" aria-expanded="false" aria-controls="sidenav-3-2-1">State management </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative">Think declaratively</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app">Ephemeral vs app state</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple">Simple app state management</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/options">Options</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/google-apis">Google APIs</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization" role="button" aria-expanded="false" aria-controls="sidenav-3-3">Accessibility & internationalization </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization/internationalization">Internationalization</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-4" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration" role="button" aria-expanded="false" aria-controls="sidenav-3-4">Platform integration </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/release-notes/supported-platforms">Supported platforms</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/ios-app-clip">Adding iOS App Clip support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/platform-views">Hosting native Android and iOS views</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/platform-channels">Writing platform-specific code</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="false" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">Developing packages & plugins</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li></ul> </li> <li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="true" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app">Introduction</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-2" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android" role="button" aria-expanded="false" aria-controls="sidenav-3-6-2">Adding to an Android app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen">Add a single Flutter screen</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-fragment">Add a Flutter Fragment</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-view">Add a Flutter View</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/plugin-setup">Plugin setup</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="true" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen">Add a single Flutter screen</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/performance">Loading sequence and performance</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/multiple-flutters">Multiple Flutter instances</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7" href="/web/20210603201046/https://flutter.dev/docs/development/tools" role="button" aria-expanded="false" aria-controls="sidenav-3-7">Tools & features </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/vs-code">Visual Studio Code</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-3" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools" role="button" aria-expanded="false" aria-controls="sidenav-3-7-3">DevTools </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/android-studio">Install from Android Studio & IntelliJ</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/app-size">App size tool</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-4" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk" role="button" aria-expanded="false" aria-controls="sidenav-3-7-4">Flutter SDK </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/release-notes">Release notes</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/web-renderers">Web renderers</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-8" href="/web/20210603201046/https://flutter.dev/docs/development/androidx-migration" role="button" aria-expanded="false" aria-controls="sidenav-3-8">Migration notes </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ios-project-migration">Xcode 11.4 support</a> </li></ul> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="false" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/shader">Reduce shader compilation jank</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/appendix">Appendix</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="false" aria-controls="sidenav-6">Deployment</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/cd">Continuous deployment</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Resources</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/inside-flutter">Inside Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/bug-reports">Creating useful bug reports</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-8" role="button" aria-expanded="true" aria-controls="sidenav-8">Reference</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://api.flutter.dev/" target="_blank" rel="noopener">API reference<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/flutter-cli">flutter CLI reference</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li></ul> </div> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/showcase">Showcase</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/community">Community</a> </li> </ul> <form action="/web/20210603201046/https://flutter.dev/search/" class="site-header__search form-inline"> <input class="site-header__searchfield form-control" type="search" name="q" id="q" autocomplete="off" placeholder="Search" aria-label="Search"> </form> </div> </div> <div class="site-header__social navbar-nav flex-row"> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603201046/https://twitter.com/flutterdev" aria-label="Twittter"><i class="fab fa-twitter fa-lg"></i></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603201046/https://www.youtube.com/flutterdev" aria-label="YouTube"><i class="fab fa-youtube fa-lg"></i></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603201046/https://github.com/flutter" aria-label="Github"><i class="fab fa-github fa-lg"></i></a> </div> <a class="site-header__cta btn btn-primary" href="/web/20210603201046/https://flutter.dev/docs/get-started/install/">Get started</a> </nav> </header> <div class="site-banner site-banner--default" role="alert"> Flutter 2.2 is here. <a href="https://web.archive.org/web/20210603201046/https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9">Learn more</a>. </div> <div class="container-fluid position-relative"> <div class="row flex-xl-nowrap"> <div class="fixed-col site-sidebar site-sidebar--fixed col-12 col-md-3 col-xl-2 d-none d-md-block" data-fixed-column> <ul class="nav flex-column"><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-1" role="button" aria-expanded="false" aria-controls="sidenav-1">Get started</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/learn-more">5. Learn more</a> </li><div class="dropdown-divider"></div><li class="nav-item"> <a class="nav-link collapsable" data-toggle="collapse" data-target="#sidenav-1-7" href="#sidenav-1-7" role="button" aria-expanded="true" aria-controls="sidenav-1-7">From another platform? </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/android-devs">Flutter for Android devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/ios-devs">Flutter for iOS devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/react-native-devs">Flutter for React Native devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/web-devs">Flutter for web devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/xamarin-forms-devs">Flutter for Xamarin.Forms devs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/flutter-for/declarative">Introduction to declarative UI</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/get-started/web">Building a web app</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-2" role="button" aria-expanded="false" aria-controls="sidenav-2">Samples & tutorials</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-2"> <li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link active" data-toggle="collapse" href="#sidenav-3" role="button" aria-expanded="true" aria-controls="sidenav-3">Development</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1" href="/web/20210603201046/https://flutter.dev/docs/development/ui" role="button" aria-expanded="false" aria-controls="sidenav-3-1">User interface </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/widgets-intro">Introduction to widgets</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-2" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout" role="button" aria-expanded="false" aria-controls="sidenav-3-1-2">Building layouts </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/adaptive-responsive">Creating adaptive and responsive apps</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/building-adaptive-apps">Building adaptive apps [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/layout/box-constraints">Box constraints</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/assets-and-images">Assets and images</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-5" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation" role="button" aria-expanded="false" aria-controls="sidenav-3-1-5">Navigation & routing </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/navigation/url-strategies">URL strategies</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-6" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations" role="button" aria-expanded="false" aria-controls="sidenav-3-1-6">Animations </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/animations/staggered-animations">Staggered animations</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-1-7" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced" role="button" aria-expanded="false" aria-controls="sidenav-3-1-7">Advanced UI </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-1-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/advanced/splash-screen">Splash screens</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ui/widgets">Widget catalog</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend" role="button" aria-expanded="false" aria-controls="sidenav-3-2">Data & backend </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2"> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-2-1" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt" role="button" aria-expanded="false" aria-controls="sidenav-3-2-1">State management </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-2-1"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative">Think declaratively</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app">Ephemeral vs app state</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple">Simple app state management</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/state-mgmt/options">Options</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/data-and-backend/google-apis">Google APIs</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization" role="button" aria-expanded="false" aria-controls="sidenav-3-3">Accessibility & internationalization </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/accessibility-and-localization/internationalization">Internationalization</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-4" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration" role="button" aria-expanded="false" aria-controls="sidenav-3-4">Platform integration </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/release-notes/supported-platforms">Supported platforms</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/ios-app-clip">Adding iOS App Clip support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/platform-views">Hosting native Android and iOS views</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/platform-integration/platform-channels">Writing platform-specific code</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="false" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">Developing packages & plugins</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li></ul> </li> <li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="true" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app">Introduction</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-2" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android" role="button" aria-expanded="false" aria-controls="sidenav-3-6-2">Adding to an Android app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-2"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-screen">Add a single Flutter screen</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-fragment">Add a Flutter Fragment</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/add-flutter-view">Add a Flutter View</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/android/plugin-setup">Plugin setup</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link active collapsable" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="true" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/project-setup">Project setup</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen">Add a single Flutter screen</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/performance">Loading sequence and performance</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/multiple-flutters">Multiple Flutter instances</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7" href="/web/20210603201046/https://flutter.dev/docs/development/tools" role="button" aria-expanded="false" aria-controls="sidenav-3-7">Tools & features </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/vs-code">Visual Studio Code</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-3" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools" role="button" aria-expanded="false" aria-controls="sidenav-3-7-3">DevTools </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/android-studio">Install from Android Studio & IntelliJ</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/devtools/app-size">App size tool</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-7-4" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk" role="button" aria-expanded="false" aria-controls="sidenav-3-7-4">Flutter SDK </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-7-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/sdk/release-notes">Release notes</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/tools/web-renderers">Web renderers</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-8" href="/web/20210603201046/https://flutter.dev/docs/development/androidx-migration" role="button" aria-expanded="false" aria-controls="sidenav-3-8">Migration notes </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/packages-and-plugins/plugin-api-migration">Android plugin upgrade</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/development/ios-project-migration">Xcode 11.4 support</a> </li></ul> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="false" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/testing/integration-tests">Integration testing</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-5" role="button" aria-expanded="false" aria-controls="sidenav-5">Performance & optimization</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/app-size">App size</a> </li><li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-5-3" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering" role="button" aria-expanded="false" aria-controls="sidenav-5-3">Rendering performance </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-5-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/rendering/shader">Reduce shader compilation jank</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/perf/appendix">Appendix</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-6" role="button" aria-expanded="false" aria-controls="sidenav-6">Deployment</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/deployment/cd">Continuous deployment</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link collapsed" data-toggle="collapse" href="#sidenav-7" role="button" aria-expanded="false" aria-controls="sidenav-7">Resources</a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-7"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/inside-flutter">Inside Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/resources/bug-reports">Creating useful bug reports</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " data-toggle="collapse" href="#sidenav-8" role="button" aria-expanded="true" aria-controls="sidenav-8">Reference</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-8"> <li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://api.flutter.dev/" target="_blank" rel="noopener">API reference<i class="fas fa-external-link-alt"></i></a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603201046/https://flutter.dev/docs/reference/flutter-cli">flutter CLI reference</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603201046/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></a> </li> </ul> </li></ul> </div> <main class="site-content col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2 col-xxl-8 offset-xxl-2" role="main"> <div class="container"> <header class="site-content__title"> <div id="page-github-links" class="btn-group" aria-label="Page GitHub links" role="group"> <a href="https://web.archive.org/web/20210603201046/https://github.com/flutter/website/tree/master/src/docs/development/add-to-app/ios/index.md" class="btn no-automatic-external" title="View page source" target="_blank" rel="noopener"> <i class="fas fa-file-alt fa-sm"></i> </a> <a href="https://web.archive.org/web/20210603201046/https://github.com/flutter/website/issues/new?title='Adding Flutter to iOS' page issue&body=Page URL: https://flutter.dev/docs/development/add-to-app/ios/%0D%0APage source: https://github.com/flutter/website/tree/master/src/docs/development/add-to-app/ios/index.md%0D%0A%0D%0AFound a typo? You can fix it yourself by going to the page source and clicking the pencil icon. Or finish creating this issue.%0D%0A%0D%0ADescription of issue:" class="btn no-automatic-external" title="Report an issue with this page" target="_blank" rel="noopener"> <i class="fas fa-bug fa-sm"></i> </a> </div> <h1>Adding Flutter to iOS</h1> <nav aria-label="breadcrumb"> <ol class="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList"> <li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/web/20210603201046/https://flutter.dev/docs" property="item" typeof="WebPage"><span property="name">Docs</span> </a> <meta property="position" content="1"/> </li> <li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/web/20210603201046/https://flutter.dev/docs/development" property="item" typeof="WebPage"><span property="name">Development</span> </a> <meta property="position" content="2"/> </li> <li class="breadcrumb-item" property="itemListElement" typeof="ListItem"><a href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app" property="item" typeof="WebPage"><span property="name">Add Flutter to existing app</span> </a> <meta property="position" content="3"/> </li> <li class="breadcrumb-item active" property="itemListElement" typeof="ListItem" aria-current="page"><a href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios" property="item" typeof="WebPage"><span property="name">Adding Flutter to iOS</span> </a> <meta property="position" content="4"/> </li> </ol> </nav> </header> <p>Topics:</p> <ul> <li><a href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/project-setup">Project setup</a></li> <li><a href="/web/20210603201046/https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen">Add a single Flutter screen</a></li> </ul> </div> </main> </div> </div> <footer class="site-footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 site-footer__wrapper"> <div class="site-footer__logo"> <img src="/web/20210603201046im_/https://flutter.dev/images/flutter-mono-81x100.png" alt="Flutter Logo" width="81" height="100"> </div> <div class="site-footer__content"> <ul class="site-footer__link-list"> <li><a href="https://web.archive.org/web/20210603201046/https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a></li> <li><a href="/web/20210603201046/https://flutter.dev/tos">terms</a></li> <li><a href="/web/20210603201046/https://flutter.dev/brand">brand usage</a></li> <li><a href="/web/20210603201046/https://flutter.dev/security">security</a></li> <li><a href="https://web.archive.org/web/20210603201046/https://www.google.com/intl/en/policies/privacy">privacy</a></li> <li><a href="https://web.archive.org/web/20210603201046/https://esflutter.dev/">español</a></li> <li><a href="https://web.archive.org/web/20210603201046/https://flutter.cn/" class="text-nowrap">社区中文资源</a></li> <li><a href="https://web.archive.org/web/20210603201046/https://flutter-ko.dev/" class="text-nowrap">한국어</a></li> <li><a href="https://web.archive.org/web/20210603201046/https://blog.google/inside-google/company-announcements/standing-with-black-community">We stand in solidarity with the Black community. Black Lives Matter.</a></li> </ul> <p class="licenses"> Except as otherwise noted, this work is licensed under a <a rel="license" href="https://web.archive.org/web/20210603201046/https://creativecommons.org/licenses/by/4.0">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the BSD License. </p> </div> </div> </div> </div> </footer> <script async="" defer="" src="//web.archive.org/web/20210603201046js_/https://survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script> </body> </html>