Crie um aplicativo web com Dart

Esta página descreve os passos para começar a desenvolver aplicações somente web com Dart. Se você quiser escrever uma aplicação multiplataforma, então experimente o Flutter.

Antes de começar, certifique-se de estar à vontade com os fundamentos do Dart lendo a Introdução ao Dart. Depois, siga os passos abaixo para criar uma pequena aplicação web com Dart.

Para desenvolver aplicações Dart, você precisa do Dart SDK. Para continuar com este guia, baixe o Dart SDK ou instale o Flutter, que inclui o Dart SDK completo.

terminal Se você prefere usar a linha de comando, instale o pacote webdev:

$ dart pub global activate webdev

web Embora usar uma IDE seja opcional, recomendamos muito usar uma. Para uma lista de IDEs disponíveis, veja a visão geral de editores e depuradores.

terminal Para criar uma aplicação web pela linha de comando, use o comando dart create com o template web:

$ dart create -t web quickstart

web Para criar a mesma aplicação web a partir de uma IDE com integração com Dart, crie um projeto usando o template chamado Bare-bones Web App.

O template de aplicação web importa o package:web, a solução de interoperabilidade web do Dart, poderosa e concisa, feita para a web moderna. Para saber mais, veja a visão geral de interoperabilidade web.

terminal Para executar a aplicação pela linha de comando, use o webdev para compilar e servir a aplicação:

$ cd quickstart
$ webdev serve

web Ou execute a aplicação a partir da sua IDE.

Para ver sua aplicação, use o navegador Chrome e acesse a URL da aplicação, por exemplo, localhost:8080.

Seja usando uma IDE ou a linha de comando, o webdev serve compila e serve sua aplicação usando o compilador JavaScript de desenvolvimento. A inicialização é mais lenta na primeira vez que o compilador de desenvolvimento compila e serve a aplicação. Depois disso, os assets ficam em cache no disco e as compilações incrementais são bem mais rápidas.

Quando a aplicação terminar de compilar, o navegador deve exibir "Your Dart app is running."

Vamos personalizar a aplicação que você acabou de criar.

1. Copie a função thingsToDo() do snippet a seguir para o arquivo web/main.dart:

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

   content_copy

2. Adicione a função newLI() (como mostrado abaixo). Ela cria um novo LIElement contendo a String especificada.

   dart

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

   content_copy

3. Na função main(), adicione conteúdo ao elemento output usando appendChild e os valores de thingsToDo():

   dart

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

   content_copy

4. Salve suas alterações.

5. A ferramenta webdev reconstrói a aplicação automaticamente. Atualize a janela do navegador. Agora sua aplicação Dart simples tem uma lista de tarefas! Ela deve ficar parecida com isto:
   

6. Opcionalmente, melhore a formatação editando web/styles.css e depois recarregue a aplicação para conferir as alterações.

   css

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

   content_copy

Use o Dart DevTools para definir breakpoints, ver valores e tipos, e percorrer o código Dart da sua aplicação passo a passo. Para detalhes de configuração e um passo a passo, veja Depurando aplicações web Dart.

Para executar sua aplicação web fora do ambiente de desenvolvimento, você precisará compilá-la e fazer o deploy. Para saber mais sobre deploy de aplicações web Dart, veja Deploy na web.

Confira estes recursos:

• Linguagem Dart, bibliotecas e convenções
  • Tour pela linguagem
  • Passeio pela biblioteca principal
  • Effective Dart
• Desenvolvimento web
  • Interoperabilidade com JavaScript
  • Bibliotecas e pacotes web
  • Visão geral do package:web
  • Introduction to the DOM

Se você travar, encontre ajuda em Comunidade e suporte.