Get Started

Send feedback

Follow these steps to start using Dart to develop web apps.

1. Play with DartPad

With DartPad you can experiment with the Dart language and APIs, no download necessary.

For example, here’s an embedded DartPad that lets you play with the code for a superhero name generator. Click run ( red-run.png ) to run the app. You can also edit the source code—perhaps you’d like to add a “dog” suffix. To get the full DartPad experience, open the example at dartpad.dartlang.org.

More information:

2. Install Dart

Once you’re ready to move beyond DartPad and develop real apps, you need the Dart SDK and Dartium (a special build of Chromium with the Dart VM).

The easiest way to install Dart on Windows is to use the unofficial install wizard.

Screenshot of the Dart Setup Wizard

You can use Aptitude to install the Dart SDK on Linux.

First, perform the following one-time setup:

sudo apt-get update
sudo apt-get install apt-transport-https
sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

Then install the Dart SDK:

sudo apt-get update
sudo apt-get install dart

Finally, download Dartium.

With Homebrew, installing Dart is easy.

brew tap dart-lang/dart
brew install dart --with-content-shell --with-dartium

More information: installing and updating Dart

3. Get WebStorm

Although using an IDE is optional, we highly recommend WebStorm. WebStorm comes with Dart support, making it easy to write correct Dart code and to run it in Dartium or any other browser.

Download and install WebStorm.

More information: Dart tools for the web

4. Create and run a web app

We recommend using Angular for your Dart web apps. Here’s how to use WebStorm to create a web app that uses Angular:

  1. Choose Create New Project from WebStorm’s welcome screen, or File > New > Project… from the menu. A dialog appears.
  2. Choose Dart from the list on the left.
  3. If the Dart SDK path and Dartium path fields don’t have values, enter them.
  4. Edit the Location field to set the app location and name.
  5. Select Generate sample content to show the list of templates.
  6. Choose the Angular Web Application template.
  7. Click Create. WebStorm screenshot

To run the app from WebStorm, right-click the app’s web/index.html file and choose Run ‘index.html’.

Running the app from WebStorm

More information:

5. Add custom code to the app

Let’s customize the app you just created.

  1. Copy the buildNames() function from the DartPad above to the bottom of the lib/app_component.dart file.

  2. Still in lib/app_component.dart, add a heroes field to the AppComponent class:

    class AppComponent {
      List<String> heroes = buildNames().toList();
    }
    
  3. Edit the corresponding template, lib/app_component.html, changing the code to the following:

    <h1>My First AngularDart App</h1>
    
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
    

    This code uses the Angular’s *ngFor syntax to loop through the component’s heroes list. At runtime, Angular creates an <li> element for each item in heroes, replacing {{ hero }} with the current item’s value (a hero’s name).

  4. Run the app. You should see the list of heroes!

    Running the customized app from WebStorm

What next?

Learn more about AngularDart.

Or check out these resources:

If you get stuck, find help at Community and Support.