Flutter Installation: A Perfect Guide

This flutter installation post shows you how to install flutter for different operating systems like Windows, MacOS, Linux. You can also learn create flutter app in Android Studio and Visual Studio Code.

 

Flutter Installation in Windows

Get the Flutter SDK

  1. Download Latest Flutter SDK HERE.
  2. Extract the zip file and place it in the desired installation location for the flutter flutter SDK (for example, C: src flutter Do not install the flutter in a directory as C: Program Files such that advanced privileges are required) .

Update your path

If you want to run the flutter command in a regular Windows console, take these steps to add the flutter to the PATH environment variable:
  • Start from the search bar, enter ‘env’ and choose Edit Environment Variables for your account.
  • If there is an entry named path, check under user variables:
    • If the entry exists, then append the full path to the existing values ​​to use flutter bin as a separator;
    • If the entry does not exist, Path then create a new user variable with the full flutter bin value whose value is.
Note that you must close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From the console window, which contains the flutter directory in the path (see above), run the following command to see if there are any platform dependencies that you need to complete setup:
C:srcflutter>flutter doctor
This command checks your environment and displays a status report of your flutter installation.
 

Flutter Installation in MacOS

Get the Flutter SDK

  1. Download Latest Flutter SDK HERE.
  2. For example, extract the file to the desired location:
    $ cd ~/development
    $ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.8-stable.zip
  3. Add the flutter tool to your path:
    $ export PATH="$PATH:`pwd`/flutter/bin"
    
    This command sets your variable to the current terminal window’s PATH only.
  4. Alternatively, pre-download development binaries:
    $ flutter precache

Run flutter doctor

