Criação de Aplicativos

Imersão no Universo de Aplicativos

João Victor N. M. Soares

Aula 2:
FLUTTER - A sua fábrica de aplicativos
▪ Material Complementar
 Instalação do Flutter (passo-a-passo)

● Git (versão 2.30.0)

● Flutter SDK (versão 1.25.0-8.3.pre - beta)
● Android Studio (versão 4.1.0)
● Emulador Android
● Visual Studio Code (versão 1.52.1)
Instalando Git
• Acessar http://git-scm.com/download/
• Clicar em “Windows” para efetuar o
download, que iniciará automaticamente
• Quando o download finalizar, execute o
arquivo baixado para realizar a instalação
• A instalação do Git será no melhor estilo
“Next-Next-Finish”...
• Então basicamente iremos clicando em
“Next” a cada etapa, até a última onde
escolheremos “Finish”.
Instalando Flutter SDK
• Acessar flutter.dev
• Clicar em “Get Started”, em
seguida em “Windows”
• Localizar rolando a tela o botão
“flutter_windows_1.22.6-stable.zi
p” e clicar no mesmo para
realizar o download. OBS: é
possível que o número da versão
varie e seja alguma mais
recente.
• Vale observar a recomendação
apontada no site do Flutter. Ela informa
para que o mesmo não seja instalado na
pasta “Program Files” (no caso, “Arquivo
de Programas”).
• Abra o arquivo zip baixado, e clique em
“Extrair tudo”
• Descompactar o arquivo zip na pasta
C:\src\ conforme recomendação do site,
e exatamente como demonstrado.
• Após descompactado, ao verificar a
pasta C:\src, você deverá encontrar uma
pasta Flutter dentro dela.
Variáveis de Ambiente
• Tanto Git, quanto Flutter SDK necessitam que seus
caminhos sejam adicionados na variável de ambiente
Path para funcionarem adequadamente
• Para isso, clique no menu iniciar do Windows e digite
“var”, ou clique na barra de busca e digite “var”
• Clique na opção “Editar as variáveis de ambiente de
sistema”
• Na tela que será aberta, clique no botão “Variáveis de
Ambiente”
• Selecione “Path” e clique no botão “Editar”
• Clique em “Novo” e informe “C:\Program Files\Git” na
linha que foi criada
• Clique em “Novo” mais uma vez e informe
“C:\src\flutter” na linha que foi criada
Instalando Android Studio
• Acessar developer.android.com/studio
• Faça o download do Android Studio
• É necessário aceitar os termos para
realizar o download.
• Ao terminar o download, executar o
arquivo de instalação baixado
• A instalação é bem simples
• No mesmo padrão do Git, iremos
clicando em “Next” até a tela de
conclusão, onde clicaremos em “Finish”
• Ao clicar em “Finish” na última tela, e
mantendo “Start Android Studio”
marcado, a aplicação será iniciada pela
primeira vez
• Na primeira execução do Android
Studio, será perguntado se você deseja
importar configurações de algum lugar.
No caso, não iremos importar
configurações e selecionaremos “Do not
import settings”, e “Next”.
• Será exibida uma tela de verificação
onde você poderá conferir os
componentes que serão baixados.
• Após a tela de Verify Settings (tendo
clicado em “Finish”), serão realizados os
downloads destes componentes
• É possível que demore um pouco,
dependendo de sua conexão com
internet
• Também é possível acompanhar o
processo clicando em “Show Details”
• Tela inicial, após instalação
• Agora, instalação do Android SDK,
clique em SDK Manager
• Marcaremos o SDK do Android 11 (R),
API Level 30, lembrando que a versão
de Flutter que estamos utilizando
necessita que seja ao menos 29.
• Clique em OK.
• Será realizado download dos pacotes
necessários. Pode demorar um pouco
dependendo de sua internet.
• Após clicar em OK na tela anterior,
retornará para o menu anterior.
• Agora, faremos a instalação dos plugins
do Flutter e do DART
• Na tela de plugins, digitar “flutter”
• Selecionar o item “Flutter” na lista e
clicar em “Install”
• Após instalado “Flutter” e “Dart” (que foi
pré-requisito, clique em “Restart IDE”
Instalando Emulador Android
• Tela inicial, após instalação do Flutter,
• Agora, instalação do Virtual Device
• Clicar em “Configure” e depois em “ADV
Manager”
• Clicar em “Create Virtual Device...”
• Criaremos de início um aparelho Pixel 2,
que é o padrão
• É possível criar uma gama de diferentes
dispositivos, onde cada um possui sua
própria configuração de hardware.
• Se o dispositivo for muito específico,
também é possível criar um novo profile,
ou importar.
• Agora é necessário selecionar qual versão
de Android será instalada no virtual device
que estamos criando.
• Vale lembrar que a versão do Flutter que
estamos utilizando, tem como pré-requisito
no mínimo Android SDK 29. Ou seja, na
listagem apenas serão compatíveis as
versões Q (API Level 29 – Android 10) e R
(API Level 30 – Android 11).
• Selecionaremos a versão R para download.
Basta clicar no link.
• Será aberta a tela de download, para
acompanharmos o processo.
• Como é um pouco grande (mais de
1GB), pode demorar um pouco
dependendo de sua internet.
• Ao final, clicar em “Finish”
• Após realizar o download e instalação do
Android SDK, será possível seleciona-lo
para uso no virtual device que estamos
criando.
• Selecionaremos a versão R que acabamos
de realizar download.
• Basta mantê-la selecionada, e clicar em
“Next”.
• Neste tela, você pode informar um nome
qualquer para esse Dispositivo Virtual,
realizar algumas configurações
adicionais e conferir o que foi feito.
• No nosso caso, clique em “Finish”
• Agora nosso Dispositivo Virtual com
Android foi criado e pronto para uso.
• Basta clicar no botão “Play”.
• Após o carregamento, que pode
demorar um pouco, será exibida a tela
do emulador
• É possível manuseá-lo normalmente,
como se fosse um celular, utilizando o
mouse.
• A barra de botões ao lado, apresenta
ações dos botões externos.
Instalando Visual Studio Code
• Acessar code.visualstudio.com
• Clicar em “Download for Windows” e o
download será iniciado
• Após completo download, executar o
arquivo baixado
• Instalação basicamente consiste em
clicar em “Next” (“Próximo”) até a última
tela, onde clicamos em “Concluir”
• Tela inicial do VS Code, logo após
instalação
• Agora, da mesma forma que fizemos
com Android Studio, precisamos instalar
os plugins para o DART e Flutter
• Iremos clicar no botão “Extensões” (ou
Extensions em inglês)
• No campo de busca, iremos escrever a
palavra DART
• Selecionar e instalar, clicando em Install
• Após instalado DART, em seguida
instalaremos o plugin Flutter
• No campo de busca, iremos escrever a
palavra flutter
• Selecionar e instalar, clicando em Install
• Após instalado DART e flutter, em
seguida instalaremos o plugin Flutter
Widgets Snippets
• No campo de busca, iremos escrever a
palavra flutter
• Selecionar e instalar, clicando em Install
Validando o ambiente
• Acesse o prompt de comando do Windows
• Digite flutter doctor –v e tecle enter
• Se seguiu os passos até aqui, provavelmente
estas serão as informações que verá
• Note que o comando não detectou a presença dos
plugins Flutter e DART instalados no Android
Studio. Esta é uma incompatibilidade da versão
1.22.6 do Flutter SDK, com a versão mais recente
do Android Studio, no caso, 4.1.0.

• Vou citar três formas de resolver (talvez existam

outras):
• 1) Aguardar uma nova versão do Flutter que seja
compatível com a versão nova do Android Studio.
Descartaremos esta opção.
• 2) Instalar uma versão mais antiga do Android
Studio. Também descartaremos esta opção.
• 3) E por fim, vocês lembram que o Flutter é
open-source? Pois bem.... Não iremos modificar o
Flutter em si, porém versões mais recentes ainda
não publicadas já possuem suporte adequado ao
Android Studio 4.1.0. Então vamos lá.
• Acesse o prompt de comando do
Windows
• Digite flutter channel beta e tecle enter.
Este comando irá trocar o branch do Git
de “stable” para “beta”.
• Em seguida, digite o comando flutter
upgrade e tecle enter, para atualizar o
repositório local com as informações da
origem.
• Aguarde os downloads terminarem...
Pode demorar um pouco dependendo
de sua internet.
• Agora executaremos a versão mais detalhada da
verificação, digitando flutter doctor –v e teclando
enter

