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/packages-and-plugins/using-packages","20210321060906","https://web.archive.org/","web","/_static/", "1616306946"); </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>Using packages - Flutter </title> <link rel="shortcut icon" href="/web/20210321060906im_/https://flutter.dev/images/favicon.png">  <script src="https://web.archive.org/web/20210321060906js_/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/20210321060906/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 use packages in your Flutter app."> <meta name="keywords" content=" "> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@flutterdev"> <meta property="og:title" content="Using packages"> <meta property="og:url" content="https://web.archive.org/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/using-packages"> <meta property="og:description" content="How to use packages in your Flutter app."> <meta property="og:image" content="https://web.archive.org/web/20210321060906im_/https://flutter.dev/images/flutter-logo-sharing.png"> <link href="https://web.archive.org/web/20210321060906cs_/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/20210321060906cs_/https://flutter.dev/assets/main-5d31c54008859f17c4c18fbbef531e65ba2004ae86d42d69cbed884aa482a047.css" integrity="" crossorigin="anonymous"> <script src="https://web.archive.org/web/20210321060906js_/https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> <script type="text/javascript" src="/web/20210321060906js_/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/20210321060906/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/20210321060906if_/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/20210321060906/https://flutter.dev/"> <img alt="Flutter logo" height="37" width="129" class="align-middle" src="/web/20210321060906im_/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/20210321060906/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/20210321060906/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.github.io/gallery/" 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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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 active collapsable" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="true" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link active" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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 collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/videos">Technical videos</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/showcase">Showcase</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/community">Community</a> </li> </ul> <form action="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/get-started/install/">Get started</a> </nav> </header>  <div class="site-banner site-banner--default" role="alert"> <a href="https://web.archive.org/web/20210321060906/https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65">Flutter 2 is here!</a><br> Interested in working on Flutter? See our <a href="/web/20210321060906/https://flutter.dev/jobs">open job listings.</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/20210321060906/https://flutter.dev/docs/get-started/install">1. Install</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/editor">2. Set up an editor</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/test-drive">3. Test drive</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/get-started/codelab">4. Write your first app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.github.io/gallery/" 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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/cookbook">Cookbook</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/codelabs">Codelabs</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/layout">Layouts in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/layout/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/layout/constraints">Understanding constraints [NEW]</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/interactive">Adding interactivity</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/navigation">Navigation in Flutter</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/navigation/deep-linking">Deep linking</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/animations">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/tutorial">Tutorial</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/implicit-animations">Implicit animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/animations/hero-animations">Hero animations</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ui/advanced/slivers">Slivers</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/ui/advanced/gestures">Gestures</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro">Introduction</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/data-and-backend/networking">Networking & http</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/data-and-backend/json">JSON and serialization</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/data-and-backend/firebase">Firebase</a> </li></ul> </li> <li class="nav-item"> <a class="nav-link collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-3" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/accessibility-and-localization/accessibility">Accessibility</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/platform-integration/apple-watch">Apple Watch support</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/platform-integration/c-interop">C interop</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/platform-integration/web">Web FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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 active collapsable" data-toggle="collapse" data-target="#sidenav-3-5" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins" role="button" aria-expanded="true" aria-controls="sidenav-3-5">Packages & plugins </a> <ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3-5"> <li class="nav-item"> <a class="nav-link active" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/using-packages">Using packages</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/background-processes">Background processes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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 collapsable collapsed" data-toggle="collapse" data-target="#sidenav-3-6" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/add-to-app/debugging">Debugging & hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/android-studio">Android Studio & IntelliJ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/devtools/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/devtools/vscode">Install from VS Code</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/cli">Install from command line</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/inspector">Flutter inspector</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/performance">Performance view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/cpu-profiler">CPU Profiler view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/memory">Memory view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/network">Network view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/debugger">Debugger</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/devtools/logging">Logging view</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/sdk/overview">Overview</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/sdk/upgrading">Upgrading</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/sdk/releases">Releases</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/release/breaking-changes">Breaking changes</a> </li> <li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/tools/pubspec">Flutter and the pubspec file</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/hot-reload">Hot reload</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/flutter-fix">Flutter Fix</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/development/tools/formatting">Code formatting</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/androidx-migration">AndroidX migration</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/development/ios-14">Developing for iOS 14</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/testing/debugging">Debugging tools</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/code-debugging">Debugging apps programmatically</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/oem-debuggers">Using an OEM debugger</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/build-modes">Flutter's build modes</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/common-errors">Common Flutter errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing/errors">Handling errors</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/testing">Testing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/perf">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/perf/rendering">Overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/rendering/best-practices">Performance best practices</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/rendering/ui-performance">Performance profiling</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/perf/metrics">Performance metrics</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/perf/faq">Performance FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/deployment/obfuscate">Obfuscating Dart code</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/flavors">Creating flavors for Flutter</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/android">Build and release an Android app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/ios">Build and release an iOS app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/linux">Build and release a Linux app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/deployment/web">Build and release a web app</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/https://flutter.dev/docs/resources/bootstrap-into-dart">Dart resources</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/compatibility">Compatibility policy</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/architectural-overview">Architectural overview</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/resources/platform-adaptations">Platform adaptations</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/videos">Technical videos</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/books">Books</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/faq">FAQ</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/resources/design-docs">Design Documents</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/dash">Who is Dash?</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20210321060906/https://flutter.dev/docs/reference/widgets">Widget index</a> </li><li class="nav-item"> <a class="nav-link" href="https://web.archive.org/web/20210321060906/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/20210321060906/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/20210321060906/https://pub.dev/flutter" target="_blank" rel="noopener">Package site<i class="fas fa-external-link-alt"></i></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="#using-packages">Using packages</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#searching-for-packages">Searching for packages</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#adding-a-package-dependency-to-an-app">Adding a package dependency to an app</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#conflict-resolution">Conflict resolution</a></li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#developing-new-packages">Developing new packages</a></li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#managing-package-dependencies-and-versions">Managing package dependencies and versions</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#package-versions">Package versions</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#updating-package-dependencies">Updating package dependencies</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#dependencies-on-unpublished-packages">Dependencies on unpublished packages</a></li> </ul> </li> <li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#examples">Examples</a> <ul class="nav"> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#css-example">Example: Using the css_colors package</a></li> <li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#url-example">Example: Using the url_launcher package to launch the browser</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/20210321060906/https://github.com/flutter/website/tree/master/src/docs/development/packages-and-plugins/using-packages.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/20210321060906/https://github.com/flutter/website/issues/new?title='Using packages' page issue&body=Page URL: https://flutter.dev/docs/development/packages-and-plugins/using-packages.html%0D%0APage source: https://github.com/flutter/website/tree/master/src/docs/development/packages-and-plugins/using-packages.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>Using packages</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/20210321060906/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/20210321060906/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/20210321060906/https://flutter.dev/docs/development/packages-and-plugins" property="item" typeof="WebPage"><span property="name">Packages & plugins</span> </a> <meta property="position" content="3"/> </li> <li class="breadcrumb-item active" property="itemListElement" typeof="ListItem" aria-current="page"><a href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/using-packages.html" property="item" typeof="WebPage"><span property="name">Using packages</span> </a> <meta property="position" content="4"/> </li> </ol> </nav> </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="#using-packages">Using packages</a> <ul> <li class="toc-entry toc-h3"><a href="#searching-for-packages">Searching for packages</a></li> <li class="toc-entry toc-h3"><a href="#adding-a-package-dependency-to-an-app">Adding a package dependency to an app</a></li> <li class="toc-entry toc-h3"><a href="#conflict-resolution">Conflict resolution</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#developing-new-packages">Developing new packages</a></li> <li class="toc-entry toc-h2"><a href="#managing-package-dependencies-and-versions">Managing package dependencies and versions</a> <ul> <li class="toc-entry toc-h3"><a href="#package-versions">Package versions</a></li> <li class="toc-entry toc-h3"><a href="#updating-package-dependencies">Updating package dependencies</a></li> <li class="toc-entry toc-h3"><a href="#dependencies-on-unpublished-packages">Dependencies on unpublished packages</a></li> </ul> </li> <li class="toc-entry toc-h2"><a href="#examples">Examples</a> <ul> <li class="toc-entry toc-h3"><a href="#css-example">Example: Using the css_colors package</a></li> <li class="toc-entry toc-h3"><a href="#url-example">Example: Using the url_launcher package to launch the browser</a></li> </ul> </li> </ul> </div> <p>Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems. This allows quickly building an app without having to develop everything from scratch.</p> <aside class="alert alert-secondary" role="alert"> <p><strong>What is the difference between a package and a plugin?</strong> A plugin is a <em>type</em> of package—the full designation is <em>plugin package</em>, which is generally shortened to <em>plugin</em>.</p> <dl> <dt><strong>Packages</strong></dt> <dd>At a minimum, a Dart package is a directory containing a pubspec file. Additionally, a package can contain dependencies (listed in the pubspec), Dart libraries, apps, resources, tests, images, and examples. The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/">pub.dev</a> site lists many packages—developed by Google engineers and generous members of the Flutter and Dart community— that you can use in your app.</dd> <dt><strong>Plugins</strong></dt> <dd>A plugin package is a special kind of package that makes platform functionality available to the app. Plugin packages can be written for Android (using Kotlin or Java), iOS (using Swift or Objective-C), web, macOS, Windows, Linux, or any combination thereof. For example, a plugin might provide Flutter apps with the ability to use a device’s camera.</dd> </dl> </aside> <p>Existing packages enable many use cases—for example, making network requests (<a href="/web/20210321060906/https://flutter.dev/docs/cookbook/networking/fetch-data"><code class="language-plaintext highlighter-rouge">http</code></a>), custom navigation/route handling (<a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/fluro"><code class="language-plaintext highlighter-rouge">fluro</code></a>), integration with device APIs (<a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/url_launcher"><code class="language-plaintext highlighter-rouge">url_launcher</code></a> and <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/battery"><code class="language-plaintext highlighter-rouge">battery</code></a>), and using third-party platform SDKs like Firebase (<a href="https://web.archive.org/web/20210321060906/https://github.com/flutter/plugins/blob/master/FlutterFire.md">FlutterFire</a>).</p> <p>To write a new package, see <a href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">developing packages</a>. To add assets, images or fonts, whether stored in files or packages, see <a href="/web/20210321060906/https://flutter.dev/docs/development/ui/assets-and-images">Adding assets and images</a>.</p> <h2 id="using-packages"> <a class="anchor" href="#using-packages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Using packages</h2> <p>The following section describes how to use existing published packages.</p> <h3 id="searching-for-packages"> <a class="anchor" href="#searching-for-packages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Searching for packages</h3> <p>Packages are published to <a href="https://web.archive.org/web/20210321060906/https://pub.dev/">pub.dev</a>.</p> <p>The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/flutter">Flutter landing page</a> on pub.dev displays top packages that are compatible with Flutter (those that declare dependencies generally compatible with Flutter), and supports searching among all published packages.</p> <p>The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/flutter/favorites">Flutter Favorites</a> page on pub.dev lists the plugins and packages that have been identified as packages you should first consider using when writing your app. For more information on what it means to be a Flutter Favorite, see the <a href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/favorites">Flutter Favorites program</a>.</p> <p>You can also browse the packages on pub.dev by filtering on <a href="https://web.archive.org/web/20210321060906/https://pub.dev/flutter/packages?platform=android">Android plugins</a>, <a href="https://web.archive.org/web/20210321060906/https://pub.dev/flutter/packages?platform=ios">iOS plugins</a>, <a href="https://web.archive.org/web/20210321060906/https://pub.dev/flutter/packages?platform=web">web plugins</a>, or any combination thereof.</p> <h3 id="adding-a-package-dependency-to-an-app"> <a class="anchor" href="#adding-a-package-dependency-to-an-app" aria-hidden="true"><span class="octicon octicon-link"></span></a>Adding a package dependency to an app</h3> <p>To add the package, <code class="language-plaintext highlighter-rouge">css_colors</code>, to an app:</p> <ol> <li>Depend on it <ul> <li>Open the <code class="language-plaintext highlighter-rouge">pubspec.yaml</code> file located inside the app folder, and add <code class="language-plaintext highlighter-rouge">css_colors:</code> under <code class="language-plaintext highlighter-rouge">dependencies</code>.</li> </ul> </li> <li>Install it <ul> <li>From the terminal: Run <code class="language-plaintext highlighter-rouge">flutter pub get</code>.<br> <strong>OR</strong> </li> <li>From Android Studio/IntelliJ: Click <strong>Packages get</strong> in the action ribbon at the top of <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>.</li> <li>From VS Code: Click <strong>Get Packages</strong> located in right side of the action ribbon at the top of <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>.</li> </ul> </li> <li>Import it <ul> <li>Add a corresponding <code class="language-plaintext highlighter-rouge">import</code> statement in the Dart code.</li> </ul> </li> <li>Stop and restart the app, if necessary <ul> <li>If the package brings platform-specific code (Kotlin/Java for Android, Swift/Objective-C for iOS), that code must be built into your app. Hot reload and hot restart only update the Dart code, so a full restart of the app might be required to avoid errors like <code class="language-plaintext highlighter-rouge">MissingPluginException</code> when using the package.</li> </ul> </li> </ol> <p>The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/css_colors/install">Installing tab</a>, available on any package page on pub.dev, is a handy reference for these steps.</p> <p>For a complete example, see the <a href="#css-example">css_colors example</a> below.</p> <h3 id="conflict-resolution"> <a class="anchor" href="#conflict-resolution" aria-hidden="true"><span class="octicon octicon-link"></span></a>Conflict resolution</h3> <p>Suppose you want to use <code class="language-plaintext highlighter-rouge">some_package</code> and <code class="language-plaintext highlighter-rouge">another_package</code> in an app, and both of these depend on <code class="language-plaintext highlighter-rouge">url_launcher</code>, but in different versions. That causes a potential conflict. The best way to avoid this is for package authors to use <a href="https://web.archive.org/web/20210321060906/https://dart.dev/tools/pub/dependencies#version-constraints">version ranges</a> rather than specific versions when specifying dependencies.</p> <div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">url_launcher</span><span class="pi">:</span> <span class="s">^5.4.0</span> <span class="c1"># Good, any 5.4.x version where x >= 0 works.</span> <span class="na">image_picker</span><span class="pi">:</span> <span class="s1">'</span><span class="s">5.4.3'</span> <span class="c1"># Not so good, only version 5.4.3 works.</span> </code></pre></div></div> <p>If <code class="language-plaintext highlighter-rouge">some_package</code> declares the dependencies above and <code class="language-plaintext highlighter-rouge">another_package</code> declares a compatible <code class="language-plaintext highlighter-rouge">url_launcher</code> dependency like <code class="language-plaintext highlighter-rouge">'5.4.6'</code> or <code class="language-plaintext highlighter-rouge">^5.5.0</code>, pub resolves the issue automatically. Platform-specific dependencies on <a href="https://web.archive.org/web/20210321060906/https://docs.gradle.org/current/userguide/declaring_dependencies.html">Gradle modules</a> and/or <a href="https://web.archive.org/web/20210321060906/https://guides.cocoapods.org/syntax/podspec.html#dependency">CocoaPods</a> are solved in a similar way.</p> <p>Even if <code class="language-plaintext highlighter-rouge">some_package</code> and <code class="language-plaintext highlighter-rouge">another_package</code> declare incompatible versions for <code class="language-plaintext highlighter-rouge">url_launcher</code>, they might actually use <code class="language-plaintext highlighter-rouge">url_launcher</code> in compatible ways. In this situation, the conflict can be resolved by adding a dependency override declaration to the app’s <code class="language-plaintext highlighter-rouge">pubspec.yaml</code> file, forcing the use of a particular version.</p> <p>For example, to force the use of <code class="language-plaintext highlighter-rouge">url_launcher</code> version <code class="language-plaintext highlighter-rouge">5.4.0</code>, make the following changes to the app’s <code class="language-plaintext highlighter-rouge">pubspec.yaml</code> file:</p> <div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">some_package</span><span class="pi">:</span> <span class="na">another_package</span><span class="pi">:</span> <span class="na">dependency_overrides</span><span class="pi">:</span> <span class="na">url_launcher</span><span class="pi">:</span> <span class="s1">'</span><span class="s">5.4.0'</span> </code></pre></div></div> <p>If the conflicting dependency is not itself a package, but an Android-specific library like <code class="language-plaintext highlighter-rouge">guava</code>, the dependency override declaration must be added to Gradle build logic instead.</p> <p>To force the use of <code class="language-plaintext highlighter-rouge">guava</code> version <code class="language-plaintext highlighter-rouge">28.0</code>, make the following changes to the app’s <code class="language-plaintext highlighter-rouge">android/build.gradle</code> file:</p> <div class="language-groovy highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">configurations</span><span class="o">.</span><span class="na">all</span> <span class="o">{</span> <span class="n">resolutionStrategy</span> <span class="o">{</span> <span class="n">force</span> <span class="s1">'com.google.guava:guava:28.0-android'</span> <span class="o">}</span> <span class="o">}</span> </code></pre></div></div> <p>CocoaPods does not currently offer dependency override functionality.</p> <h2 id="developing-new-packages"> <a class="anchor" href="#developing-new-packages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Developing new packages</h2> <p>If no package exists for your specific use case, you can <a href="/web/20210321060906/https://flutter.dev/docs/development/packages-and-plugins/developing-packages">write a custom package</a>.</p> <h2 id="managing-package-dependencies-and-versions"> <a class="anchor" href="#managing-package-dependencies-and-versions" aria-hidden="true"><span class="octicon octicon-link"></span></a>Managing package dependencies and versions</h2> <p>To minimize the risk of version collisions, specify a version range in the <code class="language-plaintext highlighter-rouge">pubspec.yaml</code> file.</p> <h3 id="package-versions"> <a class="anchor" href="#package-versions" aria-hidden="true"><span class="octicon octicon-link"></span></a>Package versions</h3> <p>All packages have a version number, specified in the package’s <code class="language-plaintext highlighter-rouge">pubspec.yaml</code> file. The current version of a package is displayed next to its name (for example, see the <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/url_launcher"><code class="language-plaintext highlighter-rouge">url_launcher</code></a> package), as well as a list of all prior versions (see <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/url_launcher/versions"><code class="language-plaintext highlighter-rouge">url_launcher</code> versions</a>).</p> <p>When a package is added to <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>, the shorthand form <code class="language-plaintext highlighter-rouge">plugin1:</code> means that any version of the plugin1 package can be used. To ensure that the app doesn’t break when a package is updated, specify a version range using one of the following formats:</p> <ul> <li> <p>Range constraints: Specify a minimum and maximum version. For example:</p> <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">url_launcher</span><span class="pi">:</span> <span class="s1">'</span><span class="s">>=5.4.0</span><span class="nv"> </span><span class="s"><6.0.0'</span> </code></pre></div> </div> </li> <li> <p>Range constraints with <a href="https://web.archive.org/web/20210321060906/https://dart.dev/tools/pub/dependencies#caret-syntax"><em>caret syntax</em></a> are similar to regular range constraints:</p> <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">collection</span><span class="pi">:</span> <span class="s1">'</span><span class="s">^5.4.0'</span> </code></pre></div> </div> </li> </ul> <p>For additional details, see the <a href="https://web.archive.org/web/20210321060906/https://dart.dev/tools/pub/versioning">package versioning guide</a>.</p> <h3 id="updating-package-dependencies"> <a class="anchor" href="#updating-package-dependencies" aria-hidden="true"><span class="octicon octicon-link"></span></a>Updating package dependencies</h3> <p>When running <code class="language-plaintext highlighter-rouge">flutter pub get</code> (<strong>Packages get</strong> in IntelliJ or Android Studio) for the first time after adding a package, Flutter saves the concrete package version found in the <code class="language-plaintext highlighter-rouge">pubspec.lock</code> <a href="https://web.archive.org/web/20210321060906/https://dart.dev/tools/pub/glossary#lockfile">lockfile</a>. This ensures that you get the same version again if you, or another developer on your team, run <code class="language-plaintext highlighter-rouge">flutter pub get</code>.</p> <p>To upgrade to a new version of the package, for example to use new features in that package, run <code class="language-plaintext highlighter-rouge">flutter pub upgrade</code> (<strong>Upgrade dependencies</strong> in IntelliJ or Android Studio) to retrieve the highest available version of the package that is allowed by the version constraint specified in <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>. Note that this is a different command from <code class="language-plaintext highlighter-rouge">flutter upgrade</code> or <code class="language-plaintext highlighter-rouge">flutter update-packages</code>, which both update Flutter itself.</p> <h3 id="dependencies-on-unpublished-packages"> <a class="anchor" href="#dependencies-on-unpublished-packages" aria-hidden="true"><span class="octicon octicon-link"></span></a>Dependencies on unpublished packages</h3> <p>Packages can be used even when not published on pub.dev. For private plugins, or for packages not ready for publishing, additional dependency options are available:</p> <dl> <dt><strong>Path dependency</strong></dt> <dd>A Flutter app can depend on a plugin via a file system <code class="language-plaintext highlighter-rouge">path:</code> dependency. The path can be either relative or absolute. Relative paths are evaluated relative to the directory containing <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>. For example, to depend on a plugin <code class="language-plaintext highlighter-rouge">plugin1</code> located in a directory next to the app, use the following syntax: <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">plugin1</span><span class="pi">:</span> <span class="na">path</span><span class="pi">:</span> <span class="s">../plugin1/</span> </code></pre></div> </div> </dd> <dt><strong>Git dependency</strong></dt> <dd>You can also depend on a package stored in a Git repository. If the package is located at the root of the repo, use the following syntax: <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">plugin1</span><span class="pi">:</span> <span class="na">git</span><span class="pi">:</span> <span class="na">url</span><span class="pi">:</span> <span class="s">git://github.com/flutter/plugin1.git</span> </code></pre></div> </div> </dd> <dt><strong>Git dependency on a package in a folder</strong></dt> <dd>Pub assumes the package is located in the root of the Git repository. If that is not the case, specify the location with the <code class="language-plaintext highlighter-rouge">path</code> argument. For example: <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">package1</span><span class="pi">:</span> <span class="na">git</span><span class="pi">:</span> <span class="na">url</span><span class="pi">:</span> <span class="s">git://github.com/flutter/packages.git</span> <span class="na">path</span><span class="pi">:</span> <span class="s">packages/package1</span> </code></pre></div> </div> <p>Finally, use the <code class="language-plaintext highlighter-rouge">ref</code> argument to pin the dependency to a specific git commit, branch, or tag. For more details, see <a href="https://web.archive.org/web/20210321060906/https://dart.dev/tools/pub/dependencies">Package dependencies</a>.</p> </dd> </dl> <h2 id="examples"> <a class="anchor" href="#examples" aria-hidden="true"><span class="octicon octicon-link"></span></a>Examples</h2> <p>The following examples walk through the necessary steps for using packages.</p> <h3 id="css-example"> <a class="anchor" href="#css-example" aria-hidden="true"><span class="octicon octicon-link"></span></a>Example: Using the css_colors package</h3> <p>The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/css_colors"><code class="language-plaintext highlighter-rouge">css_colors</code></a> package defines color constants for CSS colors, so use the constants wherever the Flutter framework expects the <code class="language-plaintext highlighter-rouge">Color</code> type.</p> <p>To use this package:</p> <ol> <li> <p>Create a new project called <code class="language-plaintext highlighter-rouge">cssdemo</code>.</p> </li> <li> <p>Open <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>, and add the <code class="language-plaintext highlighter-rouge">css-colors</code> dependency:</p> <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">flutter</span><span class="pi">:</span> <span class="na">sdk</span><span class="pi">:</span> <span class="s">flutter</span> <span class="na">css_colors</span><span class="pi">:</span> <span class="s">^1.0.0</span> </code></pre></div> </div> </li> <li> <p>Run <code class="language-plaintext highlighter-rouge">flutter pub get</code> in the terminal, or click <strong>Packages get</strong> in IntelliJ or Android Studio.</p> </li> <li> <p>Open <code class="language-plaintext highlighter-rouge">lib/main.dart</code> and replace its full contents with:</p> <div class="language-dart highlighter-rouge"> <div class="highlight"><pre class="highlight"><code> <span class="kn">import</span> <span class="s">'package:css_colors/css_colors.dart'</span><span class="o">;</span> <span class="kn">import</span> <span class="s">'package:flutter/material.dart'</span><span class="o">;</span> <span class="kt">void</span> <span class="n">main</span><span class="o">()</span> <span class="o">{</span> <span class="n">runApp</span><span class="o">(</span><span class="n">MyApp</span><span class="o">());</span> <span class="o">}</span> <span class="kd">class</span> <span class="nc">MyApp</span> <span class="kd">extends</span> <span class="n">StatelessWidget</span> <span class="o">{</span> <span class="nd">@override</span> <span class="n">Widget</span> <span class="n">build</span><span class="o">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="o">)</span> <span class="o">{</span> <span class="k">return</span> <span class="n">MaterialApp</span><span class="o">(</span> <span class="nl">home:</span> <span class="n">DemoPage</span><span class="o">(),</span> <span class="o">);</span> <span class="o">}</span> <span class="o">}</span> <span class="kd">class</span> <span class="nc">DemoPage</span> <span class="kd">extends</span> <span class="n">StatelessWidget</span> <span class="o">{</span> <span class="nd">@override</span> <span class="n">Widget</span> <span class="n">build</span><span class="o">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="o">)</span> <span class="o">{</span> <span class="k">return</span> <span class="n">Scaffold</span><span class="o">(</span><span class="nl">body:</span> <span class="n">Container</span><span class="o">(</span><span class="nl">color:</span> <span class="n">CSSColors</span><span class="o">.</span><span class="na">orange</span><span class="o">));</span> <span class="o">}</span> <span class="o">}</span> </code></pre></div> </div> </li> <li> <p>Run the app. The app’s background should now be orange.</p> </li> </ol> <h3 id="url-example"> <a class="anchor" href="#url-example" aria-hidden="true"><span class="octicon octicon-link"></span></a>Example: Using the url_launcher package to launch the browser</h3> <p>The <a href="https://web.archive.org/web/20210321060906/https://pub.dev/packages/url_launcher"><code class="language-plaintext highlighter-rouge">url_launcher</code></a> plugin package enables opening the default browser on the mobile platform to display a given URL, and is supported on Android, iOS, web, and macos. This package is a special Dart package called a <em>plugin package</em> (or <em>plugin</em>), which includes platform-specific code.</p> <p>To use this plugin:</p> <ol> <li> <p>Create a new project called <code class="language-plaintext highlighter-rouge">launchdemo</code>.</p> </li> <li> <p>Open <code class="language-plaintext highlighter-rouge">pubspec.yaml</code>, and add the <code class="language-plaintext highlighter-rouge">url_launcher</code> dependency:</p> <div class="language-yaml highlighter-rouge"> <div class="highlight"><pre class="highlight"><code><span class="na">dependencies</span><span class="pi">:</span> <span class="na">flutter</span><span class="pi">:</span> <span class="na">sdk</span><span class="pi">:</span> <span class="s">flutter</span> <span class="na">url_launcher</span><span class="pi">:</span> <span class="s">^5.4.0</span> </code></pre></div> </div> </li> <li> <p>Run <code class="language-plaintext highlighter-rouge">flutter pub get</code> in the terminal, or click <strong>Packages get</strong> in IntelliJ or Android Studio.</p> </li> <li> <p>Open <code class="language-plaintext highlighter-rouge">lib/main.dart</code> and replace its full contents with the following:</p> <div class="language-dart highlighter-rouge"> <div class="highlight"><pre class="highlight"><code> <span class="kn">import</span> <span class="s">'package:flutter/material.dart'</span><span class="o">;</span> <span class="kn">import</span> <span class="s">'package:url_launcher/url_launcher.dart'</span><span class="o">;</span> <span class="kt">void</span> <span class="n">main</span><span class="o">()</span> <span class="o">{</span> <span class="n">runApp</span><span class="o">(</span><span class="n">MyApp</span><span class="o">());</span> <span class="o">}</span> <span class="kd">class</span> <span class="nc">MyApp</span> <span class="kd">extends</span> <span class="n">StatelessWidget</span> <span class="o">{</span> <span class="nd">@override</span> <span class="n">Widget</span> <span class="n">build</span><span class="o">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="o">)</span> <span class="o">{</span> <span class="k">return</span> <span class="n">MaterialApp</span><span class="o">(</span> <span class="nl">home:</span> <span class="n">DemoPage</span><span class="o">(),</span> <span class="o">);</span> <span class="o">}</span> <span class="o">}</span> <span class="kd">class</span> <span class="nc">DemoPage</span> <span class="kd">extends</span> <span class="n">StatelessWidget</span> <span class="o">{</span> <span class="n">launchURL</span><span class="o">()</span> <span class="o">{</span> <span class="n">launch</span><span class="o">(</span><span class="s">'https://flutter.dev'</span><span class="o">);</span> <span class="o">}</span> <span class="nd">@override</span> <span class="n">Widget</span> <span class="n">build</span><span class="o">(</span><span class="n">BuildContext</span> <span class="n">context</span><span class="o">)</span> <span class="o">{</span> <span class="k">return</span> <span class="n">Scaffold</span><span class="o">(</span> <span class="nl">body:</span> <span class="n">Center</span><span class="o">(</span> <span class="nl">child:</span> <span class="n">ElevatedButton</span><span class="o">(</span> <span class="nl">onPressed:</span> <span class="n">launchURL</span><span class="o">,</span> <span class="nl">child:</span> <span class="n">Text</span><span class="o">(</span><span class="s">'Show Flutter homepage'</span><span class="o">),</span> <span class="o">),</span> <span class="o">),</span> <span class="o">);</span> <span class="o">}</span> <span class="o">}</span> </code></pre></div> </div> </li> <li> <p>Run the app (or stop and restart it, if it was already running before adding the plugin). Click <strong>Show Flutter homepage</strong>. You should see the default browser open on the device, displaying the homepage for flutter.dev.</p> </li> </ol> </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/20210321060906im_/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/20210321060906/https://groups.google.com/forum/#!forum/flutter-dev">flutter-dev@</a></li> <li><a href="/web/20210321060906/https://flutter.dev/tos">terms</a></li> <li><a href="/web/20210321060906/https://flutter.dev/brand">brand usage</a></li> <li><a href="/web/20210321060906/https://flutter.dev/security">security</a></li> <li><a href="https://web.archive.org/web/20210321060906/https://www.google.com/intl/en/policies/privacy">privacy</a></li> <li><a href="https://web.archive.org/web/20210321060906/https://esflutter.dev/">español</a></li> <li><a href="https://web.archive.org/web/20210321060906/https://flutter.cn/" class="text-nowrap">社区中文资源</a></li> <li><a href="https://web.archive.org/web/20210321060906/https://flutter-ko.dev/" class="text-nowrap">한국어</a></li> <li><a href="https://web.archive.org/web/20210321060906/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/20210321060906/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/20210321060906js_/https://survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script> </body> </html>