How to install Flutter on Mac & Windows
Tags: flutter, google, mac, windows
Published: 2019-09-26 09:40:41

<main role="main" class="metabar-sibling"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="7fbf" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="60ce" class="graf graf--p graf-after--figure">In this post, we’ll have an overview of Flutter, the latest buzz in app development market. Flutter is gaining popularity faster than any other framework. Some say it is Google’s answer to Facebook’s React Native, but that debate is for later. Let’s learn the basics of Flutter and how to start using it.</p><h3 name="56d8" class="graf graf--h3 graf-after--p">What is&nbsp;Flutter?</h3><p name="d816" class="graf graf--p graf--hasDropCapModel graf--hasDropCap graf-after--h3 is-selected"><span class="graf-dropCap">F</span>lutter is Google’s portable UI toolkit for crafting high-quality native experiences for mobile, web and desktop in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.</p><h3 name="c24d" class="graf graf--h3 graf-after--p">What does Flutter&nbsp;do?</h3><p name="a9c9" class="graf graf--p graf-after--h3">For users, Flutter makes beautiful app UIs come to life.</p><p name="79f8" class="graf graf--p graf-after--p">For developers, Flutter lowers the bar to entry for building mobile apps. It speeds up the development of mobile apps and reduces the cost and complexity of app production across iOS and Android.</p><p name="2782" class="graf graf--p graf-after--p">For designers, Flutter helps deliver the original design vision, without loss of fidelity or compromises. It also acts as a productive prototyping tool.</p><h3 name="2315" class="graf graf--h3 graf-after--p">What technology is Flutter built&nbsp;with?</h3><p name="431b" class="graf graf--p graf-after--h3">Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). See this <a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.gbb3c3233b_0_162"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">architecture diagram</a> for a better picture of the main components.</p><h3 name="d979" class="graf graf--h3 graf-after--p">Why use&nbsp;Flutter?</h3><ul class="postList"><li name="af5c" class="graf graf--li graf-after--h3">Develop for iOS and Android from a single codebase</li><li name="7c69" class="graf graf--li graf-after--li">Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach</li><li name="4873" class="graf graf--li graf-after--li">Experiment by changing code and reloading as your app runs (with hot reload)</li><li name="0e2e" class="graf graf--li graf-after--li">Fix crashes and continue debugging from where the app left off</li><li name="45aa" class="graf graf--li graf-after--li">Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework</li><li name="d8ce" class="graf graf--li graf-after--li graf--trailing">Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets</li></ul></div></div></section><section name="e9a5" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="3686" class="graf graf--h3 graf--leading">How to Install Flutter on&nbsp;Windows?</h3><h4 name="636a" class="graf graf--h4 graf-after--h3">Minimum System Requirements</h4><ul class="postList"><li name="80b5" class="graf graf--li graf-after--h4"><strong class="markup--strong markup--li-strong">Operating Systems:</strong> Windows 7 or later [64-bit]</li><li name="26d4" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Disk Space:</strong> 400 MB</li><li name="a2bd" class="graf graf--li graf-after--li"><a href="https://git-scm.com/download/win"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong">Git for Windows</strong></a></li></ul><h4 name="ab69" class="graf graf--h4 graf-after--li">Get the Flutter&nbsp;SDK</h4><ol class="postList"><li name="95b8" class="graf graf--li graf-after--h4">Download Latest Flutter SDK <a href="https://flutter.dev/docs/development/tools/sdk/releases?tab=windows"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HERE</a></li><li name="e64c" class="graf graf--li graf-after--li">Unzip the downloaded zip in <code class="markup--code markup--li-code">C:\flutter</code>&nbsp;.</li><li name="f12a" class="graf graf--li graf-after--li">Locate <code class="markup--code markup--li-code">flutter_console.bat</code> inside the <code class="markup--code markup--li-code">flutter</code> directory and start it by double-clicking.</li></ol><h4 name="7ccd" class="graf graf--h4 graf-after--li">Update your&nbsp;path</h4><p name="f014" class="graf graf--p graf-after--h4">If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the <code class="markup--code markup--p-code">PATH</code>environment variable:</p><ul class="postList"><li name="44e7" class="graf graf--li graf-after--p">From the Start search bar, type ‘env’ and select <strong class="markup--strong markup--li-strong">Edit environment variables for your account</strong></li><li name="9703" class="graf graf--li graf-after--li">Under <strong class="markup--strong markup--li-strong">User variables</strong> check if there is an entry called <strong class="markup--strong markup--li-strong">Path</strong>:</li><li name="df4f" class="graf graf--li graf-after--li">If the entry does exist, append the full path to <code class="markup--code markup--li-code">flutter\bin</code> using&nbsp;<code class="markup--code markup--li-code">;</code> as a separator from existing values.</li><li name="64b6" class="graf graf--li graf-after--li">If the entry does not exist, create a new user variable named <code class="markup--code markup--li-code">Path</code> with the full path to <code class="markup--code markup--li-code">flutter\bin</code> as its value.</li></ul><blockquote name="ce33" class="graf graf--blockquote graf-after--li">Note that you will have to close and reopen any existing console windows for these changes to take effect.</blockquote><h4 name="3f79" class="graf graf--h4 graf-after--blockquote">Run flutter&nbsp;doctor</h4><p name="631e" class="graf graf--p graf-after--h4">From a console window which 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><pre name="ca07" class="graf graf--pre graf-after--p">C:\flutter&gt;flutter doctor</pre><p name="cd7b" class="graf graf--p graf-after--pre">This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you may need to install or further tasks to perform (shown in <strong class="markup--strong markup--p-strong">bold</strong> text).</p><p name="de6b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">For example:</strong></p><pre name="79ea" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">[-]</strong> Android toolchain - develop for Android devices<br>    • Android SDK at C:\Android\sdk<br>    <strong class="markup--strong markup--pre-strong">✗ Android SDK is missing command line tools; download from </strong><a href="https://goo.gl/XxQghQ"  class="markup--anchor markup--pre-anchor" rel="noopener" target="_blank"><strong class="markup--strong markup--pre-strong">https://goo.gl/XxQghQ</strong></a><br>    • Try re-installing or updating your Android SDK,<br>     visit <a href="https://flutter.dev/setup/#android-setup"  class="markup--anchor markup--pre-anchor" rel="noopener" target="_blank">https://flutter.dev/setup/#android-setup</a> for detailed instructions.</pre><h3 name="0971" class="graf graf--h3 graf-after--pre">Android Setup</h3><blockquote name="97bb" class="graf graf--blockquote graf-after--h3">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.</blockquote><h4 name="ab10" class="graf graf--h4 graf-after--blockquote">Install Android&nbsp;Studio</h4><ol class="postList"><li name="5120" class="graf graf--li graf-after--h4">Download and install <a href="https://developer.android.com/studio"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android Studio</a>.</li><li name="f92e" class="graf graf--li graf-after--li">Start Android Studio, and go through the ‘<strong class="markup--strong markup--li-strong">Android Studio Setup Wizard</strong>’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.</li></ol><h4 name="2a44" class="graf graf--h4 graf-after--li">Set up your Android&nbsp;device</h4><p name="06a7" class="graf graf--p graf-after--h4">To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.</p><ol class="postList"><li name="11bd" class="graf graf--li graf-after--p">Enable <strong class="markup--strong markup--li-strong">Developer options</strong> and <strong class="markup--strong markup--li-strong">USB debugging</strong> on your device. Detailed instructions are available in the <a href="https://developer.android.com/studio/debug/dev-options"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android documentation</a>.</li><li name="dc26" class="graf graf--li graf-after--li">Windows-only: Install the <a href="https://developer.android.com/studio/run/win-usb"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google USB Driver</a></li><li name="7085" class="graf graf--li graf-after--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 name="b1b1" class="graf graf--li graf-after--li">In the terminal, run the <code class="markup--code markup--li-code">flutter devices</code> command to verify that Flutter recognizes your connected Android device.</li></ol><p name="f46b" class="graf graf--p graf-after--li">By default, Flutter uses the version of the Android SDK where your <code class="markup--code markup--p-code">adb</code> tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the <code class="markup--code markup--p-code">ANDROID_HOME</code> environment variable to that installation directory.</p><h4 name="910d" class="graf graf--h4 graf-after--p">Install the Flutter and Dart&nbsp;plugins</h4><ol class="postList"><li name="f819" class="graf graf--li graf-after--h4">Start Android Studio.</li><li name="1e6d" class="graf graf--li graf-after--li">Open plugin preferences (<strong class="markup--strong markup--li-strong">File &gt; Settings &gt; Plugins</strong>).</li><li name="8b08" class="graf graf--li graf-after--li">Select <strong class="markup--strong markup--li-strong">Browse repositories</strong>, select the Flutter plugin and click <strong class="markup--strong markup--li-strong">Install</strong>.</li><li name="0f97" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Yes</strong> when prompted to install the Dart plugin.</li><li name="1180" class="graf graf--li graf-after--li graf--trailing">Click <strong class="markup--strong markup--li-strong">Restart</strong> when prompted.</li></ol></div></div></section><section name="e984" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="cd6d" class="graf graf--h3 graf--leading">How to Install Flutter on&nbsp;MacOS?</h3><h4 name="6f74" class="graf graf--h4 graf-after--h3">Minimum System Requirements</h4><ul class="postList"><li name="2b32" class="graf graf--li graf-after--h4"><strong class="markup--strong markup--li-strong">Operating Systems</strong>: macOS [64-bit]</li><li name="1129" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Disk Space</strong>: 700 MB</li><li name="4517" class="graf graf--li graf-after--li"><a href="https://git-scm.com/download/mac"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong">Git for macOS</strong></a></li></ul><h4 name="3158" class="graf graf--h4 graf-after--li">Get the Flutter&nbsp;SDK</h4><ul class="postList"><li name="7024" class="graf graf--li graf-after--h4">Download Latest Flutter SDK <a href="https://flutter.dev/docs/development/tools/sdk/releases?tab=macos"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HERE</a></li><li name="5f2c" class="graf graf--li graf-after--li">Extract the file in the desired location e.g.</li></ul><pre name="7380" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">$</strong> cd ~/development<br><strong class="markup--strong markup--pre-strong">$</strong> unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip</code></pre><ul class="postList"><li name="4f2d" class="graf graf--li graf-after--pre">Add the <code class="markup--code markup--li-code">flutter</code> tool to your path. To do this, open your bash profile from your terminal (might need sudo)</li></ul><pre name="c64c" class="graf graf--pre graf-after--li"><strong class="markup--strong markup--pre-strong">$</strong> sudo vim ~/.bash_profile</pre><p name="56d9" class="graf graf--p graf-after--pre">Add your flutter path to the <code class="markup--code markup--p-code">$PATH</code> variable in bash_profile.</p><p name="b6ce" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">E.g.</strong> If you extracted flutter in your <code class="markup--code markup--p-code">Applications</code> folder, your path will be <code class="markup--code markup--p-code">/Applications/flutter/bin</code>&nbsp;. Add this to the existing <code class="markup--code markup--p-code">$PATH</code> variable by using&nbsp;<code class="markup--code markup--p-code">:</code> in between two paths. Once added, save and close the <code class="markup--code markup--p-code">bash_profile</code>&nbsp;. Run terminal again and check the <code class="markup--code markup--p-code">$PATH</code> by running</p><pre name="655a" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$</strong> echo $PATH</pre><p name="5ba9" class="graf graf--p graf-after--pre">You should see your Flutter path added to the <code class="markup--code markup--p-code">$PATH</code></p><ul class="postList"><li name="2d85" class="graf graf--li graf-after--p">Run <code class="markup--code markup--li-code">flutter precache</code> in the terminal.</li></ul><h4 name="16fd" class="graf graf--h4 graf-after--li">Run flutter&nbsp;doctor</h4><p name="841d" class="graf graf--p graf-after--h4">Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the <code class="markup--code markup--p-code">-v</code> flag):</p><pre name="d2a7" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$</strong> flutter doctor</pre><p name="341d" class="graf graf--p graf-after--pre">This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in <strong class="markup--strong markup--p-strong">bold</strong> text).</p><p name="20cc" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">For example: </strong>If you haven’t used Flutter before, you might see an output like this by running <code class="markup--code markup--p-code">flutter doctor</code></p><figure tabindex="0" contenteditable="false" name="21d0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 569px; max-height: 380px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.8%;"></div><img class="graf-image" data-image-id="1*mMa1SyYE6dzpZyYFg9xqgw.png" data-width="569" data-height="380" src="https://cdn-images-1.medium.com/max/800/1*mMa1SyYE6dzpZyYFg9xqgw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Flutter doctor output on a fresh&nbsp;system</figcaption></figure><p name="79f9" class="graf graf--p graf-after--figure">You can see there are several things to be done to begin using Flutter in this Mac. To correct these issues, let’s run following commands</p><h4 name="fc25" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Fix license issue in Android&nbsp;studio</strong></h4><pre name="c44c" class="graf graf--pre graf-after--h4"><strong class="markup--strong markup--pre-strong">$</strong> flutter doctor --android-licenses</pre><h4 name="6845" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">Fix iOS toolchain issues</strong></h4><p name="d985" class="graf graf--p graf-after--h4">( Install Xcode command line tools if you are on Mac OS Mojave)</p><pre name="ca30" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$</strong> brew update</pre><pre name="1834" class="graf graf--pre graf-after--pre"><strong class="markup--strong markup--pre-strong">$</strong> brew install --HEAD usbmuxd</pre><pre name="26d7" class="graf graf--pre graf-after--pre"><strong class="markup--strong markup--pre-strong">$</strong> brew link usbmuxd</pre><pre name="fa78" class="graf graf--pre graf-after--pre"><strong class="markup--strong markup--pre-strong">$</strong> brew install --HEAD libimobiledevice</pre><pre name="2341" class="graf graf--pre graf-after--pre"><strong class="markup--strong markup--pre-strong">$</strong> brew install ideviceinstaller</pre><h4 name="75da" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">Update iOS-deploy</strong></h4><pre name="789a" class="graf graf--pre graf-after--h4"><strong class="markup--strong markup--pre-strong">$</strong> npm install -g ios-deploy</pre><p name="1a0c" class="graf graf--p graf-after--pre"><code class="markup--code markup--p-code">brew</code> does not maintain it any longer, as <code class="markup--code markup--p-code">flutter doctor</code> suggests</p><h4 name="a2d2" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Android Studio&#8202;—&#8202;Install Flutter and Dart&nbsp;plugins</strong></h4><ol class="postList"><li name="e3d1" class="graf graf--li graf-after--h4">Start Android Studio.</li><li name="f721" class="graf graf--li graf-after--li">Open plugin preferences (<strong class="markup--strong markup--li-strong">Preferences &gt; Plugins</strong> on macOS, <strong class="markup--strong markup--li-strong">File &gt; Settings &gt; Plugins</strong> on Windows).</li><li name="be08" class="graf graf--li graf-after--li">Select <strong class="markup--strong markup--li-strong">Browse repositories</strong>, select the Flutter plugin and click <strong class="markup--strong markup--li-strong">Install</strong>.</li><li name="8a12" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Yes</strong> when prompted to install the Dart plugin.</li><li name="0091" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Restart</strong> when prompted.</li></ol><figure tabindex="0" contenteditable="false" name="a0b8" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 438px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.5%;"></div><img class="graf-image" data-image-id="1*apscZjX_Y-FyRwrnCY8U0w.png" data-width="1440" data-height="900" src="https://cdn-images-1.medium.com/max/800/1*apscZjX_Y-FyRwrnCY8U0w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Install Flutter and Dart plugin in Android&nbsp;Studio</figcaption></figure><h4 name="af5e" class="graf graf--h4 graf-after--figure"><strong class="markup--strong markup--h4-strong">Install VSCode Flutter Extension</strong></h4><figure tabindex="0" contenteditable="false" name="5e28" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 161px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 23%;"></div><img class="graf-image" data-image-id="1*0nC0NDrHEbqZBbPbvIP2SQ.png" data-width="751" data-height="173" src="https://cdn-images-1.medium.com/max/800/1*0nC0NDrHEbqZBbPbvIP2SQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="cec6" class="graf graf--p graf-after--figure">Now all issues should be gone</p><figure tabindex="0" contenteditable="false" name="30fc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 617px; max-height: 135px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 21.9%;"></div><img class="graf-image" data-image-id="1*AqXzbpB1oyD5Y0YRgHoZSQ.png" data-width="617" data-height="135" src="https://cdn-images-1.medium.com/max/800/1*AqXzbpB1oyD5Y0YRgHoZSQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">We are GO&nbsp;flight!</figcaption></figure><h3 name="17c7" class="graf graf--h3 graf-after--figure">iOS Setup</h3><h4 name="69f2" class="graf graf--h4 graf-after--h3">Install Xcode</h4><p name="b081" class="graf graf--p graf-after--h4">To develop Flutter apps for iOS, you need a Mac with Xcode 9.0 or newer:</p><ul class="postList"><li name="a3e2" class="graf graf--li graf-after--p">Install Xcode 9.0 or newer (via <a href="https://developer.apple.com/xcode/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">web download</a> or the <a href="https://itunes.apple.com/us/app/xcode/id497799835"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Mac App Store</a>).</li><li name="1bf9" class="graf graf--li graf-after--li">Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line:</li></ul><pre name="d10e" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">$</strong> sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer</code></pre><ul class="postList"><li name="98ca" class="graf graf--li graf-after--pre">This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.</li><li name="a154" class="graf graf--li graf-after--li">Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running <code class="markup--code markup--li-code">sudo xcodebuild -license</code> from the command line.</li></ul><p name="6a86" class="graf graf--p graf-after--li">With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.</p><h4 name="6f27" class="graf graf--h4 graf-after--p">Set up the iOS simulator</h4><p name="22be" class="graf graf--p graf-after--h4">To prepare to run and test your Flutter app on the iOS simulator, follow these steps:</p><ul class="postList"><li name="b799" class="graf graf--li graf-after--p">On your Mac, find the Simulator via Spotlight or by using the following command:</li></ul><pre name="d4e6" class="graf graf--pre graf-after--li"><strong class="markup--strong markup--pre-strong">$ </strong><code class="markup--code markup--pre-code">open -a Simulator</code></pre><ul class="postList"><li name="b833" class="graf graf--li graf-after--pre">Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s <strong class="markup--strong markup--li-strong">Hardware &gt; Device</strong> menu.</li><li name="dd83" class="graf graf--li graf-after--li">Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the <strong class="markup--strong markup--li-strong">Window &gt; Scale</strong> menu in the simulator.</li></ul><h4 name="0d73" class="graf graf--h4 graf-after--li">Create and run a simple Flutter&nbsp;app</h4><p name="f323" class="graf graf--p graf-after--h4">To create your first Flutter app and test your setup, follow these steps:</p><ul class="postList"><li name="55e2" class="graf graf--li graf-after--p">Create a new Flutter app by running the following from the command line:</li></ul><pre name="49f8" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">$ </strong>flutter create my_app</code></pre><figure tabindex="0" contenteditable="false" name="8dd9" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 227px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 32.5%;"></div><img class="graf-image" data-image-id="1*QQe_XMnoAw0FPzrNAi4C7A.png" data-width="764" data-height="248" src="https://cdn-images-1.medium.com/max/800/1*QQe_XMnoAw0FPzrNAi4C7A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">A successful creation will show something like&nbsp;this</figcaption></figure><p name="7858" class="graf graf--p graf-after--figure">A <code class="markup--code markup--p-code">my_app</code> directory is created, containing Flutter’s starter app.</p><figure tabindex="0" contenteditable="false" name="f8f2" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 491px; max-height: 253px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.5%;"></div><img class="graf-image" data-image-id="1*Y5iYl7EnP7DINNUJG9ULXw.png" data-width="491" data-height="253" src="https://cdn-images-1.medium.com/max/800/1*Y5iYl7EnP7DINNUJG9ULXw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Flutter app directory</figcaption></figure><p name="9484" class="graf graf--p graf-after--figure">CD into this directory:</p><pre name="307c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">$ </strong>cd my_app</code></pre><p name="78b8" class="graf graf--p graf-after--pre">To launch the app in the Simulator, ensure that the Simulator is running and enter:</p><pre name="415f" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$</strong><code class="markup--code markup--pre-code"> flutter run</code></pre><figure tabindex="0" contenteditable="false" name="354d" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 619px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.89999999999998%;"></div><img class="graf-image" data-image-id="1*jz38rMbRI2p8lVRyaUKMqQ.gif" data-width="350" data-height="619" src="https://cdn-images-1.medium.com/max/800/1*jz38rMbRI2p8lVRyaUKMqQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Your first Flutter iOS app is running in Simulator&nbsp;!!&nbsp;👻</figcaption></figure><h4 name="533c" class="graf graf--h4 graf-after--figure">Deploy to iOS&nbsp;devices</h4><p name="b48a" class="graf graf--p graf-after--h4">To deploy your Flutter app to a physical iOS device, you’ll need some additional tools and an Apple account. You’ll also need to set up physical device deployment in Xcode.</p><ul class="postList"><li name="93af" class="graf graf--li graf-after--p">Install <a href="https://brew.sh/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">homebrew</a>.</li><li name="3ffb" class="graf graf--li graf-after--li">Ensure that homebrew is up to date:</li></ul><pre name="8787" class="graf graf--pre graf-after--li"><strong class="markup--strong markup--pre-strong">$</strong> brew update</pre><ul class="postList"><li name="e881" class="graf graf--li graf-after--pre">Install the tools for deploying Flutter apps to iOS devices by running the following commands:</li></ul><pre name="62eb" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code u-paddingRight0 u-marginRight0"><strong class="markup--strong markup--pre-strong">$</strong> brew install --HEAD usbmuxd<br><strong class="markup--strong markup--pre-strong">$</strong> brew link usbmuxd<br><strong class="markup--strong markup--pre-strong">$</strong> brew install --HEAD libimobiledevice<br><strong class="markup--strong markup--pre-strong">$</strong> brew install ideviceinstaller ios-deploy cocoapods<br><strong class="markup--strong markup--pre-strong">$</strong> pod setup</code></pre><h3 name="ab66" class="graf graf--h3 graf-after--pre">Android setup</h3><blockquote name="445d" class="graf graf--blockquote graf-after--h3">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 will discuss that.</blockquote><h4 name="499e" class="graf graf--h4 graf-after--blockquote">Install Android&nbsp;Studio</h4><ol class="postList"><li name="4ca8" class="graf graf--li graf-after--h4">Download and install <a href="https://developer.android.com/studio"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android Studio</a>.</li><li name="4445" class="graf graf--li graf-after--li">Start Android Studio, and go through the ‘<strong class="markup--strong markup--li-strong">Android Studio Setup Wizard</strong>’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.</li></ol><h4 name="5a6c" class="graf graf--h4 graf-after--li">Set up your Android&nbsp;device</h4><p name="bba6" class="graf graf--p graf-after--h4">To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.</p><ol class="postList"><li name="5e1c" class="graf graf--li graf-after--p">Enable <strong class="markup--strong markup--li-strong">Developer Options</strong> and <strong class="markup--strong markup--li-strong">USB debugging</strong> on your device. Detailed instructions are available in the <a href="https://developer.android.com/studio/debug/dev-options"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android documentation</a>.</li><li name="7b8a" class="graf graf--li graf-after--li">Windows-only: Install the <a href="https://developer.android.com/studio/run/win-usb"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google USB Driver</a></li><li name="be27" class="graf graf--li graf-after--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 name="2934" class="graf graf--li graf-after--li">In the terminal, run the <code class="markup--code markup--li-code">flutter devices</code> command to verify that Flutter recognizes your connected Android device.</li><li name="da5b" class="graf graf--li graf-after--li">Once ready, run <code class="markup--code markup--li-code">flutter run</code> again to run the app on Android device 😎</li></ol><p name="2834" class="graf graf--p graf-after--li">By default, Flutter uses the version of the Android SDK where your <code class="markup--code markup--p-code">adb</code> tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the <code class="markup--code markup--p-code">ANDROID_HOME</code> environment variable to that installation directory.</p><h3 name="6c1c" class="graf graf--h3 graf-after--p">Set up the Android&nbsp;emulator</h3><p name="a74f" class="graf graf--p graf-after--h3">To prepare to run and test your Flutter app on the Android emulator, follow these steps:</p><ol class="postList"><li name="bb33" class="graf graf--li graf-after--p">Enable <a href="https://developer.android.com/studio/run/emulator-acceleration"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">VM acceleration</a> on your machine.</li><li name="19c0" class="graf graf--li graf-after--li">Launch <strong class="markup--strong markup--li-strong">Android Studio &gt; Tools &gt; Android &gt; AVD Manager</strong> and select <strong class="markup--strong markup--li-strong">Create Virtual Device</strong>. (The <strong class="markup--strong markup--li-strong">Android</strong> submenu is only present when inside an Android project.)</li><li name="2060" class="graf graf--li graf-after--li">Choose a device definition and select <strong class="markup--strong markup--li-strong">Next</strong>.</li><li name="42c0" class="graf graf--li graf-after--li">Select one or more system images for the Android versions you want to emulate, and select <strong class="markup--strong markup--li-strong">Next</strong>. An <em class="markup--em markup--li-em">x86</em> or <em class="markup--em markup--li-em">x86_64</em>image is recommended.</li><li name="2102" class="graf graf--li graf-after--li">Under Emulated Performance, select <strong class="markup--strong markup--li-strong">Hardware&#8202;—&#8202;GLES 2.0</strong> to enable <a href="https://developer.android.com/studio/run/emulator-acceleration"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">hardware acceleration</a>.</li><li name="1199" class="graf graf--li graf-after--li">Verify the AVD configuration is correct, and select <strong class="markup--strong markup--li-strong">Finish</strong>. For details on the above steps, see <a href="https://developer.android.com/studio/run/managing-avds"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Managing AVDs</a>.</li><li name="5872" class="graf graf--li graf-after--li graf--trailing">In Android Virtual Device Manager, click <strong class="markup--strong markup--li-strong">Run</strong> in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.</li></ol></div></div></section><section name="62ba" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="8793" class="graf graf--h3 graf--leading">More resources for&nbsp;Flutter</h3><ul class="postList"><li name="5fc2" class="graf graf--li graf-after--h3"><a href="https://flutter.dev/docs"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Flutter Documentation</a></li><li name="b3a6" class="graf graf--li graf-after--li">Build Native Mobile Apps with Flutter | <a href="https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Udacity</a></li><li name="8298" class="graf graf--li graf-after--li"><a href="https://flutter.dev/community"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Flutter Community</a></li><li name="b094" class="graf graf--li graf-after--li"><a href="https://www.youtube.com/flutterdev"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Flutter YouTube Channel</a></li><li name="3f08" class="graf graf--li graf-after--li"><a href="https://flutter.dev/docs/cookbook"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Flutter Cookbook</a></li><li name="d960" class="graf graf--li graf-after--li graf--trailing">My GitHub Profile <a href="https://github.com/ShivamGoyal1899"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">@ShivamGoyal1899</a></li></ul></div></div></section><section name="6f00" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="4442" class="graf graf--p graf--leading graf--trailing">YaY..!! 👻 You’re almost done. Now, you are ready to design beautiful Android and iOS Apps with Flutter.</p></div></div></section></div></article></main>