Em agosto de 2018, o Flutter se tornou a tecnologia de plataforma cruzada mais solicitada no Stack Overflow.
Em nosso blog, Artem Zaitsev e Evgeny Saturov da Surf , uma agência certificada do Google , explicarão por que e como aconteceu:
As soluções de plataforma cruzada há muito atraem aqueles que desejam lançar um produto MVP de maneira rápida e barata simultaneamente em várias plataformas. O motivo é simples - uma única base de código. É mais fácil manter: os artefatos são centralizados, não há duplicação de lógica e edições dos mesmos bugs para cada plataforma. E as pessoas precisam de menos para dar suporte e criá-lo - não há necessidade de manter dois desenvolvedores nativos.
As estruturas existentes são complexas ou pouco produtivas devido às nuances da implementação técnica ou estão cheias de bugs. Com sua ajuda, as pessoas se esforçam para obter rapidamente a funcionalidade mínima e, no final, se reescrevem para reescrever o projeto a longo prazo.
Muito em breve, espera-se que o lançamento final da nova estrutura de desenvolvimento móvel do Google, Flutter , se torne a tecnologia de plataforma cruzada mais solicitada no Stack Overflow. Enfatizo que ele foi projetado especificamente para aplicativos móveis e abrange duas plataformas: Android e iOS. No momento, a versão Release Preview 2 é apresentada. Novos projetos no Flutter se enquadram em uma coleção especial, cujo objetivo é mostrar os recursos da estrutura. Agora a estrutura é ativamente atualizada com componentes e complementos de arquitetura, graças à comunidade de desenvolvedores (por exemplo, a implementação do Redux).
Por que você precisa acreditar em Flutter?
Ótimo ajuste para desenvolvimento rápido
Você não precisa sair do habitual Android Studio. Usando o plugin, ele se adapta perfeitamente ao desenvolvimento de aplicativos Flutter .
O Hot Reload é um recurso matador que permite transferir instantaneamente todas as alterações do código para um emulador em execução ou dispositivo conectado.
Simplicidade e expressividade do layout
Se você já desenvolveu aplicativos para Android, tenho certeza de que o layout não é algo que você gostou.
Flutter é diferente. Em primeiro lugar, nenhum arquivo XML com widgets de composição tipográfica é criado e configurado diretamente no código (um pouco remanescente do Anko Layouts). Em vez de Exibir, o Widget é usado.
new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(16.0), child: Text( '$_name', ), ), //...
É assim que o código do projeto Flutter se parece. A princípio, um grande número de colchetes assusta, mas essas “árvores” são bastante visuais. O Flutter promove a composição: a partir de widgets prontos, você pode criar um novo, como de um designer. Quase todo componente tem uma propriedade filho ou filhos que aceita outro elemento ou uma matriz de elementos, respectivamente. Tudo é simples e claro. Você pode criar uma interface de usuário bonita com rapidez suficiente.
Em segundo lugar, desde o início, os criadores da plataforma oferecem aos desenvolvedores um catálogo de widgets prontos. Ele contém dois conjuntos de elementos, Componentes de materiais e Cupertino, que parecem nativos de cada plataforma. Widgets de plataforma cruzada também estão disponíveis. Sua aparência e comportamento são idênticos nos dispositivos iOS e Android.
Estrutura reativa
Você pode criar uma interface do usuário bonita e agradável em pouco tempo, não apenas devido ao grande número de widgets prontos, mas também ao idioma em que você deve escrever. O Dart remotamente se assemelha a Java, JavaScript, C #. É expressivo e perfeitamente adaptado às necessidades da estrutura, embora, após Kotlin, alguns excessos artísticos de sintaxe possam entrar em um estupor leve.
O Flutter é compilado em código nativo para cada plataforma. "Sob o capô", ele usa o Skia como um mecanismo gráfico.
Um recurso importante da arquitetura do sistema é que todos os widgets, bem como os componentes responsáveis pela renderização de widgets na tela, fazem parte do aplicativo, não da plataforma. É a ausência da necessidade de alternância de contexto e o uso de "pontes" que aumentam o desempenho, o que ajuda a alcançar o valor estimado de 60 FPS ao renderizar a interface do usuário.
O poder total da plataforma ainda está em suas mãos
Por que desistir de uma tonelada de código útil que existe na comunidade móvel há uma década? Todas as bibliotecas disponíveis nos aplicativos SDK nativos e nas APIs da plataforma podem ser usadas para aplicativos Flutter .
Configuração do ambiente
É fácil começar a usar o Flutter .
Durante o desenvolvimento, a documentação oficial recomenda o uso do Android Studio, IntelliJ ou VSCode com os plugins apropriados, mas qualquer editor de texto o fará.
Primeiro passo
Baixe o arquivo do SDK do Flutter no site oficial do seu sistema operacional. Descompacte no diretório desejado e execute o comando flutter doctor . Este comando verificará se tudo o que é necessário está instalado, bem como a presença de plug-ins para IDEs instalados (por exemplo, quando o Android Studio estiver instalado, o utilitário verificará os plug-ins).
Segundo passo
Se tudo correu bem, você pode começar a criar o primeiro projeto. Se forem encontrados erros, o médico informará como resolvê-los.
Passo três
Para usar o Flutter no Android Studio, é necessário instalar dois plug-ins: Flutter e Dart . Você pode instalá-los da maneira padrão, abrindo as configurações e selecionando os plugins necessários na pesquisa.
Detalhes sobre a configuração do ambiente estão escritos na documentação oficial .
Dardo
import 'package:flutter/material.dart'; void main() => runApp(MyApp());
A primeira coisa que chama sua atenção quando se olha para aplicativos Flutter é um código incomum. No mundo do desenvolvimento do Android, o Java é usado e, mais recentemente, o Kotlin.
Agora, na linha deles está o Dart . O Google está posicionando-o como uma alternativa ao JavaScript, com digitação forte, alto desempenho e flexibilidade.
A sintaxe do Dart é fácil de aprender, embora não tão bonita quanto a de Kotlin. Talvez seja uma questão de gosto e hábito.
Criação de projeto
Você pode criar um projeto executando o comando flutter create name no console ou usando o IDE (em Android Studio -> Novo projeto de flutuação).
Estrutura de aplicação
Depois de criar o projeto, você verá a seguinte estrutura. Existem quatro pacotes no diretório raiz do aplicativo - lib, ios, android e test.
O primeiro é o diretório de estrutura. Todos os arquivos de dardo e o código principal do aplicativo estão localizados lá. Apesar do fato de o Flutter ser compilado em código nativo, para cada plataforma é necessário escrever algumas interações nativas. Além disso, o Flutter pode ser integrado a um aplicativo existente. Existem dois pacotes para código nativo - ios / android, nos quais é possível escrever na linguagem familiar de uma plataforma específica - Obj-C / Swift ou Java / Kotlin. Você encontrará testes no pacote de teste.
Há um arquivo de configuração pubspec.yaml no diretório raiz - as bibliotecas estão conectadas, etc. Se falamos sobre a analogia, então para o Flutter é como build.gradle (também está lá, mas já está na parte nativa do Android).
O pacote lib pode ser dividido em pacotes adicionais - já existe uma questão de gosto e desejo de usar uma ou outra arquitetura. A propósito, para criar um aplicativo no Flutter , vários truques são usados, que podem ser vistos aqui .
Seu projeto terá imediatamente um arquivo main.dart contendo código com um exemplo. O aplicativo possui um único ponto de entrada - o método principal. Ele é responsável pela criação do widget raiz.
Tudo é um Widget
Tudo o que você vê (ou não) na tela, tudo com o qual a interação e o próprio aplicativo são widgets. Qualquer entidade da interface do usuário é um widget. Caixa de texto, recuo ou detector de gestos - widgets. O aplicativo é construído a partir deles como um construtor.
Segundo o site oficial, “cada widget é uma descrição imutável de uma parte da interface do usuário”.
Por exemplo, vamos criar um aplicativo com esta tela:
Os seguintes widgets estão presentes aqui:
- o aplicativo
- tela
- Appbar
- o texto
- botão com carregador
Alguns deles são implementados na estrutura, outros devem ser feitos de peças acabadas.
Os widgets são de dois tipos Stateless e Stateful . Os primeiros são estáticos (por exemplo, texto), os últimos suportam uma mudança de estado (por exemplo, uma tela).
Sem Estado
Um exemplo desse widget em um aplicativo seria MyApp. Essa é a raiz do aplicativo. Dentro, colocaremos tudo o que é necessário para renderizar usando o método de compilação.
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: new AppBar( title: new Text("Flutter Random Name"), ), body: new MyHomePage(), ), ); } }
Qualquer widget estático é um herdeiro da classe StatelessWidget . Você só precisa substituir o método de compilação e coletar o elemento necessário. Flutter promove a composição. Para criar um novo item, não expanda um item existente.
No exemplo, esse widget é criado a partir do MaterialApp (a raiz do aplicativo com base nos componentes do MaterialDesign), dentro do qual está o Scaffold - esta é a tela.
MyHomePage também é um widget que desenha o corpo da tela, excluindo a AppBar . Nesse caso, ele tem um estado. Falaremos sobre ele abaixo.
A construção da interface ocorre passando o construtor da classe para o campo correspondente com a inicialização dos argumentos. O Dart suporta parâmetros de método opcionais, que oferecem flexibilidade na criação de UIs.
Nota: a palavra new no Dart, começando com a segunda versão, é opcional.
Com esse layout de widgets, você pode obter uma tela estática do aplicativo. Além disso, a imaginação do desenvolvedor é ilimitada.
Statefull
Os widgets de estado suportam redesenho quando seu estado é alterado ( State ). Para criar esse widget, é necessário herdar do StatefullWidget e criar uma classe herdadora State<T> , que é o estado do widget e é responsável pelo que o usuário vê na tela do smartphone.
O estado do widget é setState() {} chamando o setState() {} . Dentro, você pode, por exemplo, definir uma cor de plano de fundo diferente para o botão, e a própria estrutura determinará o redesenho mínimo necessário da interface do usuário.
No meu caso, a página principal do MyHomePage será um widget de estado. Ele armazena _name - o nome que será exibido no bloco de texto e o _isLoading download _isLoading (responsável por como o widget LoadingButton interno será renderizado; um exemplo de controle de estado por meio do pai).
class _MyHomePageState extends State<MyHomePage> { String _name = ""; bool _isLoading = false; @override Widget build(BuildContext context) => Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: EdgeInsets.all(16.0), child: Text( '$_name', ), ), LoadingButton( isLoading: _isLoading, action: _generateName, ) ], ), ); }
O botão possui um retorno de chamada, action , onde o método _generateName() é alimentado. Observe que não há modificadores de acesso no Dart, como private e public . Mas se você deseja tornar algo privado dentro do módulo, o nome deve começar com o prefixo "_".
O método _generateName assíncrono. Ele é responsável por carregar o nome, alterar o sinalizador isLoading e definir o valor como name , o que leva a redesenhar o botão e o texto.
final snack = SnackBar(content: Text("Handle error!")); _generateName() async { toggleLoading(); try { // await // Json setName(map["name"]); toggleLoading(); } catch (e) { setName("oops!"); Scaffold.of(context).showSnackBar(snack); toggleLoading(); } } void toggleLoading() { setState(() { _isLoading = !_isLoading; }); }
Para alterar o estado, você deve chamar setState() {} . Sem essa chamada, o widget simplesmente não será redesenhado.
A implementação do carregador acabou sendo bastante simples. No momento do redesenho, o texto ou um indicador é substituído no botão.
A implementação leva apenas algumas linhas
_buildButtonChild() { if (isLoading) { return Transform.scale( scale: 0.5, child: CircularProgressIndicator(), ); } else { return Text("Click for name"); } }
Transform.scale necessário para reduzir o tamanho.
A interação assíncrona no Flutter , assim como no Dart, é baseada em async-await . Mais detalhes podem ser encontrados aqui , aqui e aqui .
Por onde começar?
Hoje, quando o novo conteúdo do Flutter é lançado quase diariamente, não faltam bons cursos para ajudar a fazer amizade com essa tecnologia.
Um bom exemplo de um curso básico do Flutter é o curso sobre Udacity . As lições são divididas em dois capítulos, cuja passagem cuidadosa de cada um levará de 3 a 4 horas.
Se os cursos não forem sua opção, comece a mergulhar na tecnologia estudando as fontes dos projetos existentes. O repositório awesome-flutter contém muitos desses projetos e também possui uma seleção muito generosa de bibliotecas, soluções, amostras e outros materiais prontos para estudo e inspiração.
Conclusão
De acordo com os resultados de uma imersão mais profunda no tópico, do ex-ceticismo, não tínhamos traço. Flutter não é como um experimento, mas mostra a direção em que uma parte significativa da indústria de desenvolvimento móvel se moverá nos próximos anos. Alguns conceitos ousados subjacentes ao Flutter trazem novas idéias e oportunidades para o desenvolvimento. A criação rápida e quase intuitiva da interface do usuário torna mais fácil do que nunca as experiências de prototipagem e UX e acessíveis a todos. Em que área o Flutter encontrará sua aplicação - o tempo dirá.