Как установить flutter на windows 10

Flutter is Google’s portable user interface (UI) toolkit. It is used to build and develop eye-catching, natively built mobile, desktop, and web applications from a single codebase. Flutter is free, open-sourced, and compatible with existing code. Due to its user-friendly interface and fairly simple yet to-the-point commands, it is utilized by companies and developers around the world.

In this article, we will look into the process of installing Flutter on Windows.

Installing Flutter on Windows

Follow the below steps to install Flutter on Windows:

Step 1:  Navigate Flutter in Webpage

Navigate to flutter.dev on your webpage. On the top menu bar, select Docs > Get Started > Install > Windows and then choose your first type of app as Android.

Картинка с сайта: www.geeksforgeeks.org

Картинка с сайта: www.geeksforgeeks.org

Картинка с сайта: www.geeksforgeeks.org

Step 2: Check for the System Requirements.

Henceforth, you can begin the installation.

Картинка с сайта: www.geeksforgeeks.org

Картинка с сайта: www.geeksforgeeks.org

You can get a detailed procedure for installing the latest versions of Windows PowerShell 5.0 , Git for Windows, Visual Studio Code, Android Studio, IntelliJ IDEA  if not already installed.

Note: But, It recommended to install Visual Studio Code.

Step 3:  Restart the system after installing Git and Visual Studio Code on your windows.

Once done, let’s get to the installation of Flutter Software development Kit (Flutter SDK). We have two ways to Install the Flutter SDK as shown in the image below. Select Download and install and Click on the “flutter_windows_version-stable.zip” file.

Картинка с сайта: www.geeksforgeeks.org

Flutter SDK is the tool that not only allows us to create flutter projects but also build those projects and transform them into native mobile applications. In simpler words, Flutter SDK is the core tool for building a flutter UI.

Once the zip file is downloaded, extract the ‘flutter’ folder (drag and drop) to any path/directory of the system where you get the read and write access. Typically, it is better to create a new folder in a separate directory apart from the system drive due to permission issues (In my case, the target destination is D: > development > flutter).

Картинка с сайта: www.geeksforgeeks.org

Now double-click on the ‘flutter’ folder. Go to ‘flutter_console.bat’ file and double-click to open a command prompt window.

Картинка с сайта: www.geeksforgeeks.org

Картинка с сайта: www.geeksforgeeks.org

It should look something like this:

Картинка с сайта: www.geeksforgeeks.org

This console is actually a Windows terminal available for the developer to run flutter commands. Type in ‘flutter’ to get a list of all the flutter commands that can be run.

Картинка с сайта: www.geeksforgeeks.org

Whilst it is pretty good to have a terminal to execute flutter commands and create projects, it’d still be better and more convenient to store all our flutter projects somewhere else on our system for easy access. Let us steer over to the next step of our journey!

Step 4: Check and edit environment variables for global system access.

For this, scroll down to ‘Update your path’ on the official Docs page of the flutter installation page. For this, go to Control Panel > System and Security > System > Advanced System Settings > Environment Variables… . A dialog box displaying a list of the available environment variables appears on your screen.

Картинка с сайта: www.geeksforgeeks.org

Environment Variables are global system variables present at the root level, which aids in configuring various aspects of Windows. We will now add the flutter tool as an environment variable for direct access (instead of running the .bat executable), and unlock it on the entire PowerShell and Command Prompt of your system.

To do this, glance through the following steps:

• Check for ‘Path’ variable under User Variables list. If not already present, create a new variable (‘New…’) and assign the ‘flutter\bin‘ directory as its value.
• Now double-click on the ‘Path’ variable and add a new entry by double-clicking on a column below. It should look something like this:

Картинка с сайта: www.geeksforgeeks.org

• In the path, copy the entire directory of flutter\bin folder and paste it. Click ‘Ok’ twice to complete the setup. Now, make sure that you have closed any existing Command Prompt/Windows PowerShell windows that are open.

Now, check whether your flutter framework can be accessed globally. To do this, open any terminal (say Command Prompt) and type in ‘flutter‘ and see whether you get the same list of commands as you did get earlier from the .bat terminal. If yes, you have successfully completed setting up flutter on the root level in your system. If not, you might as well consider re-running the setup again.

Картинка с сайта: www.geeksforgeeks.org

Step 5:  Now, you have to analyze and check whether something is missing/has to be installed further.

To do this, under the Command Prompt terminal, type in ‘Flutter Doctor‘ to check for other requirements.

Картинка с сайта: www.geeksforgeeks.org

(Since a version has already been installed on my computer, below is an image shown from a previous version, to help you get an understanding of the ‘errors’ that appear after flutter doctor analysis.)

Картинка с сайта: www.geeksforgeeks.org

