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/testing/errors","20210603065450","https://web.archive.org/","web","/_static/", "1622703290"); </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>Handling errors in Flutter - Flutter </title> <link rel="shortcut icon" href="/web/20210603065450im_/https://flutter.dev/images/favicon.png">  <script src="https://web.archive.org/web/20210603065450js_/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/20210603065450/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="How to control error messages and logging of errors"> <meta name="keywords" content=" "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Handling errors in Flutter"> <meta property="og:url" content="https://web.archive.org/web/20210603065450/https://flutter.dev/docs/testing/errors"> <meta property="og:description" content="How to control error messages and logging of errors"> <meta property="og:image" content="https://web.archive.org/web/20210603065450im_/https://flutter.dev/images/flutter-logo-sharing.png"> <link href="https://web.archive.org/web/20210603065450cs_/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/20210603065450cs_/https://flutter.dev/assets/main-5179236d2a521f0d8c964446a1eaa9bee448793c298286381d5cbdc3f6776229.css" integrity="" crossorigin="anonymous"> <script src="https://web.archive.org/web/20210603065450js_/https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript" src="/web/20210603065450js_/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/20210603065450/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/20210603065450if_/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"> menu </button> <a class="navbar-brand" href="/web/20210603065450/https://flutter.dev/"> <img alt="Flutter logo" height="37" width="129" class="align-middle" src="/web/20210603065450im_/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/20210603065450/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/20210603065450/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " 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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/flutter" target="_blank" rel="noopener">Package site</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603065450/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="false" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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 collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603065450/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="false" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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 active" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="true" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link active" href="/web/20210603065450/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets</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/20210603065450/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/" target="_blank" rel="noopener">API reference</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/flutter" target="_blank" rel="noopener">Package site</a> </li> </ul> </li></ul> </div> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/showcase">Showcase</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/community">Community</a> </li> </ul> <form action="/web/20210603065450/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/20210603065450/https://twitter.com/flutterdev" aria-label="Twittter"></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603065450/https://www.youtube.com/flutterdev" aria-label="YouTube"></a> <a class="nav-item nav-link" href="https://web.archive.org/web/20210603065450/https://github.com/flutter" aria-label="Github"></a> </div> <a class="site-header__cta btn btn-primary" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://dart.dev/overview" target="_blank" rel="noopener">Dart language overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://gallery.flutter.dev/" target="_blank" rel="noopener">Flutter Gallery [running app]</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://github.com/flutter/gallery" target="_blank" rel="noopener">Flutter Gallery [repo]</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://flutter.github.io/samples/" target="_blank" rel="noopener">Sample apps on GitHub</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/reference/tutorials">Tutorials</a> </li> </ul> </li><li class="nav-item"> <a class="nav-link " 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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/flutter" target="_blank" rel="noopener">Package site</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210603065450/https://flutter.dev/docs/development/add-to-app" role="button" aria-expanded="false" aria-controls="sidenav-3-6">Add Flutter to existing app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/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 collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6-3" href="/web/20210603065450/https://flutter.dev/docs/development/add-to-app/ios" role="button" aria-expanded="false" aria-controls="sidenav-3-6-3">Adding to an iOS app </a> <ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6-3"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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 active" data-toggle="collapse" href="#sidenav-4" role="button" aria-expanded="true" aria-controls="sidenav-4">Testing & debugging</a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-4"> <li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link active" href="/web/20210603065450/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/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/20210603065450/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/perf/deferred-components">Deferred components</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/packages/google_fonts" target="_blank" rel="noopener">Google Fonts package</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/videos">Videos and online courses</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing to Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://drive.google.com/drive/folders/1KXNtO9My2AMpDOF9A9Y_4aj4_BcgmDDT" target="_blank" rel="noopener">Official brand assets</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/20210603065450/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/" target="_blank" rel="noopener">API reference</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210603065450/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/20210603065450/https://pub.dev/flutter" target="_blank" rel="noopener">Package site</a> </li> </ul> </li></ul> </div> <div id="site-toc--side" class="site-toc site-toc--side fixed-col col-xl-2 order-3" data-fixed-column> <header class="site-toc__title"> Contents <button type="button" class="btn site-toc--button__page-top" aria-label="Page top"></button> </header> <ul class="section-nav nav"> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#errors-caught-by-flutter">Errors caught by Flutter</a></li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#define-a-custom-error-widget-for-build-phase-errors">Define a custom error widget for build phase errors</a></li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#errors-not-caught-by-flutter">Errors not caught by Flutter</a></li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#handling-all-types-of-errors">Handling all types of errors</a></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/20210603065450/https://github.com/flutter/website/tree/master/src/docs/testing/errors.md" class="btn no-automatic-external" title="View page source" target="_blank" rel="noopener"> </a> <a href="https://web.archive.org/web/20210603065450/https://github.com/flutter/website/issues/new?title='Handling errors in Flutter' page issue&body=Page URL: https://flutter.dev/docs/testing/errors.html%0D%0APage source: https://github.com/flutter/website/tree/master/src/docs/testing/errors.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"> </a> </div> <h1>Handling errors in Flutter</h1> </header> <div id="site-toc--inline" class="site-toc site-toc--inline "> <header class="site-toc__title"> Contents </header> <ul class="section-nav"> <li class="toc-entry toc-h2"><a href="#errors-caught-by-flutter">Errors caught by Flutter</a></li> <li class="toc-entry toc-h2"><a href="#define-a-custom-error-widget-for-build-phase-errors">Define a custom error widget for build phase errors</a></li> <li class="toc-entry toc-h2"><a href="#errors-not-caught-by-flutter">Errors not caught by Flutter</a></li> <li class="toc-entry toc-h2"><a href="#handling-all-types-of-errors">Handling all types of errors</a></li> </ul> </div> The Flutter framework catches errors that occur during callbacks triggered by the framework itself, including errors encountered during the build, layout, and paint phases. Errors that don’t occur within Flutter’s callbacks can’t be caught by the framework, but you can handle them by setting up a <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/dart-async/Zone-class.html"><code class="language-plaintext highlighter-rouge">Zone</code></a>. All errors caught by Flutter are routed to the <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/foundation/FlutterError/onError.html"><code class="language-plaintext highlighter-rouge">FlutterError.onError</code></a> handler. By default, this calls <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/foundation/FlutterError/dumpErrorToConsole.html"><code class="language-plaintext highlighter-rouge">FlutterError.dumpErrorToConsole</code></a>, which, as you might guess, dumps the error to the device logs. When running from an IDE, the inspector overrides this so that errors can also be routed to the IDE’s console, allowing you to inspect the objects mentioned in the message. When an error occurs during the build phase, the <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/widgets/ErrorWidget/builder.html"><code class="language-plaintext highlighter-rouge">ErrorWidget.builder</code></a> callback is invoked to build the widget that is used instead of the one that failed. By default, in debug mode this shows an error message in red, and in release mode this shows a gray background. When errors occur without a Flutter callback on the call stack, they are handled by the <code class="language-plaintext highlighter-rouge">Zone</code> where they occur. By default, a <code class="language-plaintext highlighter-rouge">Zone</code> only prints errors and does nothing else. You can customize these behaviors, typically by setting them to values in your <code class="language-plaintext highlighter-rouge">void main()</code> function. Below each error type handling is explained. At the bottom there’s a code snippet which handles all types of errors. Even though you can just copy-paste the snippet, we recommend you to first get acquainted with each of the error types. <h2 id="errors-caught-by-flutter"> <a class="anchor" href="#errors-caught-by-flutter" aria-hidden="true"></a>Errors caught by Flutter</h2> For example, to make your application quit immediately any time an error is caught by Flutter in release mode, you could use the following handler:  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import 'dart:io'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { FlutterError.onError = (FlutterErrorDetails details) { FlutterError.dumpErrorToConsole(details); if (kReleaseMode) exit(1); }; runApp(MyApp()); } // rest of `flutter create` code... </code></pre></div></div> <aside class="alert alert-info" role="alert"> Note: The top-level <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/foundation/kReleaseMode-constant.html"><code class="language-plaintext highlighter-rouge">kReleaseMode</code></a> constant indicates whether the app was compiled in release mode. </aside> This handler can also be used to report errors to a logging service. For more details, see our cookbook chapter for <a href="/web/20210603065450/https://flutter.dev/docs/cookbook/maintenance/error-reporting">reporting errors to a service</a>. <h2 id="define-a-custom-error-widget-for-build-phase-errors"> <a class="anchor" href="#define-a-custom-error-widget-for-build-phase-errors" aria-hidden="true"></a>Define a custom error widget for build phase errors</h2> To define a customized error widget that displays whenever the builder fails to build a widget, use <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/material/MaterialApp/builder.html"><code class="language-plaintext highlighter-rouge">MaterialApp.builder</code></a>.  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>class MyApp extends StatelessWidget { ... @override Widget build(BuildContext context) { return MaterialApp( ... builder: (BuildContext context, Widget widget) { Widget error = Text('...rendering error...'); if (widget is Scaffold || widget is Navigator) error = Scaffold(body: Center(child: error)); ErrorWidget.builder = (FlutterErrorDetails errorDetails) => error; return widget; }, ); } } </code></pre></div></div> <h2 id="errors-not-caught-by-flutter"> <a class="anchor" href="#errors-not-caught-by-flutter" aria-hidden="true"></a>Errors not caught by Flutter</h2> Consider an <code class="language-plaintext highlighter-rouge">onPressed</code> callback that invokes an asynchronous function, such as <code class="language-plaintext highlighter-rouge">MethodChannel.invokeMethod</code> (or pretty much any plugin). For example:  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>OutlinedButton( child: Text('Click me!'), onPressed: () async { final channel = const MethodChannel('crashy-custom-channel'); await channel.invokeMethod('blah'); }, ), </code></pre></div></div> If <code class="language-plaintext highlighter-rouge">invokeMethod</code> throws an error, it won’t be forwarded to <code class="language-plaintext highlighter-rouge">FlutterError.onError</code>. Instead, it’s forwarded to the <code class="language-plaintext highlighter-rouge">Zone</code> where <code class="language-plaintext highlighter-rouge">runApp</code> was run. To catch such an error, use <a href="https://web.archive.org/web/20210603065450/https://api.flutter.dev/flutter/dart-async/runZonedGuarded.html"><code class="language-plaintext highlighter-rouge">runZonedGuarded</code></a>.  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import 'dart:async'; void main() { runZonedGuarded(() { runApp(MyApp()); }, (Object error, StackTrace stack) { myBackend.sendError(error, stack); }); } </code></pre></div></div> Note that if in your app you call <code class="language-plaintext highlighter-rouge">WidgetsFlutterBinding.ensureInitialized()</code> manually to perform some initialization before calling <code class="language-plaintext highlighter-rouge">runApp</code> (e.g. <code class="language-plaintext highlighter-rouge">Firebase.initializeApp()</code>), you must call <code class="language-plaintext highlighter-rouge">WidgetsFlutterBinding.ensureInitialized()</code> inside <code class="language-plaintext highlighter-rouge">runZonedGuarded</code>:  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>runZonedGuarded(() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); } </code></pre></div></div> <aside class="alert alert-info" role="alert"> Note: Error handling wouldn’t work if <code class="language-plaintext highlighter-rouge">WidgetsFlutterBinding.ensureInitialized()</code> was called from the outside. </aside> <h2 id="handling-all-types-of-errors"> <a class="anchor" href="#handling-all-types-of-errors" aria-hidden="true"></a>Handling all types of errors</h2> Say you want to exit application on any exception and to display a custom error widget whenever a widget building fails - you can base your errors handling on next code snippet:  <div class="language-dart highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import 'dart:io'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; void main() { runZonedGuarded(() async { WidgetsFlutterBinding.ensureInitialized(); await myErrorsHandler.initialize(); FlutterError.onError = (FlutterErrorDetails details) { FlutterError.dumpErrorToConsole(details); myErrorsHandler.onError(details); exit(1); }; runApp(MyApp()); }, (Object error, StackTrace stack) { myErrorsHandler.onError(error, stack); exit(1); }); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( builder: (BuildContext context, Widget widget) { Widget error = Text('...rendering error...'); if (widget is Scaffold || widget is Navigator) error = Scaffold(body: Center(child: error)); ErrorWidget.builder = (FlutterErrorDetails errorDetails) => error; return widget; }, ); } } </code></pre></div></div> </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/20210603065450im_/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/20210603065450/https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a></li> <li><a href="/web/20210603065450/https://flutter.dev/tos">terms</a></li> <li><a href="/web/20210603065450/https://flutter.dev/brand">brand usage</a></li> <li><a href="/web/20210603065450/https://flutter.dev/security">security</a></li> <li><a href="https://web.archive.org/web/20210603065450/https://www.google.com/intl/en/policies/privacy">privacy</a></li> <li><a href="https://web.archive.org/web/20210603065450/https://esflutter.dev/">español</a></li> <li><a href="https://web.archive.org/web/20210603065450/https://flutter.cn/" class="text-nowrap">社区中文资源</a></li> <li><a href="https://web.archive.org/web/20210603065450/https://flutter-ko.dev/" class="text-nowrap">한국어</a></li> <li><a href="https://web.archive.org/web/20210603065450/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> Except as otherwise noted, this work is licensed under a <a rel="license" href="https://web.archive.org/web/20210603065450/https://creativecommons.org/licenses/by/4.0">Creative Commons Attribution 4.0 International License</a>, and code samples are licensed under the BSD License. </div> </div> </div> </div> </footer> <script async="" defer="" src="//web.archive.org/web/20210603065450js_/https://survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script> </body> </html>