How to install Flutter on Windows 11 on VS Code

In this article, we will discuss how to install Flutter on Windows 11 in Visual Studio Code step by step. Flutter is an open-source UI software development toolkit. This toolkit was developed by Google. It allows us to develop cross-platform applications for Android, iOS, etc. With Flutter, we can create high-quality native applications for android and iOS easily without writing two separate codes for two OS(operating systems).

Here we discuss the installation process of Flutter on windows 11. After that, we also create a basic application with it.

Table of Content

• About Flutter
  1. What is Flutter
  2. Features of Flutter
  3. Companies use Flutter
  4. Best IDE for Flutter
• System requirements for installing
• Step-1: Download the SDK file
• Step-2: Set Environment variable path
• Step-3: Run Flutter Doctor
• Step-4: Install extensions in VS Code
• Create a Flutter Application in VS Code.

1. What is Flutter

Flutter is an open-source UI software development toolkit. It was developed by Google. Flutter is designed for developing native mobile applications. With Flutter, we can create Android and iOS applications with a single codebase. Flutter uses the Dart programming language. Today various companies use Flutter for their applications.

3. Companies use Flutter

companies use flutter like BMW, Google Pay, Dream 11, etc.

4. Best IDE for Flutter

There are some IDEs for Flutter and Dart. But most of the developers use Android Studio or VS Code. Here we also discuss installing flutter and how to create an app on VS Code.

Minimum System Requirements to install Flutter on Windows

If you want to install flutter on your system, then you should check the following requirements:

Step-1: Download the SDK File to install Flutter on Windows

First of all, we visit the official website of Flutter.

1. Now scroll down the website till we find Get The Flutter SDK.
2. Click the download button flutter_windows_2.10.3-stable.zip.
3. Now extract this zip file and install the Flutter in your system.

Notes: We don’t recommend installing Flutter in the directories. This requires elevated privileges. Here we can create a folder named ‘flutter’ in our C drive. Then install the Flutter in this folder. For example: c:\flutter\.

Step-2: Edit the Environment Variable for Our Account

This is an important step while installing flutter. If we want to run Flutter commands in the Windows console, then we should add Flutter in the Path environment. Now we should follow these steps.

Step-2.i: Now go to the start search bar, enter ‘env’, and then select the Edit environment path variable for your account.

Step-2.ii Here select the Path and then Edit options under User variables.

Step-2.iii: After that add a new path by clicking the New button.

Step-2.iv: Now go to that folder where flutter is installed. Then go to the bin folder. And copy the entire location. Then paste it into the column.

For example: if my bin location is C:\Flutter\flutter\bin. Now we paste this location like that.

Step-2.v: After that press Ok and closed the console windows. So we add the Flutter environment variable.

Step-3: Run Flutter Doctor

After completing the above steps, Now we open the VS Code. Here we consider that you have installed VS Code and Android Studio. So You can flow these steps. These steps help us to check that all flutter requirements are met. So Flutter provides us with a tool named Flutter Doctor.

Step-3.i: Go to the Start search bar. Then type ‘cmd’ to open Command Prompt.

Step-3.ii: Now here we type flutter --vertion. For this, we can see the flutter version and the dart version. The first time it may take some time. But don’t worry about that.

Step-3.iii: Then we type flutter doctor. Then you find some ✓ icons and some ✖ icons. These ✖ icons indicate that you need to do that setup.

Step-4: Install Extensions in VS Code

Now our setup is all most complete. We just need to install some extensions in VS Code. These extensions are Flutter and Dart.

Step-4.i: Go to VS Code. And go to the extension.

Step-4.ii: Type Flutter and install it. If you install the Flutter extension you’ll notice that the Dart extension is also installed with it.

Dart is an object-oriented, class-based programming language. It is developed by Google. This language is designed for web and mobile app development. When we use Flutter, We actually use this Dart language.

Create a Flutter Applications in VS Code

Now after installing Flutter on your system, Let’s create an app with Flutter.

Step-1: Open VS Code. Then open the command palette. If you can’t find the command palette, then can type Ctrl+Shift+P. Or you can go to view and then open the command palette.

Step-2: Click the FLutter: New Project. After that new menu opens. Here click the Application. Then choose your desired folder, where you want to store the project.

Step-3: Now give a name to the Application. Here you notice a default application code for Flutter. And Run it.

Note: First time when you run the App. It can take a while to load. And the name should be lowercase with underscores to separate words. For example the name of ‘my_project’.

F.A.Q

Now our setup is complete. If you have any doubt then comment us. If you want to learn React Js then CLick Here.