O Flutter e a Linha de Comandos — uma história de amor

Mariana Castanheira
Flutter Portugal
Published in
9 min readAug 29, 2019
Foto de Shahadat Shemul emUnsplash

A Flutter Portugal tem o orgulho de anunciar um novo projecto: tradução para português de alguns dos mais visto artigos sobre Flutter ou Dart! Queremos que a informação seja acessível a todos os que queiram criar aplicações ou websites com a nova plataforma da Google, independentemente do seu grau de conhecimento de Inglês.

Fiquem atentos às próximas semanas pois teremos mais artigos a caminho!

Artigo original de Gonçalo Palma, Flutter and the Command Line — a Love Story

Usar um IDE (Ambiente de Desenvolvimento Integrado), como o Android Studio da IntelliJ ou o Visual Studio Code, para desenvolver as aplicações em Flutter, torna as nossas vidas mais fáceis. Com o clique de um botão podemos fazer correr a nossa aplicação, debug (depurá-la), fazer hot-reload, etc… E embora possamos ter teclas de atalho para dispensar o uso do rato, pode ser incómodo ter de mover o rato pelo ecrã. Ou, simplesmente gostamos de usar o
terminal, ou estamos curiosos sobre ele e queremos saber diferentes formas de interagir com o Flutter.

Felizmente, o Flutter vem com um CLI (Interface de Linha de Comando, ILC) que nos permite facilmente fazer as mesmas tarefas que seriam feitas em qualquer IDE, como $ flutter doctor, o qual mostra se tudo correu bem com a nossa Instalação Flutter e verifica as últimas atualizações do repositório Flutter no Github.

flutter doctor

Comecemos então a explorar o CLI para ver o que é que podemos usar no dia-a-dia.

Explorando a secção de “Ajuda”

Usar o $ flutter help vai mostrar-nos uma longa e intimidante lista de comandos, tais como analyze, build, channel, clean, create, install, logs, pub e run, cada qual com uma pequena descrição. Mas como podemos usar cada um dos comandos?

Tal como com muitos outros CLI, podemos utilizar o útil argumento -help depois de qualquer comando para que o CLI nos mostre um pequeno ecrã de ajuda.

Parte dos logs de flutter — help

Neste caso concreto, se utilizarmos o seguinte comando:

$ flutter analyze — watch — no-pub

Iremos analisar o código do projeto atual do Flutter enquanto estamos a analizar continuamente qualquer mudança em todos os ficheiros (continuously, watching the filesystem for changes, -watch ) e sem obter ou atualizar as nossas dependências do pub --no-pub.

Correr os nossos Projetos

Quando estamos a desenvolver uma aplicação seja de que tipo for, aquilo de que um programador necessita é de correr o seu código. Afinal, como é que podemos admirar aquilo que produzimos (ou desesperar de cada vez que um novo bug tenta arruinar o nosso progresso)?

Para tal, tudo o que temos de fazer é usar o simples comando:

$ flutter run

O qual é simples o suficiente de utilizar, certo? Mas, às vezes, podemos ter mais do que um dispositivo (ou simulador) ligado à nossa máquina e, assim, aparece a mensagem de erro seguinte:

Comando flutter run quando se tem mais do que um device conectado

Por isso, façamos o que nos é dito e usemos a flag correta para o nosso dispositivo ao utilizar -d <device id>. Assumindo que o ID do nosso dispositivo é emulator-4 , podemos executar o nosso projeto para esse dispositivo ao usar:

$ flutter run -d emulator-4

Agora é que começa a ficar interessante. Digamos que os utilizadores da nossa aplicação, Flavors, e nós, temos pontos de entrada diferentes para a nossa aplicação: main.dart e main_dev.dart para flavors/schemes prod e dev.Como é que podemos executar cada um deles? Usemos o comando -help e procuremos argumentos que nos possam ajudar.

Flutter run help

