Brincando com Flutter
Nesse artigo não estarei dando muitos detalhes técnicos sobre Flutter, e como ele funciona, talvez num futuro artigo estarei escrevendo sobre a comparação entre o Flutter, React-Native e Native.
O Que é o Flutter?
O Flutter é uma ferramenta, desenvolvida pela google, de desenvolvimento nativo para as 2 plataformas mais utilizadas hoje em dia, iOS e Android, é utilizado com a linguagem Dart, desenvolvida pela google também.
Numa breve comparação ao React-Native, a grande sacada do Flutter foi utilizar a linguagem Dart pois é compilada para varias plataformas gerando um arquivo binário que é executado nativamente, ele não precisa de uma bridge como o Javascript, com isso seu app acaba ficando mais otimizado.
Flutter trabalha com widgets, um dos widgets que será utilizado será o Widget MaterialApp, geralmente é requerido para aplicações Material Design, e dentro dela se declara o nome da aplicação, o conteúdo do seu aplicativo, o tema , configuração de rota. Se desejar se aprofundar mais sobre o Widget MaterialApp você pode encontrar na própria documentação do Flutter.
Tá e agora, vamos codar?
Se é código que vocês querem, então código vocês terão!
Primeiro iremos instalar o Flutter, e depois faremos uma aplicação de 2 telas consumindo a API da coinmarketcap.
Partindo da premissa que já estamos utilizando o Git e algum editor de texto ou ide instalada.
Recomendo utilizar VSCode, Android Studio ou IntelliJ IDE com o plugin Flutter instalado em qualquer plataforma.
Primeiros passos:
Clone o repositório do Flutter, e defina o caminho do Flutter em sua variável PATH temporariamente.
$ git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATHCaso deseja tornar permanente em sua variável PATH basta adicionar em seu .bash_profile, que se encontra em seu diretório raiz $HOME.
$ touch $HOME/.bash_profile #Caso não tenha o .bash_profile, o arquivo pode ter um nome diferente em sua maquina.
$ echo "export PATH=$PWD/bin:$PATH\n"$(cat $HOME/.bash_profile) > $HOME/.bash_profile
$ source $HOME/.bash_profile # Atualiza sua variável PATHAgora estamos pronto para saber todas as pendências do Flutter, basta digitar o comando doctor do Flutter, que dirá quais requisitos estão pendentes e baixará o que falta.
$ flutter doctorO resultado deve ser parecido com esse.
Criando seu primeiro projeto:
Após termos configurado tudo vamos criar nosso primeiro projeto e rodar ele. Precisamos ter ao menos um device conectado ao micro para rodar o projeto, pode ser simulador iOS ou Android ou algum dispositivo conectado em sua usb.
Por experiência não use device apple pois precisará configurar o certificado e nesta etapa do projeto não será necessário, por sinal será bem chato configurar o certificado, então nesse momento opte pelos simuladores.
$ flutter create [NOME_DO_PROJETO] #comando para criar o projeto
$ cd [NOME_DO_PROJETO] # entrando no diretório do projeto criado
$ flutter run #comando para rodar seu projeto criadoAgora com o projeto rodando, a cada alteração que você fizer no código basta apertar o “r” em seu terminal para dar o hot reload sem zerar o estado da aplicação e o “R” para zera o estado da aplicação.
E ai, já estou bichão em Flutter, mas não “codei” uma linha!
Jovem padawan, agora chegou seu momento de brilhar!
Dentro do projeto teremos um diretório chamado lib, e arvore de arquivos deve ser como a apresentada abaixo:
...
├── lib
│ ├── components
│ | └── list_view_coin_market.dart
│ └── view
| | ├── detail
| | └── detail_view.dart
| | └── list
| | └── custom_list_view.dart
| └── main.dart
...main.dart
Linha 5 — Método obrigatório para execução do seu Flutter App.
Linha 10 — Estamos definindo o nome da classe e se essa classe será uma classe com mudança de estado ou não.
obs: O Flutter possui 3 tipos de classe Stateful, Statless e Inherited .
Linha 13 — O widget Material App como explicado anteriormente é necessário para uma aplicação Material Design.
Linha 18 — Definiremos qual será nosso layout da home:
custom_list_view.dart
Nessa classe iremos fazer a requisição com a API.
Linha 12— Criação do método que irá fazer a requisição na API da coinmarket cap. O async quer dizer que esse método só ira retornar algo assim que todos os await tiverem terminados, lembra muito javascript o async/await.
Linha 22 — É a sua estrutura de um app Material Design, nele definimos se nosso app tera toolbar, Drawer menu, background color e outras coisas mais.
Linha 23 — Widget AppBar é o widget que trata a Toolbar ou ActionBar.
Linha 26 — O FutureBuilder é um widget que trata tudo que for assíncrono e retorne um AsyncSnapshot<T>.
Linha 28 — A propriedade Builder do widget FutureBuilder, tem o context da aplicação e o snapshot, o objeto que tem os dados da sua requisição e erros.
list_view_coin_market.dart
Componente responsável pela apresentação da listagem e a navegação entre telas.
Linha 7 — Constructor da classe.
Linha 12 — Quantidade de itens que terão sua lista, como a cada linha par será um Divider irei dobra o valor de elementos que eu possuo na minha lista.
Linha 13 — Builder que possui o contexto da aplicação e o index da listview.
Linha 17 — ListTile é como um Android.R.layout.simple_list_item_1, possui title, subtitle e trailing.
Linha 18 — Ação de click na linha da lista.
Linha 19 — Objeto de navegação entre as telas.
inha 21 — O CupertinoPageRoute faz a animação da transação igual a do iOS. O Flutter também possui o MaterialPageRoute que faz igual ao Android
detail_view.dart
Apresentação dos detalhes da moeda selecionada na lista.
Linha 59 — Widget Column possui a propriedade children para adicionar uma lista de Widget nela você ordena um elemento abaixo do outro.
Obrigado e até a próxima!
Link do projeto no Github:
https://github.com/bcolombini/brincando_com_flutter
Quem sou:
https://www.linkedin.com/in/brunocolombini
Referências:
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
https://flutter.io
