Scribd
Upload
61 views

Code

The document is a HTML page for installing Flutter on Windows. It includes metadata tags for SEO purposes as well as scripts for tracking and analytics. The body contains navigation menus and sections for getting started with Flutter development.

Uploaded by

Muhammad Rashedul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
61 views

Code

The document is a HTML page for installing Flutter on Windows. It includes metadata tags for SEO purposes as well as scripts for tracking and analytics. The body contains navigation menus and sections for getting started with Flutter development.

Uploaded by

Muhammad Rashedul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 46

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Windows install | Flutter</title>
<link rel="icon" href="/assets/images/shared/brand/flutter/icon/64.png" />
<link rel="apple-touch-icon"
href="/assets/images/shared/brand/flutter/logo/flutter-logomark-320px.png" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#ffffff" />

<meta name="google-site-verification"
content="HFqxhSbf9YA_0rBglNLzDiWnrHiK_w4cqDh2YD2GEY4" />
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ND4LWWZ');
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()
{
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)
[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67589403-1', 'auto');
ga('send', 'pageview');
</script>

<meta name="description" content="How to install on Windows.">


<meta name="keywords" content="">

<meta name="twitter:card" content="summary_large_image">


<meta name="twitter:site" content="@flutterdev">

<meta property="og:title" content="Windows install">


<meta property="og:url"
content="https://docs.flutter.dev/get-started/install/windows">
<meta property="og:description" content="How to install on Windows.">
<meta property="og:image"
content="https://docs.flutter.dev/assets/images/flutter-logo-sharing.png">

<link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet">
<script
src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"
data-auto-replace-svg="nest">
</script>

<script>
window.__CALLBACKS = [];
</script>

<link rel="stylesheet" href="/assets/css/main.css?v=1669355944">

</head>
<body >

<section id="cookie-notice">
<div class="container">
<p>Google uses cookies to deliver its services, to personalize ads, and to
analyze traffic. You can adjust your privacy controls anytime in your
<a href="https://myaccount.google.com/data-and-personalization"
target="_blank" rel="noopener">Google settings</a>.
<a href="https://policies.google.com/technologies/cookies" target="_blank"
rel="noopener">Learn more</a>.
</p>
<button id="cookie-consent" class="btn btn-primary">Okay</button>
</div>
</section>

<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-ND4LWWZ"
height="0" width="0" style="display:none;visibility:hidden">
</iframe>
</noscript>

<div id="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="https://docs.flutter.dev">


<img
src='/assets/images/shared/brand/flutter/logo/flutter-lockup.png'
alt='Flutter logo'
height="37"
width="129"
class="align-middle">
</a>

<div
id="navbarSupportedContent"
class="collapse navbar-collapse flex-grow-0">
<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">
<div class="site-sidebar site-sidebar--header d-md-none">
<ul class="nav flex-column"><li class="nav-item">
<a class="nav-link active" data-toggle="collapse" href="#sidenav-1"
role="button"
aria-expanded="true" aria-controls="sidenav-1"
>Get started</a>

<ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1">


<li class="nav-item">
<a class="nav-link active" href="/get-started/install">1. Install</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/editor">2. Set up an editor</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/test-drive">3. Test drive</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/codelab">4. Write your first app</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/get-started/flutter-for/android-devs">Flutter for
Android devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/ios-devs">Flutter for iOS
devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/react-native-devs">Flutter
for React Native devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/web-devs">Flutter for web
devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs">Flutter
for Xamarin.Forms devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/declarative">Introduction to
declarative UI</a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link" href="https://dart.dev/overview" target="_blank"
rel="noopener">Dart language overview<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/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://gallery.flutter.dev" target="_blank"
rel="noopener">Flutter Gallery [running app]<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="https://github.com/flutter/gallery" target="_blank"
rel="noopener">Flutter Gallery [repo]<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="https://flutter.github.io/samples/" target="_blank"
rel="noopener">Sample apps on GitHub<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/cookbook">Cookbook</a>
</li><li class="nav-item">
<a class="nav-link" href="/codelabs">Codelabs</a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/tutorials">Tutorials</a>
</li>
</ul>
</li><li class="nav-item">
<a class="nav-link " data-toggle="collapse" href="#sidenav-3" role="button"
aria-expanded="true" aria-controls="sidenav-3"
>Development</a>

<ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3">


<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-1"
href="/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="/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="/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="/development/ui/layout">Layouts in Flutter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/tutorial">Tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/adaptive-responsive">Creating
adaptive and responsive apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/building-adaptive-
apps">Building adaptive apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/constraints">Understanding
constraints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/box-constraints">Box
constraints</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/interactive">Adding interactivity</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/navigation">Navigation in Flutter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/navigation/deep-linking">Deep
linking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/animations">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/tutorial">Tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/implicit-
animations">Implicit animations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/hero-animations">Hero
animations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/advanced/actions_and_shortcuts">Actions & shortcuts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/focus">Keyboard focus
system</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/gestures">Gestures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/slivers">Slivers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/splash-screen">Splash
screens</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/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="/development/data-and-backend/state-mgmt/intro">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/declarative">Think declaratively</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/state-mgmt/ephemeral-
vs-app">Ephemeral vs app state</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/simple">Simple app state
management</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/options">Options</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/networking">Networking
& http</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/json">JSON and
serialization</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/accessibility-and-localization/accessibility">Accessibility</a>
</li><li class="nav-item">
<a class="nav-link"
href="/development/accessibility-and-localization/internationalization">Internation
alization</a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4"
href="/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="/development/tools/sdk/release-notes/supported-
platforms">Supported platforms</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/platform-integration/desktop">Building
desktop apps with Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/platform-integration/platform-
channels">Writing platform-specific code</a>
</li><li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-4"
href="/development/platform-integration/android" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-4"
>Android
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-4">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/c-
interop">C interop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/platform-
views">Hosting native Android views</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/plugin-api-
migration">Android plugin upgrade</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/androidx-
migration">AndroidX migration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/splash-
screen-migration">Deprecated Splash Screen API Migration</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-5"
href="/development/platform-integration/ios" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-5"
>iOS
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-5">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/apple-
frameworks">Leveraging Apple's system libraries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/ios-app-
clip">Adding iOS App Clip support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/c-interop">C
interop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/platform-
views">Hosting native iOS views</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/ios-
debugging">iOS debugging</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-6"
href="/development/platform-integration/linux" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-6"
>Linux
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-6">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/linux/building">Building Linux apps</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-7"
href="/development/platform-integration/macos" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-7"
>macOS
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-7">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/macos/building">Building macOS apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/macos/c-interop">C
interop</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-8"
href="/development/platform-integration/web" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-8"
>Web
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-8">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/faq">Web
FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/renderers">Web
renderers</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/web/initialization">Custom app
initialization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/web-
images">Displaying images on the web</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-9"
href="/development/platform-integration/windows" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-9"
>Windows
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-9">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/windows/building">Building Windows apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/windows/run-loop-
migration">Run loop migration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/windows/version-
migration">Version information migration</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-5"
href="/development/packages-and-plugins" role="button"
aria-expanded="false" aria-controls="sidenav-3-5"
>Packages & plugins
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5">
<li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/background-
processes">Background processes</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/developing-
packages">Developing packages & plugins</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/favorites">Flutter
Favorites program</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/happy-paths">Happy
paths project</a>
</li><li class="nav-item">
<a class="nav-link"
href="/development/packages-and-plugins/happy-paths/recommended">Happy paths
recommendations</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/plugins-in-
tests">Plugins in Flutter tests **NEW**</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/using-
packages">Using packages</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/flutter" target="_blank"
rel="noopener">Package site<span class="material-icons md-24">
open_in_new
</span></a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-6"
href="/development/add-to-app" role="button"
aria-expanded="false" aria-controls="sidenav-3-6"
>Add Flutter to an existing app
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6">
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/add-to-app/android/project-
setup">Project setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-
screen">Add a single Flutter screen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-
fragment">Add a Flutter Fragment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-view">Add
a Flutter View</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/add-to-app/ios/project-setup">Project
setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/development/add-to-app/debugging">Debugging & hot
reload</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/add-to-app/performance">Loading sequence
and performance</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/tools/android-studio">Android Studio &
IntelliJ</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/tools/devtools/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/android-studio">Install
from Android Studio & IntelliJ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/vscode">Install from VS
Code</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/cli">Install from command
line</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/inspector">Flutter
inspector</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/performance">Performance
view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/cpu-profiler">CPU
Profiler view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/memory">Memory view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/network">Network view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/debugger">Debugger</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/logging">Logging view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/app-size">App size
tool</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/release-notes">Release
notes</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-7-4"
href="/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="/development/tools/sdk/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/upgrading">Upgrading</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/releases">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/release/breaking-changes">Breaking changes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/release-notes">Release
notes</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/pubspec">Flutter and the pubspec
file</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/hot-reload">Hot reload</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/flutter-fix">Flutter Fix</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/formatting">Code formatting</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="/testing/debugging">Debugging tools</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/code-debugging">Debugging apps
programmatically</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/oem-debuggers">Using an OEM debugger</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/build-modes">Flutter's build modes</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/common-errors">Common Flutter errors</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/errors">Handling errors</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing">Testing</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/integration-tests">Integration testing</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/integration-tests/migration">Migrating from
flutter_driver</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="/perf">Overview</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/best-practices">Performance best practices</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/app-size">App size</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/deferred-components">Deferred components</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/rendering-performance">Rendering
performance</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/ui-performance">Performance profiling</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/shader">Shader compilation jank</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/metrics">Performance metrics</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/faq">Performance FAQ</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/deployment/obfuscate">Obfuscating Dart code</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/flavors">Creating flavors for Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/android">Build and release an Android
app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/ios">Build and release an iOS app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/macos">Build and release a macOS app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/linux">Build and release a Linux app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/windows">Build and release a Windows
app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/web">Build and release a web app</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/resources/architectural-overview">Architectural
overview</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/books">Books</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/compatibility">Compatibility policy</a>
</li><li class="nav-item">
<a class="nav-link"
href="https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md"
target="_blank" rel="noopener">Contributing to Flutter<span class="material-icons
md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/bug-reports">Creating useful bug
reports</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/bootstrap-into-dart">Dart resources</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/design-docs">Design Documents</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/faq">FAQ</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/games-toolkit">Casual Games Toolkit</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/packages/google_fonts"
target="_blank" rel="noopener">Google Fonts package<span class="material-icons md-
24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/inside-flutter">Inside Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="https://flutter.dev/brand" target="_blank"
rel="noopener">Official brand assets<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/platform-adaptations">Platform
adaptations</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/videos">Videos and online courses</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="/dash">Who is Dash?</a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/widgets">Widget index</a>
</li><li class="nav-item">
<a class="nav-link" href="https://api.flutter.dev" target="_blank"
rel="noopener">API reference<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/flutter-cli">flutter CLI reference</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/flutter" target="_blank"
rel="noopener">Package site<span class="material-icons md-24">
open_in_new
</span></a>
</li>
</ul>
</li></ul>

</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="platform-navbar-dropdown"
href="https://flutter.dev/multi-platform"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Multi-Platform
</a>
<div class="dropdown-menu" aria-labelledby="platform-navbar-dropdown">
<a class="dropdown-item"
href="https://flutter.dev/multi-platform/mobile">Mobile</a>
<a class="dropdown-item"
href="https://flutter.dev/multi-platform/web">Web</a>
<a class="dropdown-item"
href="https://flutter.dev/multi-platform/desktop">Desktop</a>
<a class="dropdown-item"
href="https://flutter.dev/multi-platform/embedded">Embedded</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dev-navbar-dropdown"
href="https://flutter.dev/development"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Development
</a>
<div class="dropdown-menu" aria-labelledby="dev-navbar-dropdown">
<a class="dropdown-item" href="https://flutter.dev/learn">Learn</a>
<a class="dropdown-item" href="https://pub.dev/flutter/favorites"
target="_blank">Flutter Favorites</a>
<a class="dropdown-item" href="https://pub.dev/"
target="_blank">Packages</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="ecosystem-navbar-dropdown"
href="https://flutter.dev/ecosystem"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Ecosystem
</a>
<div class="dropdown-menu" aria-labelledby="ecosystem-navbar-dropdown">
<a class="dropdown-item"
href="https://flutter.dev/community">Community</a>
<a class="dropdown-item" href="https://flutter.dev/events">Events</a>
<a class="dropdown-item"
href="https://flutter.dev/monetization">Monetization</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="https://flutter.dev/showcase">Showcase</a>
</li>
<li class="nav-item dropdown docs-item">
<a class="nav-link dropdown-toggle"
id="docs-navbar-dropdown"
href="/"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Docs
</a>
<div class="dropdown-menu" aria-labelledby="docs-navbar-dropdown">
<a class="dropdown-item "
href="/whats-new">What's new</a>
<a class="dropdown-item "
href="/get-started/editor">Editor support</a>
<a class="dropdown-item "
href="/development/tools/hot-reload">Hot reload</a>
<a class="dropdown-item "
href="/perf/rendering/ui-performance">Profiling</a>
<a class="dropdown-item active"
href="/get-started/install">Install Flutter</a>
<a class="dropdown-item "
href="/development/tools/devtools/overview">DevTools</a>
<a class="dropdown-item "
href="/cookbook">Cookbook</a>
<a class="dropdown-item "
href="/reference/tutorials">Tutorials</a>
</div>
</li>
</ul>
<form action="/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://twitter.com/FlutterDev"
aria-label="Twitter">
<i class="fab fa-twitter fa-lg"></i>
</a>
<a
class="nav-item nav-link"
href="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://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="/get-started/install/">Get started
</a>
</nav>
</header>

<div class="site-banner site-banner--default" role="alert">


See how Flutter is pushing UI development at Flutter Forward;<br>
streaming live from Kenya on January 25, 2023.
<a href="https://flutter.dev/events/flutter-forward">Register now</a>
<!--
<br>The Flutter and Dart teams are hiring.
<a href="https://docs.flutter.dev/jobs">Learn more</a><br>
-->
</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 active" data-toggle="collapse" href="#sidenav-1"
role="button"
aria-expanded="true" aria-controls="sidenav-1"
>Get started</a>

<ul class="nav flex-column flex-nowrap collapse show" id="sidenav-1">


<li class="nav-item">
<a class="nav-link active" href="/get-started/install">1. Install</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/editor">2. Set up an editor</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/test-drive">3. Test drive</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/codelab">4. Write your first app</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/get-started/flutter-for/android-devs">Flutter for
Android devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/ios-devs">Flutter for iOS
devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/react-native-devs">Flutter
for React Native devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/web-devs">Flutter for web
devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/xamarin-forms-devs">Flutter
for Xamarin.Forms devs</a>
</li><li class="nav-item">
<a class="nav-link" href="/get-started/flutter-for/declarative">Introduction to
declarative UI</a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link" href="https://dart.dev/overview" target="_blank"
rel="noopener">Dart language overview<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/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://gallery.flutter.dev" target="_blank"
rel="noopener">Flutter Gallery [running app]<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="https://github.com/flutter/gallery" target="_blank"
rel="noopener">Flutter Gallery [repo]<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="https://flutter.github.io/samples/" target="_blank"
rel="noopener">Sample apps on GitHub<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/cookbook">Cookbook</a>
</li><li class="nav-item">
<a class="nav-link" href="/codelabs">Codelabs</a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/tutorials">Tutorials</a>
</li>
</ul>
</li><li class="nav-item">
<a class="nav-link " data-toggle="collapse" href="#sidenav-3" role="button"
aria-expanded="true" aria-controls="sidenav-3"
>Development</a>

<ul class="nav flex-column flex-nowrap collapse show" id="sidenav-3">


<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-1"
href="/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="/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="/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="/development/ui/layout">Layouts in Flutter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/tutorial">Tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/adaptive-responsive">Creating
adaptive and responsive apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/building-adaptive-
apps">Building adaptive apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/constraints">Understanding
constraints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/layout/box-constraints">Box
constraints</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/interactive">Adding interactivity</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/navigation">Navigation in Flutter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/navigation/deep-linking">Deep
linking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/animations">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/tutorial">Tutorial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/implicit-
animations">Implicit animations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/animations/hero-animations">Hero
animations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/ui/advanced/actions_and_shortcuts">Actions & shortcuts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/focus">Keyboard focus
system</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/gestures">Gestures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/slivers">Slivers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/ui/advanced/splash-screen">Splash
screens</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/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="/development/data-and-backend/state-mgmt/intro">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/declarative">Think declaratively</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/state-mgmt/ephemeral-
vs-app">Ephemeral vs app state</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/simple">Simple app state
management</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/data-and-backend/state-mgmt/options">Options</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/networking">Networking
& http</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/data-and-backend/json">JSON and
serialization</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/accessibility-and-localization/accessibility">Accessibility</a>
</li><li class="nav-item">
<a class="nav-link"
href="/development/accessibility-and-localization/internationalization">Internation
alization</a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4"
href="/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="/development/tools/sdk/release-notes/supported-
platforms">Supported platforms</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/platform-integration/desktop">Building
desktop apps with Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/platform-integration/platform-
channels">Writing platform-specific code</a>
</li><li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-4"
href="/development/platform-integration/android" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-4"
>Android
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-4">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/c-
interop">C interop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/platform-
views">Hosting native Android views</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/plugin-api-
migration">Android plugin upgrade</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/androidx-
migration">AndroidX migration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/android/splash-
screen-migration">Deprecated Splash Screen API Migration</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-5"
href="/development/platform-integration/ios" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-5"
>iOS
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-5">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/apple-
frameworks">Leveraging Apple's system libraries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/ios-app-
clip">Adding iOS App Clip support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/c-interop">C
interop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/platform-
views">Hosting native iOS views</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/ios/ios-
debugging">iOS debugging</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-6"
href="/development/platform-integration/linux" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-6"
>Linux
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-6">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/linux/building">Building Linux apps</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-7"
href="/development/platform-integration/macos" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-7"
>macOS
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-7">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/macos/building">Building macOS apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/macos/c-interop">C
interop</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-8"
href="/development/platform-integration/web" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-8"
>Web
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-8">
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/faq">Web
FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/renderers">Web
renderers</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/web/initialization">Custom app
initialization</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/web/web-
images">Displaying images on the web</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-4-9"
href="/development/platform-integration/windows" role="button"
aria-expanded="false" aria-controls="sidenav-3-4-9"
>Windows
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-4-9">
<li class="nav-item">
<a class="nav-link"
href="/development/platform-integration/windows/building">Building Windows apps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/windows/run-loop-
migration">Run loop migration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/platform-integration/windows/version-
migration">Version information migration</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-5"
href="/development/packages-and-plugins" role="button"
aria-expanded="false" aria-controls="sidenav-3-5"
>Packages & plugins
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-5">
<li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/background-
processes">Background processes</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/developing-
packages">Developing packages & plugins</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/favorites">Flutter
Favorites program</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/happy-paths">Happy
paths project</a>
</li><li class="nav-item">
<a class="nav-link"
href="/development/packages-and-plugins/happy-paths/recommended">Happy paths
recommendations</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/plugins-in-
tests">Plugins in Flutter tests **NEW**</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/packages-and-plugins/using-
packages">Using packages</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/flutter" target="_blank"
rel="noopener">Package site<span class="material-icons md-24">
open_in_new
</span></a>
</li></ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-6"
href="/development/add-to-app" role="button"
aria-expanded="false" aria-controls="sidenav-3-6"
>Add Flutter to an existing app
</a>
<ul class="nav flex-column flex-nowrap collapse " id="sidenav-3-6">
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/add-to-app/android/project-
setup">Project setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-
screen">Add a single Flutter screen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-
fragment">Add a Flutter Fragment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/add-to-app/android/add-flutter-view">Add
a Flutter View</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/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="/development/add-to-app/ios/project-setup">Project
setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/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="/development/add-to-app/debugging">Debugging & hot
reload</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/add-to-app/performance">Loading sequence
and performance</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/tools/android-studio">Android Studio &
IntelliJ</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/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="/development/tools/devtools/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/android-studio">Install
from Android Studio & IntelliJ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/vscode">Install from VS
Code</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/cli">Install from command
line</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/inspector">Flutter
inspector</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/performance">Performance
view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/cpu-profiler">CPU
Profiler view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/memory">Memory view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/network">Network view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/debugger">Debugger</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/logging">Logging view</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/app-size">App size
tool</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/devtools/release-notes">Release
notes</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link collapsable collapsed"
data-toggle="collapse" data-target="#sidenav-3-7-4"
href="/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="/development/tools/sdk/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/upgrading">Upgrading</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/releases">Releases</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/release/breaking-changes">Breaking changes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/sdk/release-notes">Release
notes</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/development/tools/pubspec">Flutter and the pubspec
file</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/hot-reload">Hot reload</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/flutter-fix">Flutter Fix</a>
</li><li class="nav-item">
<a class="nav-link" href="/development/tools/formatting">Code formatting</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="/testing/debugging">Debugging tools</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/code-debugging">Debugging apps
programmatically</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/oem-debuggers">Using an OEM debugger</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/build-modes">Flutter's build modes</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/common-errors">Common Flutter errors</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/errors">Handling errors</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing">Testing</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/integration-tests">Integration testing</a>
</li><li class="nav-item">
<a class="nav-link" href="/testing/integration-tests/migration">Migrating from
flutter_driver</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="/perf">Overview</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/best-practices">Performance best practices</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/app-size">App size</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/deferred-components">Deferred components</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/rendering-performance">Rendering
performance</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/ui-performance">Performance profiling</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/shader">Shader compilation jank</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/metrics">Performance metrics</a>
</li><li class="nav-item">
<a class="nav-link" href="/perf/faq">Performance FAQ</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/deployment/obfuscate">Obfuscating Dart code</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/flavors">Creating flavors for Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/android">Build and release an Android
app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/ios">Build and release an iOS app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/macos">Build and release a macOS app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/linux">Build and release a Linux app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/windows">Build and release a Windows
app</a>
</li><li class="nav-item">
<a class="nav-link" href="/deployment/web">Build and release a web app</a>
</li><li class="nav-item">
<a class="nav-link" href="/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="/resources/architectural-overview">Architectural
overview</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/books">Books</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/compatibility">Compatibility policy</a>
</li><li class="nav-item">
<a class="nav-link"
href="https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md"
target="_blank" rel="noopener">Contributing to Flutter<span class="material-icons
md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/bug-reports">Creating useful bug
reports</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/bootstrap-into-dart">Dart resources</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/design-docs">Design Documents</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/faq">FAQ</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/games-toolkit">Casual Games Toolkit</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/packages/google_fonts"
target="_blank" rel="noopener">Google Fonts package<span class="material-icons md-
24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/inside-flutter">Inside Flutter</a>
</li><li class="nav-item">
<a class="nav-link" href="https://flutter.dev/brand" target="_blank"
rel="noopener">Official brand assets<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/platform-adaptations">Platform
adaptations</a>
</li><li class="nav-item">
<a class="nav-link" href="/resources/videos">Videos and online courses</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="/dash">Who is Dash?</a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/widgets">Widget index</a>
</li><li class="nav-item">
<a class="nav-link" href="https://api.flutter.dev" target="_blank"
rel="noopener">API reference<span class="material-icons md-24">
open_in_new
</span></a>
</li><li class="nav-item">
<a class="nav-link" href="/reference/flutter-cli">flutter CLI reference</a>
</li><li class="nav-item">
<a class="nav-link" href="https://pub.dev/flutter" target="_blank"
rel="noopener">Package site<span class="material-icons md-24">
open_in_new
</span></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 id="toc" class="section-nav">
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#system-
requirements">System requirements</a></li>
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#get-the-flutter-
sdk">Get the Flutter SDK</a>
<ul class="nav">
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#update-your-
path">Update your path</a></li>
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#run-flutter-
doctor">Run flutter doctor</a></li>
</ul>
</li>
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#android-
setup">Android setup</a>
<ul class="nav">
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#install-android-
studio">Install Android Studio</a></li>
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#set-up-your-
android-device">Set up your Android device</a></li>
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#set-up-the-
android-emulator">Set up the Android emulator</a></li>
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#agree-to-android-
licenses">Agree to Android Licenses</a></li>
</ul>
</li>
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#windows-
setup">Windows setup</a>
<ul class="nav">
<li class="toc-entry nav-item toc-h3"><a class="nav-link" href="#additional-
windows-requirements">Additional Windows requirements</a></li>
</ul>
</li>
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#web-setup">Web
setup</a></li>
<li class="toc-entry nav-item toc-h2"><a class="nav-link" href="#next-step">Next
step</a></li>
</ul>
</div>
<main class="site-content col-12 col-md-9 offset-md-3 col-xl-8 offset-xl-2 col-xxl-
8 offset-xxl-2" role="main">
<div class="container">

<nav class="site-nextprev-nav__single">
<ul>
<li class="next">
<a href="/get-started/editor">Set up an editor</a>
</li>
</ul>
</nav>

<header class="site-content__title">
<div id="page-github-links" class="btn-group" aria-label="Page GitHub
links" role="group">
<a href="https://github.com/flutter/website/tree/main/src/get-started/install/
windows.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://github.com/flutter/website/issues/new?
template=1_page_issue.yml&title=[PAGE ISSUE]: 'Windows
install'&page-url=https://docs.flutter.dev/get-started/install/windows/&page-
source=https://github.com/flutter/website/tree/main/src/get-started/install/
windows.md" 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>Windows install</h1>

<nav aria-label="breadcrumb">
<ol class="breadcrumb" vocab="http://schema.org/" typeof="BreadcrumbList">
<li class="breadcrumb-item"
property="itemListElement" typeof="ListItem"><a href="/get-started"
property="item" typeof="WebPage"><span property="name">Get started</span>
</a>
<meta property="position" content="1" />
</li>
<li class="breadcrumb-item"
property="itemListElement" typeof="ListItem"><a href="/get-started/install"
property="item" typeof="WebPage"><span property="name">Install</span>
</a>
<meta property="position" content="2" />
</li>
<li class="breadcrumb-item active"
property="itemListElement" typeof="ListItem" aria-current="page"><a
href="/get-started/install/windows" property="item" typeof="WebPage"><span
property="name">Windows</span>
</a>
<meta property="position" content="3" />
</li>

</ol>
</nav>
</header>

<div
id="site-toc--inline"
class="site-toc site-toc--inline "

>
<header class="site-toc__title">
Contents
</header>
<ul id="toc" class="section-nav">
<li class="toc-entry toc-h2"><a href="#system-requirements">System
requirements</a></li>
<li class="toc-entry toc-h2"><a href="#get-the-flutter-sdk">Get the Flutter SDK</a>
<ul>
<li class="toc-entry toc-h3"><a href="#update-your-path">Update your path</a></li>
<li class="toc-entry toc-h3"><a href="#run-flutter-doctor">Run flutter
doctor</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#android-setup">Android setup</a>
<ul>
<li class="toc-entry toc-h3"><a href="#install-android-studio">Install Android
Studio</a></li>
<li class="toc-entry toc-h3"><a href="#set-up-your-android-device">Set up your
Android device</a></li>
<li class="toc-entry toc-h3"><a href="#set-up-the-android-emulator">Set up the
Android emulator</a></li>
<li class="toc-entry toc-h3"><a href="#agree-to-android-licenses">Agree to Android
Licenses</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#windows-setup">Windows setup</a>
<ul>
<li class="toc-entry toc-h3"><a href="#additional-windows-requirements">Additional
Windows requirements</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#web-setup">Web setup</a></li>
<li class="toc-entry toc-h2"><a href="#next-step">Next step</a></li>
</ul>
</div>
<h2 id="system-requirements">
<a class="anchor" href="#system-requirements" aria-hidden="true"><span
class="octicon octicon-link"></span></a>System requirements</h2>

<p>To install and run Flutter,


your development environment must meet these minimum requirements:</p>

<ul>
<li>
<strong>Operating Systems</strong>: Windows 10 or later (64-bit), x86-64
based.</li>
<li>
<strong>Disk Space</strong>: 1.64 GB (does not include disk space for
IDE/tools).</li>
<li>
<strong>Tools</strong>: Flutter depends on these tools being available in your
environment.
<ul>
<li>
<a href="https://docs.microsoft.com/en-us/powershell/scripting/install/installing-
windows-powershell">Windows PowerShell 5.0</a> or newer (this is pre-installed with
Windows 10)</li>
<li>
<p><a href="https://git-scm.com/download/win">Git for Windows</a> 2.x, with
the
<strong>Use Git from the Windows Command Prompt</strong> option.</p>

