Construindo aplicação Web com Flutter
Se você já leu o artigo Flutter: porque você deveria apostar nesta tecnologia, já tem um motivo para começar a aprender flutter, neste artigo abordarei em como você irá iniciar sua carreira com flutter para web.
Configurando o ambiente
Para você iniciar em flutter, o primeiro passo é fazer a instalação do nosso amigão. Flutter está disponível para as três plataformas mais conhecidas Windows, macOS e Linux.
Flutter é muito fácil de instalar, basta você seguir o guia que está disponível aqui.
Recursos necessários:
Recursos necessários VSCode:
Certifique-se de estar com a versão ≥ 3.0.1 da extensão Flutter
Após baixado e instalado, o flutter ainda não está pronto para conseguirmos desenvolver para web com a versão estável, então iremos atualiza-lo para pegar a versão mais recente que inclui os toolkits necessários para desenvolvermos web.
Abra o terminal e digite:
flutter upgradePronto, agora estamos pronto para desenvolvermos tanto mobile quanto web.
Criando o projeto
Abra o Visual Studio Code, em seguida Exibir -> Paleta de Comandos (Cntrl + Shift + P ou Command + Shift + P) e digite:
Flutter: New Web Project
Eu criei o projeto com o nome de “hello_world” mesmo, você pode dar o nome que preferir. Aguarde enquanto o flutter realiza o download de todas as diretivas e packages necessárias para a criação do projeto, esse processo pode demorar por ser a primeira vez.
Após executado o comando, você terá um projeto base e iremos codificar a partir dele. O projeto inicial possui o seguinte esqueleto de arquivos:
Utilize o comando abaixo para ativar o módulo web para flutter
flutter packages pub global activate webdev
Finalmente podemos degustar um pouco do flutter na web, você pode iniciar a aplicação utilizando o F5 ou então com o comando
flutter packages pub global run webdev serve
Abra o arquivo main.dart e apague tudo.
Agora cole o seguinte código no seu arquivo main.dart
Execute o código e o resultado será o seguinte:
Vamos ao To Do
Agora crie um novo arquivo na pasta lib com o nome de todo.dart
Após altere seu arquivo main.dart para o código abaixo
Vamos agora executar o código, pressione F5 para vermos o resultado. Se você estiver seguindo o tutorial a risca o resultado é para estar como no video abaixo
Note que nosso icone está com erro e iremos corrigir esse problema agora. No seu vscode, localize a pasta web e crie uma pasta chamada assets
Dentro da pasta assets crie um arquivo chamado FontManifest.json.
Após criado, cole o json abaixo dentro do arquivo e execute novamente o projeto.
É isso ai pessoal, temos uma aplicação feita em flutter web totalmente usavel e de rápida criação. Em breve lançarei alguns tutoriais mais avançados para criar web applications reais para o mercado.
Conclusão do autor
Galera, sinceramente eu já sou muito fã de Flutter e agora com essa evolução do Flutter para Web estou gostando mais ainda.
Depois que você criar as web applications que estão no tutorial irão ter a mesma sensação que eu tive: “MAS QUE ISSO parece que to no android, que loucura cara!”.
Eu ri muito nessa hora, eu estava escrevendo e dei um double click no campo e pá!, o chrome exibe umas opções do android. Por mais que você não pretenda trabalhar com Flutter dá uma olhada, é divertido.
Outra coisa é usar Dart para codar que é uma das linguagens mais maneiras que já aprendi. É muito fácil a criação de listas, iteração, orientação a objetos. Realmente, programar em Dart é pura diversão e não deixa de ser uma linguagem de programação completa.
Não recomendo usar Flutter para produção ainda, espere até sair a versão estável do Flutter contemplando a versão web.
O projeto To Do está disponível no meu github, caso precisem basta acessar por aqui.
Sobre o autor da publicação
Sou Fabiano Santana, tenho 23 anos. Arquiteto de Sistemas com foco em .NET e Analista de Experiência do Usuário, conhecido como o famoso desenvolvedor Full Stack (prefiro chamar de fullydev) e UX Design. Amo de coração criação de UI e como ela aproxima as pessoas.
Seguem meus contatos caso queiram tirar alguma dúvida ou fazer sugestões para melhoria.
