Um DartPad.dev totalmente novo, com suporte a Flutter

Hoje estamos anunciando uma grande atualização do DartPad.dev, com visual novo e suporte ao popular toolkit de UI Flutter.

Hoje estamos anunciando uma grande atualização do DartPad.dev, com visual novo e suporte ao popular toolkit de UI Flutter. O DartPad é o nosso editor online que executa programas Dart direto no seu navegador, e agora ele também executa aplicativos Flutter.

A interface do DartPad executando um aplicativo Flutter.

Crie algo hoje mesmo

#

Para criar um novo projeto Flutter, clique no botão New Pad e escolha Flutter.

Uma animação mostrando como criar um novo projeto Flutter no DartPad.

Isso adiciona um código inicial ao editor e o executa. Sempre que o DartPad percebe que você está usando package:flutter, aparece um painel para exibir a UI. Você também pode usar o menu Samples para encontrar um exemplo de Flutter.

O menu de exemplos do DartPad exibindo vários exemplos de Dart e Flutter.

Recursos

#

Todas as bibliotecas principais do Flutter, como cupertino e material, estão disponíveis para uso, e o DartPad consegue exibir a documentação delas. Selecione um símbolo para ver a documentação no painel inferior.

Uma animação mostrando a documentação do widget AppBar exibida no painel inferior do DartPad.

O DartPad formata o código usando o formatador do Dart (dartfmt), oferece assists, fornece correções, sugere autocompletar e mostra erros e avisos.

Uma animação do suporte do DartPad a autocompletar e assists de código.

Quando quiser compartilhar seu snippet, você pode criar um gist no GitHub e colocar o ID do gist em uma URL assim: https://dartpad.dev/<GistID>. Você pode compartilhar esse link em um relatório de bug, em uma pergunta no StackOverflow ou na rede social da sua preferência. Confira o guia de compartilhamento para mais detalhes.

Você também pode incorporar o DartPad em uma página, como neste codelab. DartPads incorporados são especialmente bons para artigos, codelabs e tutoriais. (Confira este guia se tiver interesse em usar o DartPad em codelabs e tutoriais.) Para saber mais sobre como adicionar o DartPad a uma página, confira o guia de incorporação.

Obrigado!

#

O DartPad faz parte do projeto open source do Dart. Se você abriu issues ou enviou mudanças para o DartPad, obrigado por torná-lo melhor. Se quiser contribuir, comece em github.com/dart-lang/dart-pad. Para saber mais sobre como executar Flutter na web, visite flutter.dev/web.

Mal podemos esperar para ver o que você vai construir!

Mais do Dart