Everything Flutter (Part 2) : Installing Flutter

In this second part, we'll go through the installation of Flutter both on Android Studio and Visual Studio Code (VS Code).

System Requirement
  • Operating Systems: Windows 7 SP1 or later (64-bit)
  • Disk Space: 400MB (does not include disk space for IDE/tools)
  • Tools: Flutter depends on these tools being available in your environment.

Get The Flutter SDK
  • Download the Installation Bundle
  • Extract the zip-file and place the contained flutter in your desired Installation location for the Flutter SDK (e.g “C:\Flutter\flutter”; do not install flutter in a directory like “C:\Program Files\” that requires elevated privileges)
  • Locate the file flutter_console.bat inside the flutter directory. Start it by double-clicking. With this you are ready to run Flutter Commands in the Flutter Console.

Update Your Path
If you wish to run Flutter Commands in the regular Windows Command Prompt, follow the steps below to add Flutter to the PATH environment variables.
  • Go to “Control Panel > User Account > Change my environment variables”
  • Under User Variable check if there is an entry called Path or PATH
    • If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values
    • If the entry does not exist, create a new User Variable named Path or PATH with full path to flutter\bin as it’s value
  • Reboot Windows to fully apply changes
  • Run flutter doctor in your Windows Command Prompt to see if there are dependencies you need to install to complete the setup

IDE Installation And Setup

Android Studio - Download And Install Android Studio
  • Start Andriod Studio, and go through the Andriod Studio Setup Wizard. This will install the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android

Visual Studio Code - Download And Install Visual Studio Code

Andriod Studio - Set up your Android device
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.
  • Enable Developer options and USB debugging on your device
  • Windows-only: Install the Google USB Driver
  • Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
  • In the terminal, run the flutter device command to verify that Flutter recognizes your connected Android device.

Android Studio - Setup the Android Emulator
To prepare to run and test your Flutter app on the Android emulator, follow these steps:
  • Launch ”Android Studio>Tools>Android>AVD Manager” and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
  • Choose a device definition and select Next.
  • Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
  • Save Your AVD Name in a notepad
  • Verify the AVD configuration is correct, and select Finish.
  • Locate your emulator folder in your android sdk folder (e.g. C:\Users\HP\AppData\Local\Android\sdk\emulator)
  • Copy the path (e.g. C:\Users\HP\AppData\Local\Android\sdk\emulator)
  • Add the path as a User Variable at your User Path just like you did when adding flutter\bin to your Path
  • In the terminal, run emulator –avd {YOUR_AVD_NAME} command to start your visual machine
  • In the terminal, run the flutter device command to verify that Flutter recognizes your avd

Installation Of Flutter And Dart
Flutter is supported by two plugins:
  • The Flutter plugin powers Flutter developer workflows (running, debugging, hot reload, etc.)
  • The Dart plugin offers code analysis (code validation as you type, code completions, etc.)

Android Studio - Installation Of Flutter And Dart
  • Start Android Studio.
  • Open plugin preferences (“Preferences>Plugins” on macOS, ”File>Settings>Plugins” on Windows & Linux).
  • Select Browse repositories, select the Flutter plug-in and click install
  • Click Yes when prompted to install the Dart plugin.
  • Click Restart when prompted

VS Code - Installation Of Flutter And Dart
  • Start VS Code
  • Invoke ”View>Command Palette
  • Type install, and select the ”Extensions: Install Extension” action
  • Enter flutter in the search field, select Flutter in the list, and click Install
  • Enter dart in the search field,select Dart in the list,and click Install if not installed
  • Select ‘OK’ to reload VS Code
Validate your setup with the Flutter Doctor
  • Open Window Command Prompt / IDE Terminal
  • Run flutter doctor
  • Review the OUTPUT for any issue

Creating New Flutter Application

Android Studio - Creating Flutter App
  • Select ”File > New Flutter Project”
  • Select Flutter application as the project type, and press Next
  • Enter a project name (e.g. myapp) and press Next
  • Click Finish
  • Wait for Android Studio to install the SDK, and create the project.
Android Studio - Run The App
  • Locate the main Android Studio toolbar
  • In the target selector, select an Android device for running the app. If none are listed as available, select ”Tools> Android > AVD Manager” and create one or start one there
  • Click the Run icon in the toolbar, or invoke the menu item ”Run > Run”
  • If everything works, you should see your starter app on your device or simulator
VS Code - Creating Flutter App
  • Start VS Code
  • Invoke ”View > Command Palette”
  • Type flutter, and select the Flutter: New Project action
  • Enter a project name (such as myapp) and press Enter
  • Create or select the parent directory for the new project folder
  • Wait for project creation to complete and the main.dart file to appear
VS Code - Run The App
  • Locate the VS Code status bar (the blue bar at the bottom of the window)
  • In the terminal, run emulator –avd {YOUR_AVD_NAME} command to start emulator or plug in your physical device after enabling Developer options and USB debugging on your device
  • Invoke “Debug > Start Debuggingor press F5
  • Wait for the app to launch — progress is printed in the Debug Console view
  • If everything works, after the app has been built, you’ll see the starter app on your device or emulator


Popular posts from this blog

Everything Flutter (Part 4) : Write Your First Flutter App (Part 2)

Everything Flutter (Part 1) : Introducing Flutter

Everything Flutter (Part 3) : Write Your First Flutter App (Part 1)