ePrivacy and GPDR Cookie Consent by CookieConsent.com
menu

Code Editors for Dart | Environment setup for dart



There are two places where you can write your Dart code First is Code Editor and the Second is IDE. So in this article we will first discuss Code Editors and IDEs and their differences and Then we will talk about which one  is best for you

Code Editors

So what are Code Editors? it is simple, A place where code is been written that is called code editor.  Code editors are not much heavy, they are lightweight. Code Editors make you productive and all the works been done on the spot. You can open a file and edit it very fastly with code editors.

IDEs

Wait-wait something Missing there another thing named IDE ( Integrated Development Environment ) which also used for Editing codes. IDEs are powerful, IDE contains more features than a simple code editor  In an IDE you can develop a whole project.  IDEs are a mixture of Code Editor and extra plugins which make IDEs very powerful. Example of best IDEs to work is IntelliJ IDEA, webstorm for more details to work with IDE click here.

Light-weight code editors for Dart

Lightweight code editors are fast elegant and simple but they are not as powerful as IDEs. 
Some of the best Dart code editors are
     

Code editor

              Platform           

      Price       

VS Code  Cross-platform   Free 
 Dartpad Web-based  Free
 Atom  Cross-platform    Free 

* As a beginner I would recommend you start with Dartpad at least until you are not learning Flutter because Dartpad is beginner-friendly, elegant, and simple. But is you want to become a pro coder and explore more features then you should try Dart with Vs code.

Dart environment setup for VS code

vs code ( visual studio code ) is a light-weight IDE for developing awesome software. So first click here to download the Vs code editor and install it on your computer.

After installing Vs code you will get an interface like this
After getting this interface click on the extension Icon where the arrow indicates in the picture below
on clicking the extension icon you will get an interface like
Enter Dart in the Search Box and you will get something like this
on clicking install button a new window will be opened like this
Is dart installed on your VS code? 

Nooo...

This is just a utility tool for syntax highlighting, debugging, hot reloading, and many more features but this extension is not able to run dart code. To run dart code in our pc we have to download Dart SDK from here.

open the URL and scroll down there you will get a "Stable channel" section like this., click on the "API docs" where the arrow indicates.
after clicking on the Dart SDK, a ZIP file will be downloaded.
Extract the ZIP and in the destination path you can your preferred destination it is up to your wish.
I am extraction it into my D drive. After extracting the file in your desired destination we will set an environment variable. Follow me...

first, go to control panel >> System and security >> System >> Advanced system setting
you will get a window like this
Click on Environment Variables... A new window will be opened like this
Click on "Path" then "Path" will highlight and then click on "Edit" 
 
On clicking on "Edit" you will get a window like this
Then go to the folder which you extracted then go to dart-SDK >> bin and copy the path. We are doing this because to set the environment variable we have to add the path of the "bin" folder into Environment variable.
Click on new and enter the path of your bin folder...
then press "OK" and BOOM!!!!!!!!!!!!!!! your environment variable is set.

Test if Dart installed on your PC

TO test the successful installation of dart we have to open command prompt then write "dart" then press "enter" if we get a screen something like this
in means dart installed on your PC.

Write and run your first Dart program in VS code:

Go to VS code and create a new file hello-world.dart (Name is up to you and .dart extension is compulsory) And Write
void main(){
  print("Hello World!");
}
After writing the code Go to terminal into the Vs code and Enter "dart hello-world.dart" and then press "enter". You will get the output "Hello World!"  like below.



*     *     *

Comments

  1. Hello Guys if you found any mistake or you wants to report any bug please comment me

    ReplyDelete

Post a Comment