Build a web app with Dart

This page describes the steps to start developing web-only apps with Dart. If you want to write a multi-platform app, then try Flutter.

Before you begin, ensure you're comfortable with Dart basics by reading the Introduction to Dart. Then follow the steps below to create a small web app with Dart.

To 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

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

$ 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.

terminal To create a web app from the command line, use the dart create command with the web template:

$ 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.

The web app template imports package:web, Dart's powerful and concise web interop solution built for the modern web. To learn more about it, check out the web interop overview.

terminal 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 development JavaScript compiler. Startup is slowest the first time the development compiler 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."

Let's customize the app you just created.

1. Copy the thingsTodo() function from the following snippet to the web/main.dart file:

   dart

   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';
         }
       }
     }
   }

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

   dart

   Iterable<String> thingsTodo() sync* { /* ... */ }
   
   HTMLLIElement newLI(String itemText) =>
     (document.createElement('li') as HTMLLIElement)..text = itemText;
    
   void main() { /* ... */ }

3. In the main() function, append content to the output element using appendChild and the values from thingsTodo():

   dart

   Iterable<String> thingsTodo() sync* { /* ... */ }
   
   HTMLLIElement newLI(String itemText) =>
     (document.createElement('li') as HTMLLIElement)..text = itemText;
   
   void main() {
    final output = querySelector('#output');
    for (final item in thingsTodo()) {
      output?.appendChild(newLI(item));
    }
   }

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.

   css

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

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.

To run your web app outside your development environment, you'll need to build and deploy it. To learn more about deploying Dart web apps, check out Web deployment.

Check out these resources:

• Dart language, libraries, and conventions
  • Language tour
  • Core library walkthrough
  • Effective Dart
• Web development
  • JavaScript interoperability
  • Web libraries and packages
  • package:web overview
  • Introduction to the DOM
• Dart tutorials

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

Unless stated otherwise, the documentation on this site reflects Dart 3.5.3. Page last updated on 2024-06-10. View source or report an issue.