Após a aula anterior, tenho certeza de que você já configurou o ambiente de desenvolvimento do Flutter. Nesta aula, vamos desenvolver com o Flutter usando o Android Studio.
Instalar o plugin do Flutter
Por padrão, o Android Studio não suporta o Flutter, sendo necessário instalar o plugin correspondente.
Abra o Android Studio e acesse o menu superior File → Settings (atalho de teclado Ctrl+Alt+S)
Procure a seção Plugins no painel esquerdo, pesquise por “flutter”, clique em Instalar e reinicie o Android Studio após a instalação.
Configurar o caminho do SDK do Flutter
Apenas instalar o plugin não é suficiente, você também precisa informar o caminho do SDK do Flutter dentro do Android Studio.
File → Settings → Languages & Frameworks → Flutter
Arquivo Configurações Idiomas e Frameworks flutter
Selecione a pasta raiz do Flutter, não a subpasta bin. Depois clique no botão Apply.
Aguarde até que a instalação e configuração sejam finalizadas.
Criar um projeto
Depois disso, o processo é o mesmo de criar um projeto comum no Android Studio.
Selecione Flutter, informe novamente a pasta do Flutter à direita e clique em Next.
Agora configure o nome do projeto, local de salvamento, descrição e um ID de organização único. Esse ID precisa ser exclusivo se você for publicar o app na Google Play Store, por isso recomendo escrever seu domínio invertido. Por exemplo, eu uso com.foxdevelop.nomedoprojeto. Em seguida escolha o idioma base do Android: ele não é o idioma de desenvolvimento e sim o idioma da camada nativa do app Android, o código principal será feito em Dart. Na seção Platforms marque os sistemas onde você vai compilar e publicar o código. Neste exemplo marquei Android, Web e Windows Desktop para lançar o projeto nessas versões; se quiser lançar para iOS, Linux ou macOS, marque as outras três opções. Por fim clique em Create.
Aviso: O nome do projeto deve usar apenas letras minúsculas, sem espaços ou caracteres especiais.
O Android Studio vai iniciar a criação do projeto, esse processo pode demorar um pouco.
No meu caso, esse erro apareceu.
Clique em Run Flutter Doctor para executar a ferramenta de diagnóstico e verificar o ambiente.
Depois abra o projeto normalmente.
Mas no canto superior direito não é possível rodar o projeto, e aparece a seguinte indicação:
Eu troquei o tema de cores, por isso o Android Studio está com visual claro agora.
Na captura de tela acima, você verá um X vermelho, clique nele.
Clique em Editar Configurações (Edit Configurations).
A mensagem informa que o SDK do Dart não está configurado, clique em Fix no lado direito.
Você precisa configurar o diretório do SDK do Dart: após instalar o Flutter, o Dart fica dentro da pasta do SDK do Flutter.
Se o caminho do seu SDK do Flutter for:
então o caminho do SDK do Dart é:
Configure o caminho do Dart como na imagem acima e lembre-se de reiniciar o Android Studio.
Depois disso, o triângulo verde de execução aparecerá no topo. Se à esquerda estiver selecionado Windows Desktop, você conseguirá rodar o projeto como aplicativo de desktop Windows; clique no triângulo verde para executar.
* Solução de erros
Se você não encontrar os problemas abaixo, pode pular essa seção.
Esses erros acontecem quando as dependências não carregam completamente. Se o problema for conexão de rede, você pode usar um proxy ou configurar um servidor espelho.
Se esses erros aparecerem, siga a captura acima para configurar o espelho no terminal do Android Studio.
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode language: PHP (php)Após rodar esses comandos, todos os erros desaparecerão.
Executar o projeto
Clique no triângulo no canto superior esquerdo para rodar o projeto. O Flutter suporta várias plataformas: conecte seu celular ao computador, ative o modo desenvolvedor para depurar o app Android, ou use o Windows Desktop para testar sem celular.
Como na imagem, você pode escolher uma das três plataformas selecionadas na criação do projeto. Aqui escolhi Windows Desktop e cliquei no triângulo verde para executar.
A imagem acima mostra nosso primeiro aplicativo Flutter. Essa aula termina por aqui, faça os testes por conta própria. Se tiver qualquer dificuldade, deixe um comentário abaixo.
Criar um projeto Flutter com Android Studio