According to the flutter doctor check, we see that flutter was installed successfully in our system, but the Android tools are missing, and so is Android Studio. We also see that there are no connected devices too. Eventually, the next step is about setting up Android tools on your device, to execute the flutter apps built by you.

Step 6:  Setting up Android tools and emulator for android devices.

The first step is to download and install Android Studio. To do this, navigate to the official page of Android Studio and click on ‘Download Android Studio‘.

Картинка с сайта: www.geeksforgeeks.org

After accepting the license agreements, you are good to go! Click on the final Download button to start downloading.

Картинка с сайта: www.geeksforgeeks.org

After the download is complete, let’s move on to the next step, i.e. installation. 

Under ‘Components‘, make sure that both Android Studio and Android Virtual Device are checked, and only then proceed. The Android Virtual Device is an essential tool for running various types and sizes of android emulators to test your flutter project. Henceforth, click on ‘Next‘.

Картинка с сайта: www.geeksforgeeks.org

Select the directory you would want your file to be installed in. It is recommended to select some other path apart from the system drive. Once done, click on ‘Next‘.

Картинка с сайта: www.geeksforgeeks.org

Finally, click on ‘Install‘. Wait for a couple of seconds for the installation to complete. Check the box beside ‘Launch Android Studio‘. Click on ‘Finish‘.

Wait for Android Studio to launch on your computer. On the home screen, click Next > Custom > Next.

Картинка с сайта: www.geeksforgeeks.org

Картинка с сайта: www.geeksforgeeks.org

For the Java Development kit location in the next step, it is recommended to keep the default path it requires, to avoid the hassle. In the next step, choose the UI appearance you’d like for Android Studio. Click ‘Next‘.

This next step is a bit important. Remember to check the required boxes exactly as shown below. If kits have already been installed, you can ignore those and move on. Click ‘Next‘. Set your desired folder for Android SDK.

Картинка с сайта: www.geeksforgeeks.org

With that done, click on ‘Finish‘. Android Studio will now install all the necessary android tools required for the execution of your flutter projects. This may take a significant time – it’s better to wait!

Картинка с сайта: www.geeksforgeeks.org

Now, we are ready to create and build flutter projects on Android Studio and run it on a real or a virtual Android device (emulator).

Step 7: Set SDK as an environment variable, for global access.

Now, open Command Prompt terminal and run ‘flutter doctor’ again. If you have installed Android SDK in the default directory suggested by Android Studio, there wouldn’t be any problem that would appear. Nevertheless, if you have installed it in a non-default directory, flutter would not be able to detect it in your system. To help it able to do that, you guessed it…we would be assigning it as an environment variable, giving global access.

As discussed earlier in Step 4, go to environment variables and click ‘New‘, and do the following (as recommended by flutter doctor). Click ‘OK‘.

Картинка с сайта: www.geeksforgeeks.org

Step 8: Accept required Android Licenses.

On the Command Prompt terminal, type in:

flutter doctor --android-licenses

as suggested by flutter doctor. Hit Enter. To review licenses, type ‘y‘ for Yes. 

You’ll see a couple of repeated prompts that look like this:

Accept? (y/N):

Type ‘y‘ whenever asked for.

Finally, after all the license agreements have been accepted, you should see a message that looks something like this:

All SDK package licenses accepted

Step 9:  Setup Android Emulator.

You have the option to choose between an Android Device or an Android Emulator to build your application on. It depends totally on you.

For setting up Android Device, go through the official docs page and follow the exact steps as mentioned. Download The Google USB Driver by following the link and install according to the instructions given. This can also be installed through Android Studio, which you can later connect to a real Android Device to build the application.

Картинка с сайта: www.geeksforgeeks.org

For setting up Android Emulator, you need to go through the following steps:

• Open Android Studio.
• On the topmost menu bar, click on Tools > SDK Manager.
• Verify whether you have the latest SDK installed. Remember to install the latest stable version too by checking on the box to the left. 
  In my case, it is ‘Android 9.0 (Pie)‘. You can even uncheck the latest version (if not stable), to not only save space but also run all your applications on the stable version itself.
• Under the ‘SDK Tools‘ tab, don’t forget to check Google USB Driver to later connect a real Android Device. With that, click ‘Apply‘. Click ‘OK‘ to start SDK installation.
  This might take a couple of minutes to complete. After the setup is done, click on ‘Finish‘. Your setup is now complete!
• To have a first look at your Android Emulator, open Android Studio. Go to Tools > AVD Manager. A dialog box appears.

Картинка с сайта: www.geeksforgeeks.org

• Click on ‘Create Virtual Device…‘, select a device and its dimensions according to your preference, select a system image and lastly, under all default settings, click on ‘Finish’. Click on the ‘▶’ button to fire up your emulator.

