Create & Run your first Google DART program in Intellij IDEA IDE

If you are wondering what is dart ? It’s Google’s latest programming language which can be used for developing web, mobile and server applications. The original name dartlang or now just known as dart is finally hitting the blocks with web applications optimized for the Chrome browser. In the previous tutorial we learnt how to setup Intellij IDEA. In this tutorial we will learn how to write our very first program in DART and how to run it all in the very same IDE.

Intellj IDEA IDE is one of the best available IDE’s in the market, there is a Community edition as well as a Pro edition (pay-to-use). IntelliJ IDEA provides dart programming code completion, error and syntax highlighting and much more.

Create a new Dart project in Intellij IDEA

Head towards your Intellj IDEA install and start the IDE.

idea-IC-181.4892.42/bin$ ./

In the main interface

Click on File > New > Project...
Click Next after selecting the Bare-bones Web App Template option for your new project.

to create a new project. Select Dart on the left side pane and click on Generate sample content (if not already), select a Bare-bones Web App. Click Next to continue.

Enter the project name as you like and the location where you would like to save it.

Click on Finish and the project will be loaded onto your IDE.

Core components of a Dart Web application

Alright so now you should be able to see the project structure as follows. (Note the project name would be the name you gave it initially).

Project view

As show above the pubspec.yaml file contains the project settings which includes the dependencies.

index.html is the main front-end file
main.dart contains the major application code.

Click on the web folder in the Project View to see the contents within it and you will find the above shown files there.

As you may be aware a DART web project has a main function ( similar to C, C++ and Java) which is the first function to execute and contains the code which is injected at runtime into the index.html. This file is also created in the project by default by the IDE.

main.dart : The main core of your program

This is where you write your main code and the place most of your business logic will be located along with branches to other dart programs. Dart programs need to be compiled before they can be run.

You may see some import statements in the code which basically import any external libraries into the program and almost always will have the dart:html dependency which is the dart library.

Tip: Other libraries can be also be imported for e.g dart:async for asynchronous requests and dart:math for mathematical applications.

The main function is the first function to be executed in the program and works similarly to a java program.

The code within the main function may look a bit like JavaScript and you are right it is similar.

querySelector('#output').text = "Your Dart app is running"

You are free to change the above contents to your requirements for the text you would like to show on your first dart web application.

This line just selects an HTML element on the index page in our case the id=”output” which will hold the text ‘Your dart app is running..’. Now lets have a look at index.html

index.html : The presentation layer

Looking at the above file you can see there is a reference to main.dart.js which is used to load the main function and then execute other parts of the code. The rest is just plain old HTML and meta tags which can be changed to your requirements.

This is a regular HTML file which is used as the front-end of your application and is the file which gets loaded on to a browser when the user requests it. You can find the index.html file in the web folder which is the folder served up to web browsers.

The PUB tool : Dependency management of dart applications

PUB is a tool developed by google for dependency management in the dart programming environment.

Pubspec.yaml is the file which contains the dependencies (libraries) and settings that are specific to your project. These dependencies are downloaded and placed as precompiled before running your project.

So in essence the index.html loads the dart js which provides it with the main function code. Alright so in order to see this working lets perform the following steps.

Now in order to run our dart program we will need to create to first grab the dependencies listed in pubspec.yaml.

Right click on the file pubspec.yaml and select the option "PUB: Get dependencies"

In the console window you shall see a flurry of activity with the dependencies getting downloaded and precompiled.

As you can see several libraries are downloaded and precompiled for the program to run.

Dart applications and the Chrome browser

Dart applications can be run in the Chrome browser, for other browsers dart support is still evolving and soon most of them would be able to run the dart code directly.

Earlier Google provided the Dartium browser which could be used to run the dart applications but the requirements were to install the Dartium browser on the client side. This requirement has gone away with Chrome now supporting dart applications natively.

Run the Dart Web application in Chrome

In order to run a dart application Intellj IDEA uses the pub serve command or the now used :

webdev serve

The above command starts a small web server on http://localhost:port which serves the application HTML on Chrome browsers. the port is automatically assigned at runtime or manually assigned.

However, we do not need to run this command as Intellij IDE provides us with run capability right out of the box. So perform the following steps.

Right Click : index.html > Open in browser > Chrome

And that’s it ! Your first dart application should load on the Chrome browser and show you a line of text as below. You can now play around with it by adding new code and learning the basics of the language.

A dart web app running in Chrome browser.

To learn more about dart visit the official page. There are further variations of dart for the web, mobile and server side development listed here.

If you already know a front-end framework like Angular 2+ you can also try the official AngularDart language which is used for programming web applications.

Related posts

Leave a Comment