Flutter

Prévia do material em texto

Introdução ao Flutter
O objetivo deste capítulo é fornecer uma compreensão mais profunda do Flutter antes de começar a instalá-lo e usá-lo.
O que é Flutter?
Flutter não é uma linguagem de programação (como JavaScript, por exemplo). É uma estrutura de SDK/UI para dispositivos móveis do Google que permite aos desenvolvedores criar aplicativos nativos para dispositivos Android e iOS. Os desenvolvedores criam código que funciona em ambas as plataformas em uma única base de código.	
O Flutter usa código existente, portanto, está prontamente disponível para desenvolvedores em todo o mundo. É a única estrutura de SDK móvel que suporta estilos reativos sem o uso de uma ponte JavaScript. O SDK é de código aberto e gratuito, permitindo que os desenvolvedores experimentem e criem aplicativos de rastreamento poderosos. Esta é porque existem aplicativos e interfaces baseados em Flutter. O Flutter usa uma única base de código, compila diretamente para o código de braço nativo, aproveita a GPU e usa as APIs e serviços da plataforma.
Os usuários móveis de hoje esperam designs lindos, animações suaves e desempenho rápido de seus aplicativos. Como resultado, espera-se que os desenvolvedores atinjam essas metas sem sacrificar a qualidade ou o desempenho. Eles recorrem ao Flutter pelas seguintes razões.
Produtividade
Flutter foi criado visando acelerar o desenvolvimento de aplicativos. É substancialmente mais rápido do que outros métodos de desenvolvimento e não requer uma ponte com Javascript. Você pode fazer alterações em seu código e, em seguida, recarregar a quente (hot-reload) para ver suas alterações em ação imediatamente. O Flutter vem com todos os widgets de interface do usuário e é compatível com a maioria dos IDEs.
Economiza tempo
Você pode utilizar a mesma base de código para seus aplicativos iOS e Android, porque o Flutter é multiplataforma. Isso, sem dúvida, economiza tempo e dinheiro.
Qualidade 
Flutter vem com uma ampla variedade de widgets que podem ser personalizados para Android, iOS e Material Design. O trabalho do Flutter com o Material Design do Google resultou em uma forte experiência de interface do usuário que é simples de construir. Isso ajuda na criação de uma experiência de aplicativo suave, nítida e refinada, semelhante à de um aplicativo nativo.
Os widgets de interface do usuário do Flutter que acompanham o projeto funcionam de maneira fluida e normalmente com a plataforma de destino. A rolagem, navegação, ícones e tipos de letra do sistema de destino são todos compatíveis. Quando você usa o Flutter Widgets para criar um aplicativo Android, ele parece ser um aplicativo Android padrão. Quando você usa o Flutter Widgets para criar um aplicativo iOS, ele parece ser um aplicativo iOS padrão. Veja a figura abaixo para a demonstração:
Desempenho 
O Flutter foi criado com uma alta taxa de desenvolvimento em mente.O Hot-reload com estado permite que você faça alterações em seu código e veja-o ganhar vida em menos de um segundo sem perder o estado do aplicativo. Flutter também vem com um grande número de widgets que podem ser personalizados, todos eles projetados usando o Modem Reactive Framework. O Flutter promete entregar 60 quadros por segundo (fps) em dispositivos com atualizações de 120Hz ou 120 fps em dispositivos com atualização de 120Hz. Os quadros devem renderizar a cada 16 milissegundos a 60 quadros por segundo. O código Flutter é executado nativamente, o que significa que sua velocidade é impressionante.
Gratuito e Aberto
Flutter e Dart são de código aberto e de uso gratuito, e vêm com documentação substancial e assistência da comunidade para ajudá-lo com quaisquer problemas que você possa encontrar. Os aplicativos Flutter seguem as convenções da plataforma e os detalhes da interface, como rolagem, navegação, ícones, fontes e muito mais. É por isso que os aplicativos criados com o recurso Flutter na Apple AppStore e na Google Play Store.
Fuchsia
O próximo sistema operacional móvel do Google é chamado Fuchsia. O Google está desenvolvendo todos os aplicativos para Fuchsia em Flutter. Com seu desenvolvimento de base de código única e funcionalidade de recarga a quente para plataformas Android e iOS, o Flutter é conhecido por economizar dinheiro. Se os desenvolvedores conseguirem combinar a força dupla do Flutter e do Fuchsia no futuro, poderão lançar aplicativos em qualquer plataforma, incluindo casas inteligentes, com esforço mínimo e em tempo recorde.
Estrutura Flutter
No que diz respeito à estrutura, os principais componentes do Flutter incluem:
· Plataforma Dart
· Flutter engine
· Biblioteca
· Widgets específicos de design
· Ferramentas de desenvolvimento Flutter (DevTools)
Plataforma Dart
Os aplicativos Flutter são escritos em Dart e fazem uso extensivo dos recursos avançados da linguagem. O Flutter é executado na máquina virtual Dart no Windows, macOS e Linux, que possui um mecanismo de execução just-in-time.
O Flutter aproveita a compilação just-in-time (JIT) ao criar e depurar aplicativos. Isso oferece aos desenvolvedores a oportunidade de “recarregar a quente”, permitindo que as alterações nos arquivos de origem sejam injetadas em um aplicativo ativo. O Flutter adiciona suporte para recarga dinâmica com estado, o que significa que as alterações no código-fonte são refletidas no aplicativo em execução sem exigir uma reinicialização ou perda de estado na maioria das circunstâncias. As versões de lançamento dos aplicativos Flutter para Android e iOS são compiladas com compilação antecipada (AOT) para maior eficiência.
Flutter Engine
O mecanismo do Flutter, que é construído principalmente em C++, usa o pacote gráfico Skia do Google para renderização de baixo nível. Está disponível no GitHub em github. com/flutter/ engine e inclui funcionalidade de renderização gráfica, bem como uma interface (através das bibliotecas principais do Flutter). O mecanismo também funciona com SDKs específicos da plataforma, como os oferecidos pelo Android e iOS.
O Flutter Engine é um runtime portátil que pode ser usado para hospedar aplicativos Flutter. Inclui animação e gráficos, E/S de arquivo e rede, suporte de acessibilidade, arquitetura de plug-in e uma cadeia de ferramentas de tempo de execução e compilação do Dart, entre outras coisas. A maioria dos desenvolvedores interage com o Flutter por meio do Flutter Framework, que fornece uma estrutura reativa e um conjunto de widgets de plataforma, layout e base. 
Biblioteca básica
As classes e funções utilitárias de nível mais baixo utilizadas por todos os outros níveis da estrutura Flutter são especificadas nesta biblioteca. A biblioteca Foundation, escrita em Dart, fornece classes e funções básicas que são usadas para construir aplicativos usando Flutter, como APIs para se comunicar com o mecanismo. 
Design-Specific Widgets
O framework Flutter tem dois conjuntos de widgets que aderem a diferentes estilos de design: Widgets Material Design, que usam a linguagem de design Material Design do Google, e widgets Cupertino, que empregam os princípios de interface humana iOS da Apple. A seguir exemplos de widgets Flutter disponíveis:
· AlertDialog: Alertas são breves interrupções que precisam de confirmação e informam o usuário sobre um problema. Este componente é implementado pelo widget AlertDialog.
· BottomNavigationBar: Usando as barras de navegação inferiores, você pode explorar e mover-se rapidamente entre as visualizações de nível superior. Este componente é implementado pelo widget BottomNavigationBar.
· Checkboxes:As caixas de seleção permitem que o usuário escolha entre uma coleção de muitas possibilidades. Este componente é implementado pelo widget Checkbox.
· Drawer: Um painel Design que desliza da borda do Scaffold para exibir links de navegação em um aplicativo.
· Expanded: Este é um widget que expande um filho de Linha, Coluna ou Flex.
· Form: Um contêiner que pode ser usado para combinar vários widgets de campo de formulário (por exemplo, widgets TextField).
· Gridview Widget: Uma lista de grade é composta por um padrão repetitivo de célulasdispostas vertical e horizontalmente. Este componente é implementado pelo widget GridView.
· IconButton: Um botão de ícone é uma imagem impressa em um widget de Material sendo preenchida com cor quando é tocada (tinta).
· Image widget: um widget que exibe uma imagem é conhecido como widget de imagem.
· ListBody: Um widget que organiza seus filhos em uma ordem específica ao longo de um eixo, forçando-os à mesma dimensão que o pai no eixo oposto.
· MaterialApp: Este é um widget de conveniência que encapsula uma variedade de widgets que são normalmente utilizados em aplicativos de Material Design. 
Para saber mais sobre os widgets Flutter, devemos nos guiar pela documentação oficial flutter.dev/docs/reference/widgets .
Instalando o Flutter 2.2
O Flutter 2.2 é baseado no Flutter 2, que expandiu os recursos do Flutter além dos dispositivos móveis para incluir aplicativos da Web, desktop e incorporados.
Ele é feito para um mundo de computação ambiente, onde os usuários têm uma ampla variedade de dispositivos e fatores de forma e desejam uma experiência consistente em todos eles. Com o Flutter 2.2, empresas, empresas de tecnologia e inovadores podem criar alternativas de alta qualidade que atinjam todo o potencial de seu mercado-alvo, com o único fator limitante sendo a inspiração criativa (em vez da plataforma-alvo).
Desenvolvendo em um PC para iOS 
Os aplicativos Flutter podem ser desenvolvidos em um PC sem problemas até você querer executar seu código em um dispositivo Apple iOS, como um iPhone ou iPad. A ferramenta XCode da Apple é a única maneira confiável de compilar aplicativos iOS no macOS. A boa notícia é que o Flutter é extremamente amigável para várias plataformas e você pode concluir 90% do desenvolvimento em um PC, mesmo que planeje implantar no iOS. Você pode realmente desenvolver em uma plataforma, executá-la em outra e confiar que funcionará quase perfeitamente em ambas.
Você terá a opção de comprar, pedir emprestado ou alugar um Mac quando se trata de testes e implantação. Tudo o que você precisa fazer agora é usar software como VMWare ou Virtual Box para criar uma máquina virtual Mac em seu PC. Você também pode usar um serviço como o macincloud.com para alugar um Mac na nuvem por cerca de US$ 20 por mês.
Instalando o Flutter 2.2
Não passarei por todos os detalhes da instalação do Flutter, porque há muitos lugares ótimos para aprender sobre isso. Só o YouTube tem inúmeros vídeos sobre o assunto, e você pode acessar todas as informações que precisa sobre o flutter no site oficial.
A instalação não é um procedimento particularmente difícil. Falarei sobre o básico, o mesmo em todos os ambientes.
Pré-requisitos
Seu ambiente de desenvolvimento deve atender aos seguintes requisitos básicos para instalar e executar o Flutter:
Sistemas operacionais: baseado em x86-64, Windows 7 SP1 ou posterior (64 bits). Espaço em disco: 1,64 GB (não inclui espaço em disco IDE/ferramentas). O Flutter também conta com a presença do Windows PowerShell 5.0, mas a boa notícia é que ele vem pré-instalado com o Windows 10.
Outras ferramentas de linha de comando necessárias que você precisará incluem:
· Bash
· Curl
· Mkdir
· Rm
· Git
Flutter instala e atualiza usando Git. Portanto, antes de fazer qualquer outra coisa, verifique se o Git está instalado. No Git para Windows 2.x, você pode usar o Git por meio da opção do prompt de comando do Windows. Certifique-se de poder executar o comando git diretamente do prompt de comando (ou PowerShell se você tiver a versão Windows do Git instalada). A instalação do Xcode, que inclui o Git, é recomendada; no entanto, o Git também pode ser instalado sozinho. 
Brew
No MacOS, a abordagem oficial para instalar o Flutter e suas dependências é uma mistura de brew install, downloads binários e dependência de versões ruby ​​instaladas pelo sistema. Se você estiver instalando o Flutter em um Mac, primeiro precisará instalar o Brew, pois o Flutter Doctor solicitará que você use o Brew para instalar software adicional conforme necessário.
Ferramentas de linha de comando do XCode
Se você planeja instalar aplicativos Flutter para iOS ou em um Mac, precisará instalar a versão estável mais recente do Xcode (da web em developer.apple.com/xcode ou da Apple AppStore ). Execute isso na linha de comando para configurar as ferramentas de linha de comando do Xcode para usar a versão recém-instalada do Xcode:
	$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