Картинка с сайта: www.geeksforgeeks.org

There you go! You now have a fully functional flutter framework with devices/emulators to build your beautiful apps on. Go crazy!

System requirements

To install and run Flutter,
your development environment must meet these minimum requirements:

• Operating Systems: Windows 7 SP1 or later (64-bit), x86-64 based.
• Disk Space: 1.64 GB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these tools being available in your environment.
  • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)

  • Git for Windows 2.x, with the
    Use Git from the Windows Command Prompt option.

    If Git for Windows is already installed,
    make sure you can run git commands from the
    command prompt or PowerShell.

Get the Flutter SDK

1. Download the following installation bundle to get the latest
   stable release of the Flutter SDK:

   (loading…)

   For other release channels, and older builds, see the
   SDK releases page.

2. Extract the zip file and place the contained flutter
   in the desired installation location for the Flutter SDK
   (for example, C:\Users\<your-user-name>\Documents).

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 Flutter repo on
GitHub, and change branches or tags as needed. For example:

C:\src>git clone https://github.com/flutter/flutter.git -b stable

You are now ready to run Flutter commands in the Flutter Console.

Update your path

If you wish to run Flutter commands in the regular Windows console,
take these steps to add Flutter to the PATH environment variable:

• From the Start search bar, enter ‘env’
  and select Edit environment variables for your account.
• Under User variables check if there is an entry called Path:
  • If the entry exists, append the full path to flutter\bin using
    ; as a separator from existing values.
  • If the entry doesn’t exist,
    create a new user variable named Path with
    the full path to flutter\bin as its value.

You have to close and reopen any existing console windows
for these changes to take effect.

Run flutter doctor

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:

C:\src\flutter>flutter doctor

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 bold text).

For example:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\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.

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 flutter doctor command again to
verify that you’ve set everything up correctly.

Android setup

Install Android Studio

1. Download and install Android Studio.
2. 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.
3. Run flutter doctor to confirm that Flutter has located
   your installation of Android Studio. If Flutter cannot locate it,
   run flutter config --android-studio-dir <directory> to set the
   directory that Android Studio is installed to.

Set up your Android device

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.

1. Enable Developer options and USB debugging on your device.
   Detailed instructions are available in the
   Android documentation.
2. Windows-only: Install the 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
   Flutter recognizes 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 ANDROID_SDK_ROOT environment
   variable to that installation directory.

Set up the Android emulator

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

1. Enable
   VM acceleration
   on your machine.
2. Launch Android Studio, click the AVD Manager
   icon, and select Create Virtual Device…
   • In older versions of Android Studio, you should instead
     launch Android Studio > Tools > Android > AVD Manager and select
     Create Virtual Device…. (The Android submenu is only present
     when inside an Android project.)
   • If you do not have a project open, you can choose
     Configure > AVD Manager and select Create Virtual Device…
3. Choose a device definition and select Next.
4. 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.
5. Under Emulated Performance, select Hardware — GLES 2.0 to enable
   hardware
   acceleration.

6. Verify the AVD configuration is correct, and select Finish.

   For details on the above steps, see Managing
   AVDs.

7. In Android Virtual Device Manager, click Run in the toolbar.
   The emulator starts up and displays the default canvas for your
   selected OS version and device.

Agree to Android Licenses

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.

1. Make sure that you have a version of Java 8 installed and that your
   JAVA_HOME environment variable is set to the JDK’s folder.

   Android Studio versions 2.2 and higher come with a JDK, so this should
   already be done.

2. Open an elevated console window and run the following command to begin
   signing licenses.

   $ flutter doctor --android-licenses
   

3. Review the terms of each license carefully before agreeing to them.
4. Once you are done agreeing with licenses, run flutter doctor again
   to confirm that you are ready to use Flutter.

Windows setup

Additional Windows requirements

For Windows desktop development,
you need the following in addition to the Flutter SDK:

• Visual Studio 2019 (not to be confused with
  Visual Studio Code). For Win32 you need the
  “Desktop development with C++” workload installed,
  including all of its default components. For UWP
  you need the “Universal Windows Platform development”
  workload installed, with the optional UWP C++ tools.

Enable desktop support

At the command line,
perform the following command to enable Win32 desktop support:

$ flutter config --enable-windows-desktop

For Windows UWP desktop support perform the following commands to switch to
the dev channel, upgrade Flutter, and enable UWP.

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-uwp-desktop

For more information, see Desktop support for Flutter

Web setup

Flutter has support for building web applications in the
stable channel. Any app created in Flutter 2 automatically
builds for the web. To add web support to an existing app, follow
the instructions on Building a web application with Flutter
when you’ve completed the setup above.

Next step

Set up your preferred editor.