Dart - Installation and Setup in Visual Studio Code

If you want to start developing with Dart, one of the easiest ways is to install Dart in Visual Studio Code. VS Code offers a lightweight, user-friendly environment that integrates well with Dart programming. In this guide, we’ll walk you through installing Dart in VS Code and configuring the necessary tools for Dart development. With the right setup, you'll be able to write, debug, and run Dart code seamlessly within Visual Studio Code.

Dart SDK

Installation

Follow the below steps to install the Dart SDK:

Step 1: Open the “Get the Dart SDK” website.

Step 2: Scroll down to the bottom of the website and click “Downloading the SDK as a zip file”.

Step 3: Based on your device’s architecture, Click the “Dark SDK” for Windows Mac, or Linux, accordingly.

Step 4: Once the download is complete, go to the “Downloads” folder and unzip the newly downloaded Dart-SDK zip file.

Step 5: For unzipping the file, right-click on the file and click “Extract Here”.

Step 6: Now, a new “dart-sdk” folder will be created in the “Downloads” folder.

Step 7: Copy this file and paste it into the “Program Files” folder in the “C” drive.

Step 8: Open the “dart-sdk” folder and you will find a folder named “bin”.

Step 9: Now, right-click on the “bin” folder and choose “Properties”.

Step 10: In the “bin Properties” window, go to “Security” and copy the “Object Name”, also known as the address of the file, and press “Ok”.

Setup

Step 11: Open the “This PC” folder, right-click inside this folder, and choose “Properties”.  

Step 12: In the “System” window, select “Advanced system settings” that will be available on the left-hand side of the window.  

Step 13: In the “Advanced” tab, press the “Environment Variables…” button.

Step 14: In the “Environment Variables” window, under “User Variables for...” check for the “Path” variable.

Step 15: If it’s available, then press the “Edit” button, press the “New” button in the “Edit environment variable” window, add the copied address to it, and save the made changes.

Step 16: If it’s unavailable, then create one by pressing the “New” button and entering the “Variable Name” as “Path” and “Variable Value” as the copied address, and press “Ok”.  

Step 17: Now open the Command Prompt (cmd) and type "dart".

Step 18: The output will be as follows.

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ The Dart tool uses Google Analytics to anonymously report feature usage    ║
  ║ statistics and to send basic crash reports. This data is used to help      ║
  ║ improve the Dart platform and tools over time.                             ║
  ║                                                                            ║
  ║ To disable reporting of anonymous analytics, run:                          ║
  ║                                                                            ║
  ║   dart --disable-analytics                                                 ║
  ║                                                                            ║
  ╚════════════════════════════════════════════════════════════════════════════╝

A command-line utility for Dart development.

Usage: dart [<vm-flags>] <command|dart-file> [<arguments>]

Global options:
-h, --help                 Print this usage information.
-v, --verbose              Show additional command output.
    --version              Print the Dart SDK version.
    --enable-analytics     Enable anonymous analytics.
    --disable-analytics    Disable anonymous analytics.

Available commands:
  analyze   Analyze the project's Dart code.
  compile   Compile Dart to various formats.
  create    Create a new project.
  fix       Apply automated fixes to Dart source code.
  format    Idiomatically format Dart source code.
  migrate   Perform a null safety migration on a project or package.
  pub       Work with packages.
  run       Run a Dart program.
  test      Run tests in this package.

Run "dart help <command>" for more information about a command.
See https://dart.dev/tools/dart-tool for detailed documentation.

Step 19: If your output is just like above then, it signifies that the dart has been installed successfully.

Visual Studio Code

Installation

Follow the below steps to set up Dart in VS Code:

Step 1: Open Visual Studio Code on your device. 

Note: If unavailable then, open “Download Visual Studio Code” and download
       the application based on your device’s architecture and configurations.

Step 2: Press “Ctrl + B” and select “Extensions” or directly Press “Ctrl + Shift + X”.

Step 3: In the search bar, type “Dart” and open the first extension named “Dart” by “Dart Code” in the list. Press the “Install” button.

Step 4: Once the installation is complete, click “File” and “New File”.

Step 5: Again click “File”, and “Save As” and name the file with a “.dart” extension like “gig. dart”. This file should be saved under a folder, but not as a loose file. So, if needed create a new folder named “Dart” and save this new file under this folder.

Now, let’s code our first Dart program.

void main() {
  print("Welcome to GeeksforGeeks!");
}

Step 6: The above code helps us print the string “Welcome to GeeksforGeeks!”. Type or copy the above code in the coding area.

Step 7: Save the file by pressing “Ctrl + S” or by selecting “File” and “Save”.

Step 8: Now for running the code, press “Ctrl + Shift + D” and press the “Run and Debug” button or open “Run” and select “Start Debugging”.

Step 9: Now a new file named “launch.json” will be created and it opens automatically in VS Code.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Dart & Flutter",
            "request": "launch",
            "type": "dart",
            "program" : "gfg.dart"
        }
    ]
}

Step 10: In the “launch.json” file, add "program value" inside the curly brackets ({}), like for example {“program”: “gfg. Dart”} as shown above, and save the file.

Note: If needed add a “,” (comma), to the previous value of "program" in the code of “launch.json” file.

Step 11: Now, press “Run” and then click "Run without Debugging”. The output of the dart file will be displayed in the "Debug Console".

Welcome to GeeksforGeeks!
Exited

Step 12: Now to run the code in a terminal, press "Terminal" and click "New terminal".

Step 13: Now in the terminal, type “dart file_name” like "dart gig. dart" and press "Enter".

Step 14: The output of the file will be displayed in the terminal.

PS C:\Users\name\Dart> dart gfg.dart
Welcome to GeeksforGeeks!

Output

Conclusion

By following these steps, you’ve completed the Dart setup in VS Code. With the Dart extension for Visual Studio Code, you now have a fully functional environment for Dart programming. Whether you are building mobile apps or backend solutions, Dart development in Visual Studio Code makes your workflow smooth and efficient. Don’t forget to explore additional Dart tools set in Visual Studio Code to further enhance your coding experience.

varshaadhanasekar

Follow

Improve

Article Tags :

• TechTips
• Dart
• how-to-install