Dart – Installation and Setup in Visual Studio Code
Dart is a client-optimized programming language that supports various areas like multi-platform application development, formatting, analyzing, and testing code. It is a programming language that forms the basic foundation of Flutter.
Flutter is an open-source UI – Software development kit that helps develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web in a single code base.
Visual Studio Code is a code editor developed by Microsoft for Windows, Mac, and Linux with features like code debugging, syntax highlighting, code completion, code refactoring, etc.
Dart SDK
Installation:
Follow the below steps to install the dart SDK:
Step 1: Open “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 or 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 in the “Program Files” folder in the “C” drive.
Step 8: Open “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 “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 “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.
Dart
╔════════════════════════════════════════════════════════════════════════════╗ ║ 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 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 in 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”, “Save As” and name the file with a “.dart” extension like “gfg.dart”. This file should be saved under a folder, but not as a loose file. So, if needed to create a new folder named “Dart” and save this new file under this folder.
Now, let’s code our first Dart program.
Dart
void main() { print( "Welcome to w3wiki!" ); } |
Step 6: The above code helps us print the string “Welcome to w3wiki!”. 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 “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.
Dart
{ // 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 “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”.
Dart
Welcome to w3wiki! Exited |
Step 12: Now for running the code in a terminal, press “Terminal” and click “New terminal”.
Step 13: Now in the terminal, type “dart file_name” like “dart gfg.dart” and press “Enter”.
Step 14: The output of the file will get displayed in the terminal.
Dart
PS C:\Users\name\Dart> dart gfg.dart Welcome to w3wiki! |
Output:
Contact Us