Starting with Dart

Dart is a language that was developed by Google with the goal to usurp JavaScript as the standard for web development. In this series of article, we will be creating a Dart web app, starting with the typical “Hello World”, to a project that showcases several features of the language.

To get started, download the Dart bundle, which includes everything you’ll need to get up and running. Once you’ve unpacked the file, launch the Dart Editor.

I will be presenting this from the viewpoint of a Mac user, however your experience should be similar.

Creating Your Project

Now that you’ve launched the Dart editor, you will want to create a new project by clicking the “Create an application” button on the Welcome screen, or by going to File -> New Application in the menu if you have closed that tab already. From here, you’ll be presented with a dialog that lets you define some information about your app

I’ve named mine “MyFirstDartApp”, however you can name yours whatever you see fit. For this tutorial, we will want to uncheck the “Generate sample content” checkbox.

This will generate an empty project in your workspace.

Hello World

Now that we have a project, we need to add some folders and files. Right clicking on the project name will open up a context menu that gives you access to this.

The first thing we’ll create is a pubspec.yaml file, which defines the project, its dependencies, and many other things. You will give your app a name, a description, and add some dependencies by clicking the “Add” button in the “Dependencies” section:

browser
js
web_ui

After you’re done, your pubspec details will look something like

If you click on the “Source” tab at the bottom of these details, you will see the code that is generated

name: MyFirstDartApp
description: This my first Dart web application!
dependencies:
  browser: any
  js: any
  web_ui: any

Next, create a new folder called “web” and add an “index.dart” and “index.html” into that folder. Once you’re done, your project will be setup as

The index.html file will be prepopulated with some code to get you jump started, but index.dart will be empty. Let’s fix that by adding some basic code!

import 'dart:html';

void main() {
  query('#text').text = 'Hello World';
}

The import line brings in the functions necessary to select an element in index.html to place our text. In this case, we are specifically targeting the <p id=”text”></p> line from index.html as where we want to write “Hello World”.

The next lines are used as the “entry point” to the Dart application. It will look for a function called “main()” as, essentially, the first place to start executing your code. Inside of our main() function, we have the one line that will announce ourselves to the world. The “query()” function takes a CSS selector to find the target, and assign our string to the “text” property. If you aren’t familiar with CSS selectors, there is a very thorough tutorial at Selectutorial.

The Result

With our project being set up and the files populated, we can now run the application. To do this, click on the Run button in the toolbar, which will open up the packaged version of Chromium, displaying your text in all its glory!