Run the following command to see if there is a dependency that you need to install to complete the setup (for action output, add the -v flag):
$ flutter doctor
This command checks your environment and displays a report to the terminal window. The Dart SDK is tied with pulsation; It is not necessary to install the dart separately. Carefully check the output for other software you may need to install or perform further tasks (shown in bold text).
For example:
[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

Update your path

The steps to permanently modify this variable for all terminal sessions are machine-specific. Usually you add a line to a file that is executed whenever you open a new window. for example:
  1. Determine the directory where you placed the Flutter SDK. You need it in step 3.
  2. Open (or create) a rc file for your shell. For example, macOS Mojave (and earlier) uses the bash shell by default, so edit $ HOME / .bash_profile or $ HOME / .bashrc. macOS Catalina uses the Z shell by default, so edit $ HOME / .zshrc. If you are using a different shell, the file path and file name will be different on your machine.
  3. Add the following line and [PATH_TO_FLUTTER_GIT_DIRECTORY] change the path where you cloned the flutter’s git repo:
    $ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    
  4. source $ HOME /. <rc file> Run to refresh the current window, or open a new terminal window for the source file automatically.
  5. Verify that the flutter / bin directory is now running in your PATH:
    $ echo $PATH
    
    Verify that the flutter command is available by running:
    $ which flutter
 

Flutter Installation in Linux

Get the Flutter SDK

  1. Download Latest Flutter SDK HERE.
  2. For example, extract the file to the desired location:
    $ cd ~/development
    $ tar xf ~/Downloads/flutter_linux_v1.12.13+hotfix.8-stable.tar.xz
  3. Add the flutter tool to your path:
    $ export PATH="$PATH:`pwd`/flutter/bin" 
    This command sets your variable to the current terminal window’s PATH only. 
  4. Alternatively, pre-download development binaries:
    $ flutter precache

Run flutter doctor

Run the following command to see if there is a dependency that you need to install to complete the setup (for action output, add the -v flag):
$ flutter doctor
This command checks your environment and displays a report to the terminal window. The Dart SDK is tied with pulsation; It is not necessary to install the dart separately. Carefully check the output for other software you may need to install or perform further tasks (shown in bold text).
For example:
[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

Update your path

The steps to permanently modify this variable for all terminal sessions are machine-specific. Usually you add a line to a file that is executed whenever you open a new window. for example:
  1. Determine the directory where you placed the Flutter SDK. You need it in step 3.
  2. Open (or create) a rc file for your shell. For example, Linux uses the bash shell by default, so edit $ HOME / .bashrc. If you are using a different shell, the file path and file name will be different on your machine.
  3. Add the following line and [PATH_TO_FLUTTER_GIT_DIRECTORY] change the path where you cloned the flutter’s git repo:
    $ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    
  4. source $ HOME /. <rc file> Run to refresh the current window, or open a new terminal window for the source file automatically.
  5. Verify that the flutter / bin directory is now running in your PATH:
    $ echo $PATH
    
    Verify that the flutter command is available by running:
    $ which flutter
    

Update path directly

In some cases, your distribution may not get a path permanently when using the above directions. When this happens, you can change the environment variable file directly. These instructions require administrator privileges:
  1. Determine the directory where you placed the Flutter SDK.
  2. Locate the etc directory at the root of the system, and open the file with profile root privileges.
      $ sudo nano /etc/profile
    
  3. Update the path string with the location of your Flutter SDK directory.
    if [ "`id -u`" -eq 0 ]; then
       PATH="..."
    else
       PATH="/usr/local/bin:...:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    fi
    export PATH
    
  4. Terminate the current session or reboot your system.
  5. Once you start a new session, verify that the flutter command is available by running:
    $ which flutter
    
 

iOS Setup

Install Xcode

To develop an app for iOS, you need a Mac with Xcode installed.
    1. Install Xcode 9.0 or newer (via web download or Mac App Store).
    2. Configure the Xcode command-line tool to use the newly-installed version of Xcode by running the following from the command line:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
This is the correct route 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.
  1. Ensure that the Xcode license agreement is signed once by opening Xcode and confirming or running from the sudo xcodebuild -license command line.

Set up the iOS simulator

To get your Flutter app ready to run and test on the iOS simulator, follow these steps:
  1. On your Mac, find the simulator via Spotlight or using the following command:
    $ open -a Simulator
    
  2. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the Hardware> Device menu of the simulator.
  3. Depending on the size of your development machine’s screen, fake iOS devices with high screen density may overflow your screen. Set the device scale under the Window> Scale menu in the simulator.

Deploy to iOS devices

To deploy your Flutter app on a physical iOS device you need a third-party CocoaPods dependency manager and an Apple Developer account. You must also set up physical device deployment in Xcode.

  1. Install and set CocoaPods by running the following command:
    $ sudo gem install cocoapods
    $ pod setup
    
  2. Follow the Xcode signature flow to provision your project:
    1. open ios / Runner.xcworkspace Open the default Xcode workspace in your project by running it in the terminal window from your Flutter project directory.
    2. Select the device you want to deploy in the Device drop-down menu next to the Run button.
    3. Choose Project in the Runner left navigation panel.
    4. In the Runner Goal Setting page, make sure your development team is selected. The UI depends on your version of Xcode.
      • For Xcode 10, look under General> Signature> Team.
      • For Xcode 11 and newer, see Under Signatures and Capabilities> Teams.
      When you select a team, Xcode creates and downloads a development certificate, registers your device with your account, and creates and downloads a provisioning profile (if necessary).
      • To start your first iOS development project, you may need to sign Xcode with your Apple ID. flutter installation Development and testing is supported for any Apple ID. To distribute your app in the Apple Store it is necessary to enroll in the Apple Developer Program.
      • The first time you use an attached physical device for iOS development, you will need to rely on both your Mac and the development certificate on that device. Trust Select the first time in the dialog prompt when connecting an iOS device to your Mac.
        Trust Mac
        Then, go to the Settings app on the iOS device, select General> Device Management and trust your certificate.
      • If the automatic signature fails in Xcode, verify that the project’s General> Identity> Bundle Identifier value is unique. Check the app's Bundle ID
  3. Start your app by running flutter run.
 

Android setup

Install Android Studio

  1. Download and install Android Studio.
  2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. It installs the latest Android SDK, Android SDK command-line tools, and Android SDK build-tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on Android devices, you will need an Android device running on Android 4.1 (API level 16) or higher.
  1. Enable developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
  2. Windows-only: Install Google USB driver.
  3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
  4. In the terminal, run the flutter devices command to verify that the flutter identifies your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the environment variable for that installation directory to ANDROID_HOME.

Set up the Android emulator

To get your Flutter app ready to run and test on Android emulator, follow these steps:
  1. Enable VM Acceleration on your machine.
  2. Launch Android Studio> Tools> Android> AVD Manager and choose Create Virtual Device. (The Android submenu only exists when someone is inside an Android project.)
  3. Choose a device definition and choose Next.
  4. Select one or more system images for the Android versions you want to emulate, and choose Next. An x86 or x86_64 image is recommended.
  5. To enable hardware acceleration under exemplary performance, select Hardware – GLES 2.0.
  6. Verify that the AVD configuration is correct, and select Finish.
  7. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts and displays the default canvas for your selected OS version and device.
 
 

IDE Setup

 

Flutter Installation in Android Studio

Install Android Studio

Android Studio provides the complete, integrated IDE experience for Flutter.
Alternatively, you can also use IntelliJ:

Install the Flutter and Dart plugins

To install these:
  1. Start Android Studio.
  2. Open Plugin Preferences (Preferences> Plugins on macOS, File> Settings> Plugins on Windows and Linux).
  3. Select Marketplace, select the Flutter plugin and click Install.
  4. Click Yes when prompted to install the Dart plugin.
  5. When prompted, click Restart.

Create the app

  1. Open the IDE and choose Start a new Flutter project.
  2. Select the Flutter application as the project type. Then click on Next.
  3. Verify Flutter The SDK path specifies the location of the SDK (select Install SDK … if the text field is blank).
  4. Enter a project name (for example, myapp). Then click on Next.
  5. Click Finish.
  6. Wait for Android Studio to install the SDK and create the project.

Run the app

  1. Locate the main Android Studio toolbar:
    flutter installation
  2. In Target Selector, select an Android device to run the application. If none is listed as available, select Tools> Android> AVD Manager and create one there.
  3. Click the run icon in the toolbar, or click the menu item Run> Run.
 

Flutter Installation in Visual Studio Code

Install VS Code

VS Code Flutter is a lightweight editor with app execution and debug support.

Install the Flutter and Dart plugins

  1. Start VS Code.
  2. Call View > Command Palette ….
  3. Type “install”, and select Extensions: Install Extensions.
  4. Type “Flutter” in the extension search field, select Flutter in the list, and click Install. It also installs the required dart plugin.

Validate your setup with the Flutter Doctor

  1. Call View > Command Palette ….
  2. Type “doctor”, and choose Flutter: Run Flutter Doctor.
  3. Review the output in the OUTPUT pane for any issues.

Create the app

  1. Call View > Command Palette ….
  2. Type “flutter”, and flutter: select the new project.
  3. Like, enter a project name myapp, and press enter.
  4. Create or select the root directory for the new project folder.
  5. Wait for the project to complete and the main.dart file to arrive.

Run the app

  1. Locate the VS code status bar (blue bar at the bottom of the window):
    status bar
  2. Select a device from the device selector area. For details, see Quickly switching between flutter devices.
    • If no device is available and you want to use an instrument simulator, click No tool and launch a simulator.
    • To setup an actual device, follow the device-specific instructions on the install page for your OS.
  3. At the top right next to the DEBUG text box (now marked with a red or orange indicator) press the Settings button —a cog icon gear that reads no configuration. Select Flutter. And choose Debug Configuration: to build your emulator if it is turned off or to run the emulator or device that is now connected.
  4. Start Debug> Start Debugging or press F5.
  5. Wait for application to launch – Progress debug is printed in console view.

 

Leave a Reply