Quando você quiser para usar a versão mais recente do Xcode, essa é a melhor abordagem. Abra o Xcode uma vez e confirme ou execute sudo xcodebuild -license na linha de comando para garantir que o contrato de licença do Xcode seja assinado. 
Se você precisar usar uma versão diferente, especifique esse caminho. Não há suporte e é improvável que funcione para direcionar bitcode com versões mais antigas do Xcode. Os aplicativos Flutter podem ser executados em um dispositivo iOS ou no simulador usando o Xcode.
Baixar o SDK do Flutter
O SDK do Flutter inclui todas as ferramentas necessárias para começar a programar o Flutter. Além do Flutter Doctor, uma ferramenta muito útil para configurar seu ambiente de desenvolvimento Flutter, ele também abriga outros comandos do Flutter SDK como:
· Flutter help: Contém um conjunto de comandos flutter.
· flutter analyze: examina o código Dart no projeto.
· Flutter Attach: Anexe a um aplicativo em execução com o Flutter.
· Flutter bash-completion: scripts de configuração para conclusão do shell de linha de comando.
· Flutter build: Cria comandos para Flutter
· Canais Flutter: Lista ou alterna os canais
· Flutter Flutter clean: Exclui os diretórios build/ e.dart tool/.
· Flutter create: Cria um novo projeto de flutter.
· Emuladores Flutter: Gera, executa e lista emuladores.
Extraia o arquivo para um local conveniente, como:
	$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip
