Criando um App com Flutter
Conheça o Flutter, uma solução para desenvolvimento de apps nativos destinados a Android e iOS
Resolvi fazer uma série mobile de forma prática, rápida e objetiva contando minha evolução com o flutter, o GDG Lauro de Freitas já dirigiu um study jam sobre o flutter e vamos seguir com o conteúdo. Mas, antes de começarmos a codificar nossos aplicativos com o Flutter (não vou abordar instalação e configuração para não ficar muito longo, mas deixo aqui o link), precisamos entender sobre esse framework e sua estrutura de widgets para criar UIs(Interface do usuário).
Introdução
Quem já desenvolveu apps sabe que temos alguns desafios no desenvolvimento de aplicativos móveis, seja por questões de performance, integração com apis, custo de desenvolvimento e outros. A Google criou o Flutter com uma abordagem Cross-Platform, um código para duas plataformas. O flutter é um SKD mobile para criar experiências nativas de alta qualidade, multi plataforma em tempo recorde. Seu core é desenvolvido em C++ e Dart. A linguagem utilizada para desenvolvimento é Dart, uma linguagem de programação concisa, fortemente codificada e orientada a objetos.
O código escrito em Dart utiliza a compilação JIT e AOT, JIT(Just-in-time) que possibilita recompilar o código da aplicação no dispositivo. Já o AOT ahead of time, compila todo seu código ainda em tempo de desenvolvimento, antes da execução, ou seja, tornando seu carregamento mais rápido e proporcionando animações muito mais fluídas!
Arquitetura
O Flutter foi inspirado no React com relação a arquitetura da aplicação (isso é dito na própria documentação), e os conceitos como State, Stateful, Stateless já estão embutidos no framework. Tudo em flutter é um Widget, e tudo é criado com base em Widget seja text, button, color, animação ou formas. Imagine que são bloquinhos que você pode organizar de acordo com a User Interface (texto, botões, cards, imagens, barra de navegação). Os widgets possuem estados que mudam à medida que o usuário interage com
ele e seus estados podem receber atributos e funções.
Widget e seus estados
Como tudo no flutter é baseado no comportamento de objetos, melhor dizendo em widgets, vamos então compreender quais são os estados de um Widget para poder trabalhar com eles.
#Stateless — sem estado
Os widgets sem estado são imutáveis, não possuem estado interno para gerenciar como: botões, ícones, textos, desenham-se apenas uma vez, ou seja, suas propriedades não podem ser alteradas (todos os valores são finais ).
#Stateful — com estado
Os widgets que possuem estados são mutáveis, toda sua widget é redesenhada, tornando seu estado dinâmico. Por exemplo um input, textField, slides e forms, todos eles precisam mudar de estado por isso utilizamos o Stateful.
Criando nosso projeto
Se você não possui o flutter instalado, pode fazer isso no VsCode ou Android Studio. Baixe o seguinte pacote de instalação para obter a versão mais recente do Flutter SDK em https://flutter.dev/docs/get-started/install
Agora com o terminal aberto, vamos finalmente criar nosso projeto, flutter create nomedoseuprojeto
Para emular o projeto, navegue até o diretório informe o comando flutter run e com dispositivo em modo desenvolvedor ou um emulador veja seu App.
flutter run
Este exemplo inicial que o flutter te dá é um merge entre stateful e stateless, mas nós vamos trabalhar com stateless apenas, uma app simples, sem mudança de estados do widget. Você pode pagar esse exemplo e seguir com a estrutura a seguir para criar o appBar com o card
lib/pages/main.dart é onde é colocado o seu código dart .
idea: usados pelo VS Code ou outras IDEs
android e ios: código nativo gerado a partir do dart
build: arquivos gerados no processo de build das plataforma
test: pode ser usado para criar testes automatizados
gitignore: para controle de versão no git
metadata, .packages, etc.: são os arquivos de configuração
pubspec.yaml: descrição das dependências de módulos de código nativos
main.dart
myApp.dart
Nossa classe MyApp extends StatelessWidget vai criar o widget stateless que retorna um Widget Scaffold, responsável por construir a estrutura do nosso app. O construtor do scaffold cria diversos parâmetros e no nosso caso cria appBar e body.
Perceba que no parâmetro do nosso appBar é possível definir backgroundColor e title.
O body cria um container para o nosso CardWidget
Conclusão
Em meu início de jornada mobile com flutter, me surpreendi com aspectos de componentização, um SKD fluído, leve e o melhor de tudo, código nativo e bem mais fluído que o ionic. Particularmente, achei o dart mais amigável de se trabalhar, vamos aumentar nível de complexidade e ver no que dá. Uma coisa é certa a Google conseguiu agitar a comunidade com essa proposta nativa. Vamos flutterar!!!
Espero que você tenha gostado e não esqueça de compartilhar para outras pessoas.
Referências
- https://flutter.io/
- https://flutter.dev/docs/codelabs/layout-basics
- https://flutter.io/get-started/install/
