Get started: Web apps

Follow these steps to start using Dart to develop web-only apps. If you want to write a multi-platform app, then try Flutter.

Still here? First you’ll play with Dart in your browser, no download required. Then you’ll install Dart and build a small web app.

1. Play with a web app in 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 todo-list generator. Click Run to run the app; the UI output appears to the right of the code. Try editing the source code—perhaps you’d like to add “horses” to the list of pets.

{$ begin main.dart $}
import 'dart:html';

Iterable<String> thingsTodo() sync* {
  const actions = ['Walk', 'Wash', 'Feed'];
  const pets = ['cats', 'dogs'];

  for (final action in actions) {
    for (final pet in pets) {
      if (pet != 'cats' || action == 'Feed') {
        yield '$action the $pet';
      }
    }
  }
}

void addTodoItem(String item) {
  final listElement = LIElement()..text = item;
  todoList.children.add(listElement);
}

final UListElement todoList = querySelector('#todolist') as UListElement;

void main() {
  thingsTodo().forEach(addTodoItem);
}

{$ end main.dart $}
{$ begin index.html $}
<h2>A Simple To-Do List</h2>

<p>Things to do:</p>

<ul id="todolist">
</ul>
{$ end index.html $}

More information:

• DartPad documentation
• Dart language tour
• Dart library tour
• Tutorial introduction to using Dart for basic web programming

2. Install Dart

Once you’re ready to move beyond DartPad and develop real apps, you need an SDK. You can either download the Dart SDK directly (as described below) or download the Flutter SDK, which includes the full Dart SDK.

• Windows
• Linux
• Mac

  C:\> choco install dart-sdk

  $ brew tap dart-lang/dart
  $ brew install dart

3. Get CLI tools or an IDE (or both)

If you like to use the command line, install webdev:

$ dart pub global activate webdev

web Although using an IDE is optional, we highly recommend using one. For a list of available IDEs, see the overview of editors & debuggers.

4. Create a web app

To create a web app from the command line, use these commands:

$ dart create -t web quickstart

web To create the same web app from an IDE that has Dart integration, create a project using the template named Bare-bones Web App.

5. Run the app

To run the app from the command line, use webdev to build and serve the app:

$ cd quickstart
$ webdev serve

web Or run the app from your IDE.

To view your app, use the Chrome browser to visit the app’s URL—for example, localhost:8080.

Whether you use an IDE or the command line, webdev serve builds and serves your app using the Dart development compiler, dartdevc. Startup is slowest the first time dartdevc builds and serves your app. After that, assets are cached on disk and incremental builds are much faster.

Once your app has compiled, the browser should display “Your Dart app is running.”

6. Add custom code to the app

Let’s customize the app you just created.

1. Copy the thingsTodo() function from the DartPad above to the web/main.dart file.

2. Add the newLI() function (as shown below). It creates a new LIElement containing the specified String.

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() { ... }

3. In the main() function, initialize the output element using thingsTodo():

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() {
     querySelector('#output')?.children.addAll(thingsTodo().map(newLI));
   }

4. Save your changes.

5. The webdev tool automatically rebuilds your app. Refresh the app’s browser window. Now your simple Dart app has a todo list! It should look something like this:
   

6. Optionally, improve the formatting by editing web/styles.css, then reload the app to check your changes.

   #output {
     padding: 20px;
     text-align: left;
   }

7. Use Dart DevTools to inspect the app

Use Dart DevTools to set breakpoints, view values and types, and step through your app’s Dart code. For setup details and a walkthrough, see Debugging Dart Web Apps.

What next?

Check out these resources:

• Tutorials and codelabs for Dart
  • Tutorials
  • Codelabs
• Dart language, libraries, and conventions
  • Language tour
  • Library tour
  • Effective Dart
• Tools & libraries
  • Dart SDK
  • Dart tools
  • IDEs
  • Web libraries and packages

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