Aventuras no Flutter
E então resolvi me aventurar em uma nova tech mobile, o Flutter.
Nesse artigo irei comentar como está sendo minha experiencia de iniciação nessa nova tecnologia, comparações ao React Native que é com o que trabalho atualmente e mostrar o quão estou no hype com o Flutter. 😜
Iniciei a pesquisar sobre o Flutter em 2019, onde fiz um teste com ele tentando criar um pequeno app. Na época, estava desenvolvendo com React Native, e o Flutter se mostrava bem promissor, mas nada além disso, tive diversos problemas desde a instalação até o desenvolvimento do App e a comunidade, comparado ao React Native, era bem pequena.
Desde então venho acompanhando o crescimento dele, e ultimamente, tem virado tópico de discussão em diversos lugares, se vale a pena investir nele, se ele é difícil de aprender, se é melhor que o React Native e etc.
Tendo isso em vista resolvi testar as novas versões para tirar uma conclusão própria, e aqui venho mostrar pontos altos e baixos que senti desenvolvendo um App para Brainny.
Dart
Primeiro ponto a se falar quando se vai para o Flutter, o que é o Dart?
Dart é uma linguagem de programação criada pelo Google em 2011.
Dart para mim é uma linguagem onde mistura a sintaxe do Javascript com o Java.
Sim, Flutter utiliza outra linguagem de programação, tenho que deixar meu amado Javascript para utilizar ele?
Esse foi um dos principais pontos negativos que eu via no início, dado que a stack da Brainny é toda baseada em Javascript, seria trabalhoso implantar uma nova linguagem para nós, mas esse ponto foi cada vez ficando menor enquanto eu desenvolvia, pois as semelhanças com o Javascript são enormes, e em poucos dias eu já estava me sentindo em casa desenvolvendo com Dart, e se comparar com Typescript, as semelhanças são maiores ainda, pois Dart é tipado.
Components VS Widgets
No Flutter, tudo é baseado em Widgets, e Widgets são tudo.
O Flutter utilizar o Dart Framework onde nele tem TUDO que possa se imaginar. Tem muitos Widgets prontos utilizando o Material Design (Design do Android) ou o Cupertino (Design do IOs) e isso vai de simples textos, até animações de transição de telas, e isso agiliza o desenvolvimento.
Erros
Ao decorrer do desenvolvimento, tive uma experiencia muito boa em relação ao tratamento de erros do Flutter, todos erros que tive, demonstrava bem onde estava o problema, e em relação ao React Native, você verá uma quantidade menor de erros pois ele não atualiza o celular se tiver um erro qualquer de compilação, diminuindo aquelas telas vermelhas do inferno. 😡
No React Native tive varios problemas de desenvolver a interface no Android e quando fosse testar no iOS, tinha problema de compatibilidade entre os dois, e entao tinha que fazer varias verificações "se está no IOs, muda tal componente", ja no Flutter não passei por isso, tudo que desenvolvi em uma plataforma, ficou exatamente igual na outra.
Temas
Isso é uma das coisas que sentia falta no React Native, como fazer com que minhas cores, fontes, estilos sejam refletido nos componentes normais do React, e sempre a solução era criar componentes que definiam os estilos e reutilizar eles em tudo.
No Flutter como já incluído os Widgets do Material Design e Cupertino, você pode definir as cores e fontes direto na raiz da aplicação, ou em lugares que se chamar o Widget Theme.
Se quiser saber mais: https://flutter.dev/docs/cookbook/design/themes
Navigation
Flutter já vem com um router próprio em que pode ser baseado em navegação entre telas ou rotas nomeadas.
Com a navegação consegue-se apenas chamar o Widget da tela para navegar, utilizando o Navigator.push e Navigator.pop para voltar. Assim é mais fácil de passar parâmetros para a segunda tela e também montar animações de transição de tela especificas para cada rota.
Com rotas nomeadas acaba ficando mais parecido com a solução encontrada no react-router, onde declara-se as rotas na raiz do projeto e se utiliza outro método para navegar entre as rotas, o Navigator.pushNamed, e para voltar é o mesmo Navigator.pop
Para mais informações tem uma seção na documentação do Flutter só sobre navegações: https://flutter.dev/docs/cookbook#navigation.
Documentação
A documentação do Flutter é bem vasta, além de ter a parte mais técnica da ferramenta, tem diversos exemplos de casos de usos e um canal no youtube com diversos assuntos relacionados e uma série de videos mostrando os Widgets mais utilizados do Flutter, assim sendo muito tranquilo a iniciação na tecnologia.
Bibliotecas
Utilizei algumas bibliotecas para o desenvolvimento desse app e posso dizer que fiquei impressionado com alguns fatores, dentro deles é que o Dart não utiliza um "node_modules" em cada projeto, ele instala os pacotes diretamente na pasta default dele, e faz um link simbólico no seu projeto, assim ele consegue reutilizar as bibliotecas já instaladas em outros projetos. Uma espécie de "node_modules" compartilhado, e isso achei genial.
Tentei utilizar diversas libs que faziam o mesmo ou mais que as que eu utilizava no React Native e não tive problema nem falta de nenhuma.
Uma questão interessante é que a comunidade brasileira está se empenhando bastante no Flutter, estou utilizando uma biblioteca onde consigo projetar meu App em modulos, com injeção de dependências e tudo, e essa biblioteca foi criada por brasileiros, isso é muito legal.
O Dart utiliza o arquivo pubspec para armazenar o versionamento dos pacotes e algumas configurações do seu app, é o package.json do Dart.
E para instalar esses pacotes, pode buscar no pub.dev escolher o pacote e copiar e colar a versão atual no seu pubspec
Todo pacote tem essas abas, mostrando exemplos e instruções para instalar no seu projeto.
Build
O Flutter disponibiliza uma CLI para poder gerar APKs, AppBundle, IPAs e etc, isso ajuda bastante pois com um simples comando no terminal, consigo gerar um IPA para testar no IOs, o que sempre foi um grande trabalho realizar isso com o React Native.
Ele tem uma boa documentação de como gerar e lançar um app tanto Android quanto IOs e inclusive de técnicas para diminuir o tamanho do seu app.
Futuro
Uma coisa que não testei foi o Flutter Web e ele está beta ainda, mas eu fico imaginando se a gente conseguisse utilizar o próprio browser, para testar um app nativo, desenvolvendo no Chrome, testando responsividade e conseguir a partir disso gerar o app pra Android e IOs, é quase uma PWA nativa 😆.
Isso já pode se ter uma leve noção, pois o mesmo dá pra ser testado no codepen 😲
Eu acredito que o Flutter ainda tem muito o que crescer, e tá crescendo muito rápido, eu ainda vou realizar mais testes nele, mas confesso que estou gostando bastante e cada vez mais tenho vontade de utilizar ele em produção!
Deixarei alguns links de referencia e conteúdo para conhecer mais sobre o Flutter
