115 – do ZERO ao UM em FLUTTER – Experiência de um Profissional Google Primeiro Aplicativo

Playlist: Curso Grátis de FLUTTER e DART Completo

113 – do ZERO ao UM em FLUTTER – Experiência de um Profissional profissional do google no primeiro app

Zero a Um com Flutter
Mikkel Ravn
Mikkel Ravn
Segue
22 de fevereiro de 2017 · 9 min leu
Era final do verão de 2016, e minha primeira tarefa como um novo contratado no escritório do Google em Aarhus, na Dinamarca, foi implementar gráficos animados em um aplicativo para Android / iOS usando Flutter e Dart. Além de ser um “Noogler”, eu era novo no Flutter, novo no Dart, e novo em animações. Na verdade, eu nunca havia feito um aplicativo para dispositivos móveis antes. Meu primeiro smartphone tinha apenas alguns meses de idade – comprei em um ataque de pânico que eu poderia falhar na entrevista por telefone, atendendo a chamada com meu antigo Nokia …
Eu tive alguma experiência anterior com gráficos do desktop Java, mas isso não foi animado. Eu me senti … estranho. Em parte um dinossauro, em parte renascido.

TL; DR Descobrir a força do widget e dos conceitos de interpolação do Flutter escrevendo animações de gráfico no DART para um aplicativo Android / iOS.
Atualizado em 7 de agosto de 2018 para usar a sintaxe do Dart 2. Reit do GitHub adicionado em 17 de outubro de 2018. Cada etapa descrita abaixo é um commit separado.
Movendo-se para uma nova pilha de desenvolvimento, você fica ciente de suas prioridades. Perto do topo da minha lista são estes três:
Conceitos fortes lidam de maneira eficaz com a complexidade, fornecendo maneiras simples e relevantes de estruturar pensamentos, lógica ou dados.
Código claro nos permite expressar esses conceitos de forma limpa, sem se distrair com armadilhas de linguagem, clichê excessivo ou detalhes auxiliares.
A iteração rápida é a chave para a experimentação e o aprendizado – e as equipes de desenvolvimento de software aprendem a ganhar a vida: quais são realmente os requisitos e qual é a melhor maneira de satisfazê-los com conceitos expressos em código.
O Flutter é uma nova plataforma para o desenvolvimento de aplicativos para Android e iOS a partir de uma única base de código, escrita em Dart. Como as nossas exigências falavam de uma UI bastante complexa, incluindo gráficos animados, a ideia de construí-la apenas uma vez parecia muito atraente. Minhas tarefas envolviam o exercício de ferramentas CLI do Flutter, alguns widgets pré-construídos e seu mecanismo de renderização 2D – além de escrever um monte de código Dart simples para modelar e animar gráficos. Compartilharei abaixo alguns destaques conceituais da minha experiência de aprendizado e forneço um ponto de partida para sua própria avaliação da pilha Flutter / Dart.

Um gráfico de barras animado simples, capturado de um simulador iOS durante o desenvolvimento
Esta é uma parte de uma introdução em duas partes ao Flutter e seus conceitos de “widget” e “tween”. Ilustrarei a força desses conceitos usando-os para exibir e animar gráficos como o mostrado acima. Amostras de código completas devem fornecer uma impressão do nível de clareza de código alcançável com o Dart. E incluirei detalhes suficientes para que você possa acompanhar seu próprio laptop (e emulador ou dispositivo) e experimente a duração do ciclo de desenvolvimento Flutter.
O ponto de partida é uma nova instalação do Flutter. Corre
$ flutter doctor
para verificar a configuração:
$ flutter doctor
Resumo médico (para ver todos os detalhes, execute flutter doctor -v):
[✓] Flutter
    (Canal beta, v0.5.1, no Mac OS X 10.13.6 17G65, localidade en-US)
[✓] Android toolchain – desenvolva para dispositivos Android
    (Android SDK 28.0.0)
[✓] toolchain iOS – desenvolva para dispositivos iOS (Xcode 9.4)
[✓] Android Studio (versão 3.1)
[✓] IntelliJ IDEA Community Edition (versão 2018.2.1)
[✓] Dispositivos conectados (1 disponível)
• Nenhum problema encontrado!
Com marcas de verificação suficientes, você pode criar um aplicativo Flutter. Vamos chamá-lo de gráficos:
$ flutter cria gráficos
Isso deve lhe dar um diretório com o mesmo nome:
cartas
  android
  ios
  lib
    main.dart
Cerca de sessenta arquivos foram gerados, formando um aplicativo de amostra completo que pode ser instalado no Android e no iOS. Faremos todo o nosso código em arquivos main.dart e irmãos, sem necessidade urgente de tocar em nenhum outro arquivo ou diretório.
Você deve verificar se pode iniciar o aplicativo de amostra. Inicie um emulador ou conecte um dispositivo e execute
$ flutter run