• Algumas informações mudaram e posso destacar:

• 1) A versão do Flutter que era 1.22.6, passou a ser
1.25.0-8.3.pre
• 2) A versão do Dart que era 2.10.5, passou a ser 2.12.0
• 3) Os plugins Flutter e Dart foram corretamente
detectados no Android Studio

• Sobre as versões do Flutter e Dart que mudaram e

foram teoricamente “atualizadas”, na verdade estamos
buscando uma versão que ainda não foi oficialmente
lançada.
• O impacto disso na prática é a possibilidade de
encontrarmos bugs da própria ferramenta no decorrer
do desenvolvimento. Não recomendaria esta ação para
ambientes comerciais. Talvez o ideal neste caso, seria
instalar uma versão mais antiga do Android Studio.
• Por outro lado, o próprio site do Flutter recomenda não
utilizar outro branch que não o “stable”, a não ser que
precise de alguma funcionalidade nova. Que é
precisamente o nosso caso.
Atenção
• Observe a linha “All Android licenses accepted”. Ela
deve estar presente quando executar o comando
flutter doctor –v
• Caso no lugar dela, seja exibida uma informação
diferente em vermelho, como “Android license status
unknown”, é necessária execução de um passo
adicional.
• Ainda no prompt de comando do Windows, digite o
comando flutter doctor --android-licenses
• Serão apresentadas vários termos de licenciamento do
Android que precisam ser aceitos. Para cada um deles,
é necessário teclar “y”, de “yes”.
• No meu caso, como todas foram aceitas, nenhum
termo é exibido.
• Após aceitar todas as licenças, execute novamente o
comando flutter doctor –v
• Agora deverá existir a linha “All Android licenses
accepted”, como vimos anteriormente.