Tal como visto acima, podemos utilizar as flags --flavors e -t para nos poderem auxiliar na escolha de um Flavor e de um entry point (ponto de entrada), respetivamente. Desta forma, podemos ter dois comandos diferentes para executar a nossa aplicação:

$ flutter run -d emulator-4 -t lib/main_dev.dart — flavor dev
$ flutter run -d emulator-4 -t lib/main.dart — flavor prod

Isto vai pôr a nossa aplicação a funcionar! 🚀

Mas… Está a faltar algo.

O Flutter é conhecido pela característica de Hot Reload, à qual podemos aceder com facilidade no nosso IDE preferido, a maior parte das vezes ao clicar num símbolo ⚡. Mas como é que podemos fazer isso com a linha de comandos? A única referência ao hot reload que temos está no argumento --hot, mas este só nos permite ativar ou desativar essa função.

Se prestarmos especial atenção ao output da consola quando executamos a nossa aplicação, vemos que faz menção aos elementos de Hot Reload e Hot Restart. Só que, em vez de usar argumentos designados (named arguments), a linha de comando incita-nos a escrever cada carater de que precisemos.

Flutter run

Então, vamos seguir as suas instruções e clicar em r.

Hot reload

E como podemos fazer Hot Restart? Usando Shift + R

Hot restart

E é isto! Mas, que outras funcionalidades estão escondidas por detrás do comando run? Podemos vê-las ao usar a tecla h.

Detailed help for Flutter run

Então, por exemplo, se clicarmos em p, teremos uma útil sobreposição da UI (Interface do Utilizador, IU) com as diretrizes de construção para cada widget, o que se pode revelar vantajoso quando se tentam solucionar bugs desagradáveis da UI.

Flutter app com as diretrizes de construção dos Widgets

(Dica: Esta captura de ecrã foi feita usando a tecla s, o que guarda a imagem no diretório do projeto)

Os channels (canais) Flutter

Outro comando útil do CLI Flutter é a habilidade de mudar o atual canal Flutter. Um canal não é mais do que o ramo git no qual estamos a obter o código da fonte Flutter. Quando é que precisamos de o mudar? Quando estamos a usar ferramentas experimentais, tais como o Flutter Web ou se não podemos esperar que o bug-fix apareça no canal (channel) stable.

Flutter channels — stable channel currently selected

Depois de mudarmos o canal através do $ flutter channel master, deveremos sempre usar o comando $ flutter doctor para verificar se as ferramentas Flutter são as corretas ou se precisamos de atualizar a nossa versão do Flutter, o qual podemos fazer ao utilizar $ flutter upgrade.

Logs de Flutter

$ flutter logs -d emulator-4

Este fala por si: mostra os logs (registos) Flutter do dispositivo. Mas não só os logs de Flutter para a aplicação em execução, como também para todas as aplicações que usam o Flutter no dispositivo ligado.

Flutter logs help

Porque é que isto é útil?

  • Pode ajudar-nos a verificar se na versão --release da aplicação (ou até na versão enviada para a App Store/Play Store) existem logs que nos tenhamos esquecido de esconder (pode ler mais sobre isso neste artigo sobre debugPrint).
  • Pode ajudar-nos a economizar tempo para ver os logs da aplicação atual, sem necessitar de voltar a correr a aplicação.
  • Se, por alguma razão, $ flutter run emite os logs do sistema juntamente com os logs de Flutter, pode abrir um novo separador terminal e executar $ flutter logs para ver apenas os registos Flutter para esse dispositivo.

Criar um Novo Projeto

Correr um novo projeto e mudar o canal de Flutter pode ser bastante divertido, mas tudo isso pode resultar em nada se não tivermos um projeto onde os testar!

Aquando da criação de um projeto, poderemos estar interessados em:

  • Dar-lhe um nome;
  • Nomear uma organização para o nome do pacote (package) (por exemplo, com.vanethos)
  • A linguagem usada para o projeto Android (Kotlin ou Java).
  • A linguagem usada para o projeto iOS (Swift ou Objective-C)