2. Configure seu PATH
O Flutter SDK inclui utilitários de linha de comando, como o Flutter Doctor, e estes devem ser executados a partir da linha de comando. O subdiretório bin do Flutter SDK contém várias ferramentas de linha de comando. Para executar as ferramentas de linha de comando a partir da linha de comando, você deve incluir a pasta 'bin' (dentro do flutter SDK) no caminho do seu computador. Em seguida, adicione a ferramenta Flutter ao seu caminho conforme demonstrado abaixo:
	$ export PATH="$PATH:`pwd`/flutter/bin"
Este comando define sua variável PATH apenas para a janela do terminal atual. Conforme necessário, a ferramenta flutter também baixa binários de desenvolvimento específicos da plataforma. Os binários iOS e Android podem ser baixados antecipadamente nos casos em que o download prévio desses artefatos é preferido (por exemplo, em ambientes de compilação herméticos ou com acesso intermitente à rede).
	$ flutter precache
Identifique o local onde você colocou o Flutter SDK.
Abra (ou crie) o arquivo rc do seu shell. Por exemplo, o macOS Mojave (e anterior) usa o shell Bash por padrão, então edite $HOME/.bash_profile ou $HOME/.bashrc . O macOS Catalina usa o shell Z por padrão, então edite $HOME/.zshrc . No seu PC, o caminho e o nome do arquivo serão diferentes se você usar um shell diferente.
Inclua a seguinte linha e altere [ PATH_TO_FLUTTER_GIT_DIRECTORY ] para ser o caminho onde você clonou o repositório git do Flutter:
	$ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
