O conjunto “Controller” e “GetBuilder” permite que a aplicação se torne reativa, ou seja, ele pode atualizar um dado na página do aplicativo.

Em um primeiro momento quando comparado com “ValueNotifier“, bem simplista, o ganho é quase inexistente. Assim como “ValueNotifier” que exige instânciar o objeto e estabelecer o seu gerenciador de estado “ValueListenableBuilder“, em um primeiro olhar (incorreto), o mesmo ocorria com seus equivalentes “Controller” e “GetBuilder”, vejamos o exemplo:

Criando o “Controller”:

class Controller extends GetController {
  int value;
  Controller(this.value) {
    print('Controller $value foi criado');
  }
  inc([int v = 1]) {
    value += v;
    update();
  }

  dec([int v = 1]) {
    inc(-v);
  }
}

Usando o “GetBuilder”:

Widget build(BuildContext context) {
    return ContainerGroup(
      title: 'GetBuilder',
      width: 150,
      child: GetBuilder<Controller>(
          // init: Controller(0),   // transferido para o binding (Setup() na carga no main.dart)
          builder: (a) => Container(
                alignment: Alignment.center,
                width: 140,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Button(
                          width: 40,
                          child: Text('+'),
                          onPressed: () => a.inc()),
                      Text('${a.value}'),
                      Button(
                          width: 40,
                          child: Text('-'),
                          onPressed: () => a.dec()),
                    ]),
              )),
    );
  }

onInit / onClose – Controller

O “Controller” ganho dois eventos que ser sobrescrito (@override) permindo uma separação do código um pouco mais agrupado. onInit é chamado ao criar o GetBuilder (que é um StatefulWidget) equando que onClose é chamado ao ser encerrado.

Os eventos estão encapsulados no “initState” e “dispose” de um StatefulWidget/State, ou seja, então aqueles códigos de inicialização e finalização podem ser transferidos para o “Controller”, entregando mais separação de código ao controller melhorando a leitura e manutenção.

GetBuilder turbinado – sem instanciar o controller

É aqui que o GetBuilder ganha força, NÃO requer uma instância do controller (requer somente na primeira chamada).

Neste ponto simplifica o uso de “controllers” que são utilizados em diferentes classes; o parâmetro “global:true” permite utilizar ou compartilhar a mesma instância do objeto, funcionando como um singleton.

O “GetBuilder” reaproveita o “controller” da primeira chamada armazenada em uma pilha “global”, reutilizando-o nas próximas chamadas.

Como agora a instância é global é bem vindo a propriedade “autoRemove” do “GetBuilder” instruindo a destruição da instância criada sem a necessidade de uma chamada direta ao “dispose”.

https://pub.dev/packages/get

A “package” Get para flutter esta brilhando, então não se perca com as críticas e vamos tentar melhorar o que já é bem interessante.

Porque escrever sobre Get? Bem, pergunta que já me fiz – recorrente. Olhando a documentação, minha primeira impressão é muito confusa e não é a altura da importância e facilidade que introduz – então é preciso uma ajuda para simplificar o texto na mesma altura que a simplificação da “package” nos fornece.

Passo 0 – Instalando o Get

Simples, vai la no arquivo “pubspec.yaml” e inclui o link para “get:”

dependencies:
  flutter:
    sdk: flutter

  get:

Passo 0.0 – Inicializando o Get

A inicialização da estrutura do “Get” consiste basicamente em trocar o “MaterialApp” na entrada do App por “GetMaterialApp“, veja:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    /// GetMaterialApp -> inicializa do Get
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

1 – “snackbar” em uma linha

Seria redundanto repetir a todo momento a simplicidade, então vamos a como gerar a mensagem:

 Get.snackbar(
    'titulo', 
    'mensagem do snakbar',
    snackPosition: SnackPosition.BOTTOM);

a “package” é muito extensa, ficamos para o próximo capítulo…

Um movimento rápido e crescente vem acontecendo com o Framework Flutter desde o seu lançamento em Novembro/2018 pela equipe do google.

É inegável a curiosidade inicial se tornar um forte interesse em conhecer seu funcionamento.
Em geral um material para abordar um nova linguagem deveria iniciar fazendo sua introdução. Como já é possível encontrar material suficiente na internet para iniciar o trabalho – creio ser desperdício de tempo dedicar tempo para isto quando já tem muitas pessoas falando ou escrevendo a respeito.

Não tenho dúvida que o principal diferencial de Flutter, além da sua beleza em produzir material de qualidade é a velocidade que se pode escrever um novo projeto utilizando o framework. Trabalhando com o Flutter passei a entender ser a produtividade seu principal ponto forte.

Flutter x Dart

O Dart como linguagem de suporte ao framework do Flutter é uma derivação inicial do javascript o que deixa todo iniciante bem a vontade se teve algum contato com javacript em sua trajetória anterior. Depois de seu descolamento do javascript passou a ter novas funcionalidades, mesmo que ainda possa gerar um código puro javascript quando utiliza o dart2js para fazer um transpiler entre as linguagens.

Transpiler

Transpiler parece mesmo ser a nova tendência que as novas linguagens vem usando como sinônimo para escrever códigos em uma linguagem e distribuir para outra linguagem ou plataforma.
Como tal Dart com flutter é capaz de gerar código para iOS, Android, WebBrowser e soluções para Desktop em gestação.
Amantes do NodeJs encontrarão no Dart suporte para gerar soluções de aplicações servidoras tão poderosas quanto ao NodeJs o que torna o Dart uma solução imbatível se levar em consideração o potencial de troca de bibliotecas entre as várias opções que suporta.

Packages para Flutter

Instalar Flutter é bem simples, basta seguir as instruções da página principal em Instalar Flutter .
Concluído a instalação já é possível sair criando aquele projeto “ALO MUNDO” tradicional sem muita dificuldade. Quer saber mais Exemplo.
A comunidade se movimentou muito rápido em torno do Flutter e vem disponibilizando um crescente número de pacotes adicionando novas funcionalidades, widgets e recursos visuais, então não deixa de dar uma passadinha no Repositório de Pacotes onde irá encontrar exemplos e modelos de como inserir os pacotes no seu aplicativo.

Widgets

Não entender Widget é próximo do impossível trabalhar com Flutter, então não perca tempo, vai logo tomando contato com uma infinidade de Widget Flutter que estão disponíveis. Para entrar em contato com uma documentação mais completa é possível ver diretamente nos fontes do próprio flutter, basta seguir os códigos fontes de origem, ou ainda fazer acesso na página de documentação do flutter. Mesmo depois de um bom tempo, ainda tenho alguma dificuldade em entender aquela documentação que apresenta exemplos em poucas páginas o que vem sendo construído ao longo do tempo. Se este for o seu caso o melhor caminho é ir direto no Youtube e procurar por Flutter e encontrará farto material para estudar e iniciar sua trajetória.

DartPad – Experimentando Dart

Que dar uma palhinha para medir o potencial do Dart.
É possível fazer simulações diretamente no seu browser usando o DartPad digitando o código Dart diretamente no editor de texto e RUN para obter o resultado.

Um exemplo para testar:

void main() {
  var cores = ['azul', 'amarelo', 'vermelho', 'preto'];

  var resultado = [
    'pink',
    for (cor in cores) cor,
    'verde'
   ];

  print('Result1');
  print(resultado);

  print('Result2');
  print([...resultado,...cores]);
}

resultados:

Result1
[pink, azul, amarelo, vermelho, preto, verde]

Result2
[pink, azul, amarelo, vermelho, preto, verde, azul, amarelo, vermelho, preto]