Comecei como desenvolvedor web front-end e depois me tornei um Flutter desenvolvedor. Acho que alguns conceitos me ajudaram a adotar o Flutter com mais facilidade. Houve também alguns novos conceitos que eram diferentes.
Neste artigo, quero compartilhar minha experiência e inspirar qualquer pessoa que se sinta paralisada ao escolher um ecossistema em vez de outro, mostrando como os conceitos são transferidos e quaisquer novos conceitos podem ser aprendidos.
Conceitos que foram transferidos
Esta seção mostra locais onde o desenvolvimento web front-end e o Flutter se assemelham. Ele explica as habilidades que você já possui e que serão uma vantagem para você se iniciar o Flutter.
1. Implementando Interfaces de Usuário (UIs)
Para implementar uma determinada UI no front-end da web, você compõe elementos HTML e estiliza-os com CSS. Para implementar UIs no Flutter, você compõe Widgets e estilize-os com Propriedades.
Assim como o CSS, o Color classe no Dart funciona com “rgba” e “hex”. Também como o CSS, o Flutter usa pixels para unidades de espaço e tamanho.
No Flutter, temos classes e enumerações Dart para quase todas as propriedades CSS e seus valores. Por exemplo:
Flutter também tem Column e Row widgets. Estes são o equivalente Flutter para display: flex em CSS. Para configurar justify-content e align-items estilos, você usa MainAxisAlignment e CrossAxisAlignment propriedades. Para ajustar o flex-grow estilo, envolva o(s) widget(s) filho(s) afetado(s) do(s) Column/Row, em um Expanded or Flexible.
Para as UIs avançadas, o Flutter tem o CustomPaint classe – é para Flutter o que o Canvas API é para desenvolvimento web. CustomPaint oferece um pintor para desenhar qualquer IU que você desejar. Você normalmente usará CustomPaint quando você quer algo realmente complexo. Também, CustomPaint é a melhor opção quando uma combinação de widgets não funciona.
2. Desenvolvendo para múltiplos Resoluções de tela
Os sites são executados em navegadores e os aplicativos móveis são executados em dispositivos. Dessa forma, ao desenvolver para qualquer plataforma, você deve manter a plataforma em mente. Cada plataforma implementa os mesmos recursos (câmera, localização, notificações, etc.) de maneiras diferentes.
Como desenvolvedor web, você pensa na capacidade de resposta do seu site. Você usa consultas de mídia para lidar com a aparência do seu site em telas menores e maiores.
Passando do desenvolvimento web móvel para o Flutter, você tem o MediaQuery classe auxiliar. o MediaQuery class fornece o dispositivo atual orientation (paisagem ou retrato). Também fornece a janela de visualização atual size, devicePixelRatio, entre outras informações do dispositivo. Juntos, esses valores fornecem insights sobre a configuração do dispositivo móvel. Você pode usá-los para alterar a aparência do seu aplicativo móvel em vários tamanhos de tela.
3. Trabalhando com depuradores, editores e ferramentas de linha de comando
Os navegadores de desktop possuem ferramentas de desenvolvedor. Essas ferramentas incluem um inspetor, um console, um monitor de rede, etc. Essas ferramentas melhoram o processo de desenvolvimento web. Flutter também tem seu próprio DevTools. Possui inspetor de widgets, depurador, monitor de rede, entre outros recursos.
O suporte IDE também é semelhante. Visual Studio Code é um dos IDE mais populares para desenvolvimento web. Existem muitas extensões relacionadas à web para o VS Code. Flutter também suporta VS Code. Portanto, durante a transição, você não precisa alterar o IDE. Existem extensões Dart e Flutter para VS Code. Flutter também funciona bem com Android Studio. Tanto o Android Studio quanto o VS Code suportam Flutter DevTools. Essas integrações IDE tornam as ferramentas Flutter completas.
A maioria dos frameworks JavaScript front-end vêm com seus interface de linha de comando (CLI). Por exemplo: CLI Angular, Criar aplicativo React, Vista CLI, etc. Flutter também vem com um exclusivo CLI. O Flutter CLI permite construir, criar e desenvolver projetos Angular. Possui comandos para analisar e testar projetos Flutter.
Conceitos que eram novos
Esta seção fala sobre conceitos específicos do Flutter que são mais fáceis ou inexistentes no desenvolvimento web. Ele explica ideias que você deve ter em mente ao entrar no Flutter.
Como lidar com a rolagem
Ao desenvolver para a web, o comportamento de rolagem padrão é controlado pelos navegadores da web. No entanto, você pode personalizar a rolagem com CSS (usando overflow).
Este não é o caso do Flutter. Os grupos de widgets não rolam por padrão. Quando você sentir que os grupos de widgets podem transbordar, será necessário configurar a rolagem de forma proativa.
No Flutter, você configura a rolagem usando widgets peculiares que permitem a rolagem. Por exemplo: ListView, SingleChildScrollView, CustomScrollView, etc. Esses widgets roláveis oferecem grande controle sobre a rolagem. Com CustomScrollView, você pode configurar mecanismos de rolagem especializados e complexos no aplicativo.
Do lado do Flutter, usando ScrollViews é inevitável. Android e iOS têm ScrollView e UIScrollView para lidar com a rolagem. O Flutter precisa de uma maneira de unificar a renderização e a experiência do desenvolvedor usando seu ScrollViews, também.
Pode ser útil parar de pensar no fluxo da estrutura do documento e, em vez disso, considerar o aplicativo como uma tela aberta para os mecanismos de pintura nativos de um dispositivo.
2. Configurando seu ambiente de desenvolvimento
Para criar o site mais simples, você pode criar um arquivo com um .html extensão e abra-o em um navegador. Flutter não é tão simples. Para usar o Flutter, você precisa ter instalado o Flutter SDK e configurou o Flutter para um dispositivo de teste. Então, se você deseja codificar o Flutter para Android, você precisa configurar o SDK do Android. Você também precisará configurar pelo menos um dispositivo Android (um emulador Android ou um dispositivo físico).
Este é o mesmo caso para dispositivos Apple (iOS e macOS). Depois de instalar o Flutter em um Mac, você ainda precisa configurar o Xcode antes de prosseguir. Você também precisará de pelo menos um simulador iOS ou um iPhone para testar o Flutter no iOS. Flutter para desktop também é uma configuração considerável. No Windows, você precisa configurar o SDK de desenvolvimento do Windows com o Visual Studio (não o VS Code). No Linux, você instalará mais pacotes.
Sem configuração extra, o Flutter funciona em navegadores. Como resultado, você pode ignorar a configuração extra dos dispositivos de destino. Na maioria dos casos, você usaria o Flutter para desenvolvimento de aplicativos móveis. Portanto, você gostaria de configurar pelo menos Android ou iOS. Flutter vem com o flutter doctor comando. Este comando relata o status da sua configuração de desenvolvimento. Dessa forma, você sabe no que trabalhar, na configuração, se necessário.
Isso não significa que o desenvolvimento no Flutter seja lento. Flutter vem com um motor poderoso. O flutter run O comando permite recarregar a quente para o dispositivo de teste durante a codificação. Mas então você precisará pressionar R para realmente recarregar a quente. Isto não é um problema. Extensão VS Code do Flutter permite auto-hot-reload em alterações de arquivo.
3. Embalagem e implantação
A implantação de sites é mais barata e fácil em comparação com a implantação de aplicativos móveis. Ao implantar sites, você os acessa por meio de nomes de domínio. Esses nomes de domínio geralmente são renovados anualmente. No entanto, eles são opcionais.
Hoje, muitas plataformas oferecem hospedagem gratuita.
Por exemplo: DigitalOcean oferece um subdomínio gratuito em .ondigitalocean.com.
Você pode usar esses domínios se estiver construindo um site de documentação. Você também pode usá-los quando não estiver preocupado com a marca.
No mundo do Flutter com aplicativos móveis, na maioria dos casos você geralmente implanta seu aplicativo em dois locais.
Você deve registrar uma conta de desenvolvedor em cada uma dessas plataformas. O registro de uma conta de desenvolvedor requer uma taxa ou assinatura e verificação de identidade.
Para a App Store, você precisa se inscrever no programa Apple Developer. Você precisa manter uma assinatura anual de $ 99. Para o Google Play, você precisa fazer um pagamento único de $ 25 para a conta.
Essas lojas analisam todos os aplicativos avaliados antes de serem lançados.
Lembre-se também de que os usuários não consomem atualizações de aplicativos facilmente. Os usuários devem atualizar explicitamente os aplicativos instalados. Isso contrasta com a web, onde todos conseguem ver a versão implantada mais recente de um site.
O gerenciamento de aplicativos implantados é relativamente mais exigente do que o gerenciamento de sites implantados. No entanto, isso não deve assustar você. Afinal, existem milhões de aplicativos implantados em ambas as lojas, então você também pode adicionar o seu.
Considerações adicionais sobre vibração
Flutter é uma ferramenta multiplataforma para criar aplicativos para desktop, dispositivos móveis ou web. Os aplicativos Flutter são perfeitos em pixels. Flutter pinta a mesma UI em cada aplicativo, independentemente da plataforma de destino. Isso ocorre porque cada aplicativo Flutter contém o mecanismo Flutter. Este mecanismo renderiza o código da UI do Flutter. Flutter fornece uma tela para cada dispositivo e permite pintar como quiser. O mecanismo se comunica com a plataforma de destino para lidar com eventos e interações.
Flutter é eficiente. Possui níveis de alto desempenho. Isso ocorre porque ele foi desenvolvido com Dart e aproveita os recursos do Dart.
Com esses muitos benefícios, o Flutter é uma boa escolha para muitas aplicações. Os aplicativos multiplataforma economizam tempo e dinheiro durante a produção e manutenção. No entanto, o Flutter (e as soluções multiplataforma) podem não ser a escolha ideal em alguns casos.
Não use o Flutter se quiser que os usuários usem ferramentas de desenvolvedor de plataforma com seu aplicativo. Ferramentas de desenvolvedor de plataforma aqui significam ferramentas específicas de dispositivos, como opções de desenvolvedor Android. Também inclui ferramentas de desenvolvedor de navegador.
Não use o Flutter para web se você espera que as extensões do navegador interajam com o site.
Além disso, não use o Flutter para sites com muito conteúdo.
Conclusão
Esta foi uma revisão das habilidades que transitam do desenvolvimento web front-end para o trabalho com Flutter. Também discutimos conceitos de desenvolvimento de aplicativos que você precisa aprender como desenvolvedor web.
Flutter é mais simples para desenvolvedores web porque ambos envolvem a implementação de UIs. Se você iniciar o Flutter, descobrirá que ele oferece uma boa experiência de desenvolvedor. Experimente o Flutter! Use-o para criar aplicativos móveis e, claro, mostrar o que você cria.
Saúde!