Felizmente, podemos encontrar uma solução para cada um deles nos argumentos que se seguem:

Flutter create help

Assim, para criar um novo projeto na pasta flutter_cli_test com o prefixo do pacote com.vanethos, nome do projeto clitest e usando Kotlin e Swift, sem o AndroidX, precisamos de utilizar:

$ flutter create — org com.vanethos — project-name flutter_cli_test -a kotlin -i swift flutter_cli_test

E, se não soubéssemos como executar o nosso projeto, o Flutter guia-nos para que o executemos diretamente a partir da linha de comando, o que é bastante bom!

Flutter create após criar um projecto

Criar Scripts Personalizados em Bash

Nós sabemos como criar e executar projetos e, se olharmos para a secção de Ajuda, também sabemos como limpar o nosso projeto (usando $ flutter clean).

No entanto, os nossos princípios dizem-nos que, para cada execução do projeto, devemos:

  • Limpar o projeto Android
  • Limpar o projeto Flutter
  • Executar o Flavor dev da nossa aplicação no nosso dispositivo preferido

O que quer dizer que teremos de escrever o seguinte no terminal:

E se conseguíssemos simplesmente escrever um único comando para que a aplicação fosse executada em cada flavour?

No MacOs, poderemos ter de procurar como é que se criam scripts bash. Felizmente, Tania Rascia escreveu um ótimo artigo, no qual podemos ver que, para poder criar um script bash, precisamos de criar um ficheiro onde, na primeira linha, adicionamos o seguinte:
Assim, agora já podemos criar um simples guião bash, ao:

  • Criar um ficheiro chamado dev_build.sh (podemos fazê-lo com o comando touch dev_build.sh )
  • Adicionar o seguinte ao ficheiro:

Como é que o podemos fazer correr? Simplesmente chamando o ficheiro, usando:
$ sh dev_build.sh

E voilà! Agora podemos, com um só comando, limpar o nosso código minuciosamente e correr a nossa aplicação num Flavor específico!

Dica bónus: Usar o Pubx

Vamos levar o nosso amor pela linha de comando mais longe: queremos procurar pacotes e adicioná-los ao nosso ficheiro pubspec.yaml?

Embora o Flutter não permita isto de origem, podemos confiar na comunidade Flutter para vir ao encontro dos nossos desejos e assim o fez, com o pacote pubx, de Scott Hyndman.

Quer procurar um pacote específico? Use $ pubx search provider

pubx search

Encontrou um pacote e quer saber mais sobre ele? Use $ pubx view provider

pubx view

E, finalmente, quer adicionar dependências ao seu ficheiro pubspec.yaml a partir da linha de comando? Facilmente feito com o $ pubx add provider

Conclusão

Passámos por uma breve introdução ao CLI Flutter 💻 .

Cabe-nos escolher se esta é a opção certa para nós, ou não. Talvez gostemos de usar o terminal, talvez apenas queiramos usar o ADI e deixá-lo lidar com ele, ninguém nos deve julgar sobre isso. Porém, é sempre bom conhecer alternativas. Porquê?

  • Com a linha de comando podemos executar um projeto sem o abrir
  • Podemos facilmente mudar o Canal Flutter
  • Podemos analisar o nosso código antes de um grande commit
  • Se quisermos testar um novo plug-in/pacote rapidamente, podemos fazê-lo através de:
$ git clone https://github.com/Vanethos/stream_disposable.git
$ cd stream_disposable/examples
$ flutter run
  • Pode facilmente criar builds de release para a sua aplicação, através de:
$ flutter build ios
$ flutter build appbundle
  • Simplesmente parece fixe.

Digam-nos a vossa opinião! 😄Vão usar? Quais são os vossos comandos preferidos?

--

--

Mariana Castanheira
Flutter Portugal

Translator (English-Portuguese/Portuguese-English). Helping Flutter Portugal for the time being.