<p>If Git for Windows is already installed,


make sure you can run <code class="language-plaintext
highlighter-rouge">git</code> commands from the
command prompt or PowerShell.</p>
</li>
</ul>
</li>
</ul>

<h2 id="get-the-flutter-sdk">
<a class="anchor" href="#get-the-flutter-sdk" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Get the Flutter SDK</h2>

<ol>
<li>
<p>Download the following installation bundle to get the latest
stable release of the Flutter SDK:</p>

<p><a href="#" class="download-latest-link-windows btn btn-


primary">(loading…)</a></p>

<p>For other release channels, and older builds,


see the <a href="https://docs.flutter.dev/development/tools/sdk/releases">SDK
releases</a> page.</p>
</li>
<li>
<p>Extract the zip file and place the contained <code class="language-plaintext
highlighter-rouge">flutter</code>
in the desired installation location for the Flutter SDK
(for example, <code class="language-plaintext
highlighter-rouge">C:\src\flutter</code>).</p>
</li>
</ol>

<aside class="alert alert-warning" role="alert">


<p><i class="fas fa-exclamation-triangle"></i> <strong>Warning:</strong>
Do not install Flutter to a path that contains special
characters or spaces.</p>
</aside>

<aside class="alert alert-warning" role="alert">


<p><i class="fas fa-exclamation-triangle"></i> <strong>Warning:</strong>
Do not install Flutter in a directory like
<code class="language-plaintext highlighter-rouge">C:\Program Files\</code> that
requires elevated privileges.</p>
</aside>

<p>If you don’t want to install a fixed version of the installation


bundle, you can skip steps 1 and 2. Instead, get the source code
from the <a href="https://github.com/flutter/flutter">Flutter repo</a> on
GitHub, and change branches or tags as needed. For example:</p>

<div class="language-batchfile highlighter-rouge"><div class="highlight"><pre


class="highlight"><code><span class="kd">C</span>:\src&gt;git <span
class="kd">clone</span> <span
class="kd">https</span>://github.com/flutter/flutter.git <span class="na">-b
</span><span class="kd">stable</span>
</code></pre></div></div>

<p>You are now ready to run Flutter commands in the Flutter Console.</p>

<h3 id="update-your-path">
<a class="anchor" href="#update-your-path" aria-hidden="true"><span class="octicon
octicon-link"></span></a>Update your path</h3>

<p>If you wish to run Flutter commands in the regular Windows console,
take these steps to add Flutter to the <code class="language-plaintext highlighter-
rouge">PATH</code> environment variable:</p>
<ul>
<li>From the Start search bar, enter ‘env’
and select <strong>Edit environment variables for your account</strong>.</li>
<li>Under <strong>User variables</strong> check if there is an entry called
<strong>Path</strong>:
<ul>
<li>If the entry exists, append the full path to <code class="language-
plaintext highlighter-rouge">flutter\bin</code> using
<code class="language-plaintext highlighter-rouge">;</code> as a separator from
existing values.</li>
<li>If the entry doesn’t exist,
create a new user variable named <code class="language-plaintext highlighter-
rouge">Path</code> with
the full path to <code class="language-plaintext
highlighter-rouge">flutter\bin</code> as its value.</li>
</ul>
</li>
</ul>

<p>You have to close and reopen any existing console windows


for these changes to take effect.</p>

<aside class="alert alert-info" role="alert">


<p><i class="fas fa-info-circle"></i> <strong>Note:</strong>
As of Flutter’s 1.19.0 dev release, the Flutter SDK
contains the <code class="language-plaintext highlighter-rouge">dart</code>
command alongside the <code class="language-plaintext
highlighter-rouge">flutter</code>
command so that you can more easily run Dart
command-line programs. Downloading the Flutter SDK
also downloads the compatible version of Dart,
but if you’ve downloaded the Dart SDK separately,
make sure that the Flutter version of <code class="language-plaintext
highlighter-rouge">dart</code> is
first in your path, as the two versions might not be compatible.
The following command tells you whether the <code class="language-plaintext
highlighter-rouge">flutter</code> and <code class="language-plaintext highlighter-
rouge">dart</code>
commands originate from the same <code class="language-plaintext highlighter-
rouge">bin</code> directory and are
therefore compatible.</p>

<div class="language-terminal highlighter-rouge">


<div class="highlight"><pre class="highlight"><code><span class="gp">
C:\&gt;</span>where flutter dart
<span class="go"> C:\path-to-flutter-sdk\bin\flutter
C:\path-to-flutter-sdk\bin\flutter.bat
C:\path-to-dart-sdk\bin\dart.exe :: this should go after `C:\path-to-
flutter-sdk\bin\` commands
C:\path-to-flutter-sdk\bin\dart
C:\path-to-flutter-sdk\bin\dart.bat
</span></code></pre></div> </div>

<p>As shown above, the command <code class="language-plaintext highlighter-


rouge">dart</code> from the Flutter SDK doesn’t come first.
Update your path to use commands from <code class="language-plaintext
highlighter-rouge">C:\path-to-flutter-sdk\bin\</code> before
commands from <code class="language-plaintext highlighter-rouge">C:\path-to-dart-
sdk\bin\</code> (in this case).
After restarting your shell for the change to take effect,
running the <code class="language-plaintext highlighter-rouge">where</code>
command again
should show that the <code class="language-plaintext highlighter-
rouge">flutter</code> and <code class="language-plaintext highlighter-
rouge">dart</code> commands
from the same directory now come first.</p>

<div class="language-terminal highlighter-rouge">


<div class="highlight"><pre class="highlight"><code><span class="gp">
C:\&gt;</span>where flutter dart
<span class="go"> C:\dev\src\flutter\bin\flutter
C:\dev\src\flutter\bin\flutter.bat
C:\dev\src\flutter\bin\dart
C:\dev\src\flutter\bin\dart.bat
C:\dev\src\dart-sdk\bin\dart.exe
</span></code></pre></div> </div>

<p>However, if you are using <code class="language-plaintext highlighter-


rouge">PowerShell</code>, in it <code class="language-plaintext highlighter-
rouge">where</code> is
an alias of <code class="language-plaintext
highlighter-rouge">Where-Object</code> command, so you need to use <code
class="language-plaintext highlighter-rouge">where.exe</code> instead.</p>

<div class="language-terminal highlighter-rouge">


<div class="highlight"><pre class="highlight"><code><span class="gp"> PS C:\
&gt;</span><span class="w"> </span>where.exe flutter dart
</code></pre></div> </div>

<p>To learn more about the <code class="language-plaintext highlighter-


rouge">dart</code> command, run <code class="language-plaintext highlighter-
rouge">dart -h</code>
from the command line, or see the <a href="https://dart.dev/tools/dart-vm">dart
tool</a> page.</p>
</aside>

<h3 id="run-flutter-doctor">
<a class="anchor" href="#run-flutter-doctor" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Run <code class="language-plaintext
highlighter-rouge">flutter doctor</code>
</h3>

<p>From a console window that has the Flutter directory in the


path (see above), run the following command to see if there
are any platform dependencies you need to complete the setup:</p>

<div class="language-batchfile highlighter-rouge"><div class="highlight"><pre


class="highlight"><code><span class="kd">C</span>:\src\flutter&gt;flutter <span
class="kd">doctor</span>
</code></pre></div></div>

<p>This command checks your environment and displays a report of the status
of your Flutter installation. Check the output carefully for other
software you might need to install or further tasks to perform
(shown in <strong>bold</strong> text).</p>

<p>For example:</p>
<pre>
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
<strong>✗ Android SDK is missing command line tools; download from
https://goo.gl/XxQghQ</strong>
• Try re-installing or updating your Android SDK,
visit https://docs.flutter.dev/setup/#android-setup for detailed
instructions.
</pre>

<p>The following sections describe how to perform these tasks and


finish the setup process. Once you have installed any missing
dependencies, you can run the <code class="language-plaintext highlighter-
rouge">flutter doctor</code> command again to
verify that you’ve set everything up correctly.</p>

<aside class="alert alert-info" role="alert">


<p><i class="fas fa-info-circle"></i> <strong>Note:</strong>
If <code class="language-plaintext highlighter-rouge">flutter doctor</code>
returns that either the Flutter plugin
or Dart plugin of Android Studio are not installed, move
on to <a href="https://docs.flutter.dev/get-started/editor?tab=androidstudio">Set
up an editor</a> to resolve this issue.</p>
</aside>

<aside class="alert alert-warning" role="alert">


<p><i class="fas fa-exclamation-triangle"></i> <strong>Warning:</strong>
The Flutter tool may occasionally download resources from Google servers.
By downloading or using the Flutter SDK you agree to the <a
href="https://policies.google.com/terms">Google Terms of Service</a>.</p>

<p>For example, when installed from GitHub (as opposed to from a prepackaged
archive),
the Flutter tool will download the Dart SDK from Google servers immediately when
first run, as it is used to execute the <code class="language-plaintext
highlighter-rouge">flutter</code> tool itself. This will also
occur when Flutter is upgraded (e.g. by running the <code class="language-
plaintext highlighter-rouge">flutter upgrade</code> command).</p>

<p>The <code class="language-plaintext highlighter-rouge">flutter</code> tool


uses Google Analytics to report feature usage
statistics and send <a href="https://github.com/flutter/flutter/wiki/Flutter-CLI-
crash-reporting">crash reports</a>. This data is used to help improve Flutter
tools over time.</p>

<p>Flutter tool analytics are not sent on the very first run. To disable
reporting, run <code class="language-plaintext highlighter-rouge">flutter config
--no-analytics</code>. To display the current
setting, use <code class="language-plaintext highlighter-rouge">flutter
config</code>. If you opt out of analytics, an opt-out
event is sent, and then no further information is sent by the
Flutter tool.</p>

<p>Dart tools may also send usage metrics and crash reports to Google.
To control the submission of these metrics, use the following options on the
<a href="https://dart.dev/tools/dart-tool"><code class="language-plaintext
highlighter-rouge">dart</code> tool</a>:</p>

<ul>
<li>
<code class="language-plaintext highlighter-rouge">--enable-analytics</code>:
Enables anonymous analytics.</li>
<li>
<code class="language-plaintext highlighter-rouge">--disable-analytics</code>:
Disables anonymous analytics.</li>
</ul>

<p>The Google <a href="https://policies.google.com/privacy">Privacy Policy</a>


describes how data is handled by these services.</p>

</aside>

<h2 id="android-setup">
<a class="anchor" href="#android-setup" aria-hidden="true"><span class="octicon
octicon-link"></span></a>Android setup</h2>

<aside class="alert alert-info" role="alert">


<p><i class="fas fa-info-circle"></i> <strong>Note:</strong>
Flutter relies on a full installation of Android Studio to supply
its Android platform dependencies. However, you can write your
Flutter apps in a number of editors; a later step discusses that.</p>
</aside>

<h3 id="install-android-studio">
<a class="anchor" href="#install-android-studio" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Install Android Studio</h3>

<ol>
<li>Download and install <a href="https://developer.android.com/studio">Android
Studio</a>.</li>
<li>Start Android Studio, and go through the ‘Android Studio Setup Wizard’.
This installs the latest Android SDK, Android SDK Command-line Tools,
and Android SDK Build-Tools, which are required by Flutter
when developing for Android.</li>
<li>Run <code class="language-plaintext highlighter-rouge">flutter doctor</code>
to confirm that Flutter has located
your installation of Android Studio. If Flutter cannot locate it,
run <code class="language-plaintext highlighter-rouge">flutter config --android-
studio-dir &lt;directory&gt;</code> to set the
directory that Android Studio is installed to.</li>
</ol>

<h3 id="set-up-your-android-device">
<a class="anchor" href="#set-up-your-android-device" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Set up your Android device</h3>

<p>To prepare to run and test your Flutter app on an Android device,
you need an Android device running Android 4.1 (API level 16) or higher.</p>

<ol>
<li>Enable <strong>Developer options</strong> and <strong>USB debugging</strong>
on your device.
Detailed instructions are available in the
<a href="https://developer.android.com/studio/debug/dev-options">Android
documentation</a>.</li>
<li>Windows-only: Install the <a
href="https://developer.android.com/studio/run/win-usb">Google USB
Driver</a>.</li>
<li>Using a USB cable, plug your phone into your computer. If prompted on your
device, authorize your computer to access your device.</li>
<li>In the terminal, run the <code class="language-plaintext highlighter-
rouge">flutter devices</code> command to verify that
Flutter recognizes your connected Android device. By default,
Flutter uses the version of the Android SDK where your <code class="language-
plaintext highlighter-rouge">adb</code>
tool is based. If you want Flutter to use a different installation
of the Android SDK, you must set the <code class="language-plaintext highlighter-
rouge">ANDROID_SDK_ROOT</code> environment
variable to that installation directory.</li>
</ol>

<h3 id="set-up-the-android-emulator">
<a class="anchor" href="#set-up-the-android-emulator" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Set up the Android emulator</h3>

<p>To prepare to run and test your Flutter app on the Android emulator,
follow these steps:</p>

<ol>
<li>Enable
<a href="https://developer.android.com/studio/run/emulator-acceleration#accel-
vm">VM acceleration</a>
on your machine.</li>
<li>Launch <strong>Android Studio</strong>, click the <strong>AVD
Manager</strong>
icon, and select <strong>Create Virtual Device…</strong>
<ul>
<li>In older versions of Android Studio, you should instead
launch <strong>Android Studio &gt; Tools &gt; Android &gt; AVD Manager</strong> and
select
<strong>Create Virtual Device…</strong>. (The <strong>Android</strong> submenu is
only present
when inside an Android project.)</li>
<li>If you do not have a project open, you can choose
<strong>Configure &gt; AVD Manager</strong> and select <strong>Create Virtual
Device…</strong>
</li>
</ul>
</li>
<li>Choose a device definition and select <strong>Next</strong>.</li>
<li>Select one or more system images for the Android versions you want
to emulate, and select <strong>Next</strong>.
An <em>x86</em> or <em>x86_64</em> image is recommended.</li>
<li>Under Emulated Performance, select <strong>Hardware - GLES 2.0</strong> to
enable
<a href="https://developer.android.com/studio/run/emulator-acceleration">hardware
acceleration</a>.</li>
<li>
<p>Verify the AVD configuration is correct, and select
<strong>Finish</strong>.</p>

<p>For details on the above steps, see <a


href="https://developer.android.com/studio/run/managing-avds">Managing
AVDs</a>.</p>
</li>
<li>In Android Virtual Device Manager, click <strong>Run</strong> in the toolbar.
The emulator starts up and displays the default canvas for your
selected OS version and device.</li>
</ol>

<h3 id="agree-to-android-licenses">
<a class="anchor" href="#agree-to-android-licenses" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Agree to Android Licenses</h3>

<p>Before you can use Flutter, you must agree to the


licenses of the Android SDK platform. This step should be done after
you have installed the tools listed above.</p>

<ol>
<li>
<p>Make sure that you have a version of Java 8 installed and that your
<code class="language-plaintext highlighter-rouge">JAVA_HOME</code> environment
variable is set to the JDK’s folder.</p>

<p>Android Studio versions 2.2 and higher come with a JDK, so this should
already be done.</p>
</li>
<li>Open an elevated console window and run the following command to begin
signing licenses.
<div class="language-terminal highlighter-rouge">
<div class="highlight"><pre class="highlight"><code><span class="gp">$</span><span
class="w"> </span>flutter doctor <span class="nt">--android-licenses</span>
</code></pre></div> </div>
</li>
<li>Review the terms of each license carefully before agreeing to them.</li>
<li>Once you are done agreeing with licenses, run <code class="language-plaintext
highlighter-rouge">flutter doctor</code> again
to confirm that you are ready to use Flutter.</li>
</ol>

<h2 id="windows-setup">
<a class="anchor" href="#windows-setup" aria-hidden="true"><span class="octicon
octicon-link"></span></a>Windows setup</h2>

<h3 id="additional-windows-requirements">
<a class="anchor" href="#additional-windows-requirements" aria-hidden="true"><span
class="octicon octicon-link"></span></a>Additional Windows requirements</h3>

<p>For Windows desktop development,


you need the following in addition to the Flutter SDK:</p>

<ul>
<li>
<a href="https://visualstudio.microsoft.com/downloads/">Visual Studio 2022</a> or
<a href="https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-
studio-2022">Visual Studio Build Tools 2022</a>
When installing Visual Studio or only the Build Tools,
you need the “Desktop development with C++” workload installed
for building windows, including all of its default components.</li>
</ul>

<aside class="alert alert-info" role="alert">


<p><i class="fas fa-info-circle"></i> <strong>Note:</strong>
<strong>Visual Studio</strong> is different than Visual Studio <em>Code</em>.</p>
</aside>
<p>For more information, see <a href="https://docs.flutter.dev/desktop">Desktop
support for Flutter</a></p>

<h2 id="web-setup">
<a class="anchor" href="#web-setup" aria-hidden="true"><span class="octicon
octicon-link"></span></a>Web setup</h2>

<p>Flutter has support for building web applications in the


<code class="language-plaintext highlighter-rouge">stable</code> channel. Any app
created in Flutter 2 automatically
builds for the web. To add web support to an app created
before web was in stable, follow the instructions on
<a href="https://docs.flutter.dev/get-started/web">Building a web application with
Flutter</a>
when you’ve completed the setup above.</p>

<h2 id="next-step">
<a class="anchor" href="#next-step" aria-hidden="true"><span class="octicon
octicon-link"></span></a>Next step</h2>

<p>Set up your preferred editor.</p>

<nav class="site-nextprev-nav__single">
<ul>
<li class="next">
<a href="/get-started/editor">Set up an editor</a>
</li>
</ul>
</nav>

</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="/assets/images/shared/brand/flutter/logo/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://groups.google.com/forum/#!forum/flutter-
dev">flutter-dev@</a></li>
<li><a href="/tos">terms</a></li>
<li><a href="/brand">brand usage</a></li>
<li><a href="/security">security</a></li>
<li><a
href="https://www.google.com/intl/en/policies/privacy">privacy</a></li>
<li><a href="https://esflutter.dev/">español</a></li>
<li><a href="https://flutter.cn" class="text-nowrap">社区中文资
源</a></li>
<li><a href="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://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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp
0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"
integrity="sha512-
ubuT8Z88WxezgSqf3RLuNi5lmjstiJcyezx34yIU2gAHonIi27Na7atqzUZCOoY4CExaoFumzOsFQ2Ch+I/
HCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
integrity="sha512-
7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+v
X3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"
integrity="sha512-
7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/
LKJhnyFOKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"
integrity="sha512-
wT7uPE7tOP6w4o28u1DN775jYjHQApdBnib5Pho4RB0Pgd9y7eSkAV1BTqQydupYDB9GBhTcQQzyNMPMV3c
Aew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script
src="/assets/js/vendor/code-prettify/prettify.js?v=1669355944"></script>
<script
src="/assets/js/vendor/code-prettify/lang-css.js?v=1669355944"></script>
<script src="/assets/js/vendor/code-prettify/lang-dart.js?v=1669355944"></
script>
<script src="/assets/js/vendor/code-prettify/lang-yaml.js?v=1669355944"></
script>
<script src="/assets/js/tabs.js?v=1669355944"></script>
<script src="/assets/js/archive.js?v=1669355944"></script>
<script src="/assets/js/main.js?v=1669355944"></script>
</body>
</html>

You might also like