Para atualizar a janela atual, execute o arquivo fonte $HOME/.rc > ou abra uma nova janela de terminal para obter o arquivo automaticamente.
Execute o seguinte comando para ver se o diretório flutter/bin está agora em seu PATH :
	$ echo $PATH
3. Execute o Flutter Doctor
Este comando examina o ambiente, diagnostica (como um médico faria) o que é positivo e negativo sobre o desenvolvimento do Flutter e exibe um relatório na janela do seu terminal. Ele também fornecerá um resumo e instruções sobre o que você precisa fazer para melhorar. Paraver se você precisa instalar alguma dependência para concluir a configuração, execute o seguinte comando (com o sinalizador -v para obter uma saída mais detalhada):
	$ flutter doctor
O SDK do Dart vem com o Flutter, portanto, você não precisará instalá-lo separadamente. Verifique os resultados de quaisquer aplicativos adicionais que você precise instalar ou tarefas que você precise concluir (mostrados em negrito). Considere o seguinte exemplo:
· [-] Android toolchain - desenvolver para dispositivos Android
· • Android SDK em /Users/obiwan/Library/Android/sdk
· ✗ O Android SDK não possui ferramentas de linha de comando; baixe em https://goo.gl/XxQghQ
· • Tente reinstalar ou atualizar seu Android SDK, visite https://flutter.dev/setup/#android-setup para obter instruções detalhadas.
Execute o comando flutter doctor novamente após instalar as dependências ausentes para certificar-se de que configurou tudo corretamente.
Instale o Editor
Após terminar com o Flutter Doctor, você precisará configurar seu editor. Flutter permite que você crie aplicativos com qualquer editor de texto e sua linha de comando, mas para uma experiência mais perfeita, um dos plugins do editor Flutter é recomendado. Conclusão de código, realce de sintaxe, assistência de edição de widget, suporte a execução e depuração e muito mais estão disponíveis com esses plugins.
As dependências da plataforma Android do Flutter são fornecidas por meio de uma instalação completa do Android Studio. Quando você passar pelo Flutter Doctor, você já deve ter o editor do Android Studio instalado. Isso não o impede de usar outro editor; você pode continuar usando o Visual Studio Code para a maior parte do seu trabalho enquanto deixa o Android Studio aberto.
Android Studio
Android Studio é o IDE oficial para desenvolvimento de aplicativos Android, oferecendo uma solução completa e bem suportada (pelo Google). O Android Studio é um programa gratuito construído no IntelliJ IDEA (e, portanto, bastante semelhante ao IntelliJ em operação). É um editor fantástico que funciona muito bem para projetar aplicativos Flutter iOS. Instalar os plug-ins do Flutter no Android Studio é o método mais simples para começar a usar um editor.
Para instalar o Android Studio, siga estas etapas fáceis:
Baixe e instale o Android Studio do desenvolvedor. andróide. com/ estúdio .
Inicie o Android Studio e siga as instruções do 'Assistente de configuração do Android Studio'. O Android SDK, o Android SDK Platform-Tools e o Android SDK Build-Tools mais recentes serão instalados automaticamente e são exigidos pelo Flutter ao trabalhar para Android.
Configurando seu dispositivo Android
Você precisará de um dispositivo Android executando o Android 4.1 (API de nível 16) ou superior para executar e testar seu aplicativo Flutter.
No seu dispositivo, ative as configurações do desenvolvedor e a depuração USB. Apenas para Windows: Instale o driver USB do Google.
Conecte seu telefone ao computador com um cabo USB. Permita que seu computador acesse seu dispositivo, se solicitado. Execute o comando flutter devices no terminal para ver se o Flutter reconhece seu dispositivo Android conectado.
Configurando o emulador do Android
Siga estas etapas para preparar seu aplicativo Flutter para iniciar e testar no emulador do Android. Em sua máquina, habilite a aceleração de VM.
Selecione Criar dispositivo virtual no Android Studio → Ferramentas → Android → AVD Manager . (O submenu Android aparece apenas quando você está trabalhando em um projeto Android.)
Selecione Avançar após selecionar uma definição de dispositivo.
Selecione Avançar após selecionar uma ou mais imagens do sistema para as versões do Android que você deseja imitar. É melhor usar uma imagem x86 ou x86 64.
Para ativar a aceleração de hardware, vá para Desempenho Emulado e selecione Hardware → GLES 2.0 . Selecione Concluir após verificar novamente a configuração do AVD.
Na barra de ferramentas do Android Virtual Device Manager, selecione Executar . Quando o emulador for inicializado, ele exibirá a tela padrão para a versão do sistema operacional e o dispositivo que você escolheu.
Instalando os plug-ins Flutter e Dart
Para começar, abra o Android Studio.
1. Abra as Preferências de Plugin (no macOS, Preferências → Plugins , no Windows, Arquivo → Configurações → Plugins ).
2. Selecione Marketplace e Flutter no menu suspenso.
3. Quando solicitado a instalar o plug-in Dart, selecione Sim .
4. Quando solicitado, selecione Reiniciar.
Se você já usa o Intellij, pode simplesmente instalar o plugin Flutter da mesma forma, como no Android Studio (veja acima).
Flutter Outline
O Flutter Outline é um dos melhores recursos do Android Studio. Quando você edita um arquivo, ele exibe os Widgets definidos nesse arquivo, juntamente com suas variáveis, código e estrutura. Ele também permite que você adicione Centralização, Preenchimento, Linhas, Colunas e outros recursos a Widgets em seus métodos de 'construção'.
Visual Studio Code
O Visual Studio Code é uma excelente alternativa ao Android Studio e é um pouco mais leve (executa mais rápido, usa menos memória). É um editor fantástico que é rápido e gratuito de usar. Se o Visual Studio Code for seu editor preferido, siga estas etapas para instalar os plug-ins Flutter e Dart.
1. Inicie o Visual Studio Code.
2. Selecione Exibir → Paleta de comandos no menu.
3. Selecione Extensões: instale depois de digitar “instalar”. As extensões devem ser instaladas.
4. Na janela de pesquisa de extensões, digite “flutter”, escolha Flutter na lista e clique em Instalar . Isso também instala o plug-in Dart, que é essencial.
Mac Platform Setup 
Os aplicativos Flutter para iOS, Android e a Web são suportados no macOS (versão de visualização técnica). Para criar e executar seu primeiro aplicativo Flutter, conclua os processos de configuração da plataforma nas etapas abaixo.
Configurar um simulador iOS
Localize o simulador no seu Mac usando o Spotlight ou o seguinte comando:
	$ open -a Simulator
Verifique as configurações no menu Hardware → Dispositivo do simulador para certificar-se de que seu simulador está sendo executado em um dispositivo de 64 bits (iPhone 5s ou mais tarde).
Dispositivos iOS de alta densidade de tela simulados podem estourar sua tela dependendo do tamanho da tela de sua máquina de desenvolvimento. No simulador, vá para Janela → Escala e ajuste a escala do dispositivo. Isso é tudo o que existe para instalar o Flutter em um Mac usando o Xcode.
Ativar o suporte à área de trabalho
Para ativar o suporte à área de trabalho do Win32, digite o seguinte no prompt de comando:
	$ flutter config --enable-windows-desktop
Para habilitar o suporte à área de trabalho do Windows UWP, vá para o canal dev, atualize o Flutter e habilite o UWP com os comandos abaixo .
Finalmente, use o Flutter Doctor para validar sua configuração através destes últimos passos:
1. Selecione Exibir → Paleta de Comandos na barra de menu.
2. Digite “doctor” e selecione Flutter: Run Flutter Doctor .
Na janela SAÍDA, revise cuidadosamente para quaisquer problemas. Certifique-se de que Flutter esteja selecionado nos menus suspensos nas várias opções de saída.