Introdução ao pacote GetX em aplicativos Flutter

O Flutter é uma das maneiras mais rápidas de criar aplicativos nativos verdadeiramente multiplataforma. Ele fornece recursos que permitem ao desenvolvedor construir uma experiência de IU verdadeiramente bonita para seus usuários.

No entanto, na maioria das vezes, para alcançar coisas como navegar para telas, gerenciamento de estado e mostrar alertas, muitos padrões são necessários. Esses boilerplates tendem a desacelerar a eficiência de desenvolvimento dos desenvolvedores que tentam construir recursos e cumprir seus prazos.

Considere, por exemplo, o padrão necessário para navegar para uma tela em um aplicativo Flutter. Digamos que você queira navegar para uma tela chamada AboutScreen . você terá que escrever:

  Navigator.push ( contexto, MaterialPageRoute (builder: (context)=> AboutScreen ()), );  

Seria mais eficiente e amigável ao desenvolvedor fazer algo como:

Get.to(AboutScreen()); 

Quando precisar navegar de volta para a página anterior do Flutter, você terá que escrever:

Navigator.pop(context); 

Você perceberá que sempre dependemos da propriedade de contexto para algo tão comum como navegar entre telas. E se, em vez disso, pudéssemos fazer algo assim:

Get.back(); 

Os exemplos acima são algumas das maneiras em que o desenvolvimento de aplicativos no Flutter pode ser aprimorado para ser mais intuitivo e eficiente com menos clichês. Se você é a favor da simplicidade e da eficiência na construção de recursos e ideias, no Flutter, o pacote Get será de seu interesse.

O que é GetX

Get ou GetX é uma estrutura rápida, estável e leve para a construção de aplicativos Flutter.

O GetX vem pronto para uso com gerenciamento de estado de alto desempenho, injeção de dependência inteligente e gerenciamento de rotas de uma forma simplista e prática.

GetX visa minimizar boilerplates enquanto também fornece sintaxe simples e intuitiva para os desenvolvedores usarem durante a construção de seus aplicativos. No centro do GetX estão estes 3 princípios:

• Desempenho
  GetX se concentra no desempenho de seu aplicativo implementando seus recursos para consumir o mínimo de recursos possível.
• Produtividade
  GetX deseja que os desenvolvedores usem seus recursos para serem produtivos o mais rápido possível. Ele faz isso empregando sintaxes e práticas fáceis de lembrar. Por exemplo, geralmente, o desenvolvedor deve se preocupar em remover os controladores da memória, mas o GetX pronto para uso oferece gerenciamento inteligente que monitora os controladores em seu aplicativo e os remove quando não estão sendo usados ​​por padrão.
• Organização
  GetX permite o desacoplamento da Visualização, lógica de apresentação, lógica de negócios, injeção de dependência e navegação em seu aplicativo Flutter. Você não precisa de contexto para navegar entre as rotas, portanto, não depende da árvore de widgets para navegação. Você não precisa de contexto para acessar seus controladores/blocos por meio de um inheritedWidget , para que você possa desacoplar completamente sua lógica de apresentação e lógica de negócios de sua camada de visualização. Você não precisa injetar suas classes Controllers/Models/Blocs em sua árvore de widgets por meio de multiproviders, pois este GetX usa seu próprio recurso de injeção de dependência, desacoplando completamente a DI de sua visualização.

Recursos do GetX

GetX vem com alguns recursos de que você precisará no desenvolvimento diário de aplicativos no Flutter. Vamos dar uma olhada neles:

Gestão do Estado

Um dos principais recursos do GetX é seu recurso de gerenciamento de estado intuitivo. O gerenciamento de estado no GetX pode ser alcançado com pouco ou nenhum clichê.

Gerenciamento de rota

GetX fornece API para navegar no aplicativo Flutter. Esta API é simples e com menos código necessário.

Gerenciamento de Dependências

GetX fornece uma maneira inteligente de gerenciar dependências em seu aplicativo Flutter, como os controladores de visualização. GetX irá remover qualquer controlador que não esteja sendo usado no momento da memória. Essa foi uma tarefa que você, como desenvolvedor, terá que fazer manualmente, mas GetX faz isso para você imediatamente.

Internacionalização

GetX fornece i18n pronto para uso, permitindo que você escreva aplicativos com suporte a vários idiomas.

Validação

GetX fornece métodos de validação para realizar validação de entrada em seus aplicativos Flutter. Isso é bastante conveniente, pois você não precisa instalar um pacote de validação separado.

Armazenamento

GetX fornece um valor-chave rápido, leve e síncrono na memória, que faz backup dos dados em disco a cada operação. Ele é escrito inteiramente em Dart e se integra facilmente ao pacote principal do GetX.

Primeiros passos com GetX

Agora que você viu o que é GetX e os recursos e benefícios que oferece, vamos ver como configurá-lo em seu aplicativo. Vamos construir um aplicativo de demonstração para ver a maioria dos recursos que mencionamos em ação. Vamos começar.

Crie um novo aplicativo de vibração

Começaremos criando um aplicativo Flutter totalmente novo por meio da CLI do Flutter. Estou assumindo que sua máquina já está configurada para o desenvolvimento de aplicativos com Flutter. Então corremos:

  flutter create getx_demo  

Isso irá gerar o código básico necessário para um aplicativo Flutter. Em seguida, abra o projeto que acabou de criar no editor de sua escolha (usaremos o VS Code para este artigo). Em seguida, executaremos o projeto para ter certeza de que está funcionando bem (certifique-se de ter um dispositivo conectado ou um emulador/simulador em execução).

Quando o aplicativo for executado, você verá o aplicativo de contador padrão que o Flutter andaime para você ao criar um novo aplicativo do Flutter. O que vamos fazer é implementar o mesmo aplicativo de contador, mas com GetX para gerenciar o estado do aplicativo (que é a variável de contagem).

Começaremos limpando main.dart e deixando apenas este snippet de código:

  # main.dart
import'package: flutter/material.dart'; void main () { runApp (MyApp ());
} class MyApp extends StatelessWidget { //Este widget é a raiz do seu aplicativo. @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Flutter Demo', tema: ThemeData ( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage (título:'Página inicial de demonstração do Flutter'), ); }
}
 

A essa altura, nosso aplicativo estaria quebrado, pois não há mais o widget MyHomePage . Vamos consertar isso. Com GetX, não precisamos de widgets com estado e também nossa IU pode ser claramente separada de nossa lógica de negócios. Portanto, criaremos dois diretórios dentro de lib/. Esses diretórios são:

Vamos criar o widget MyHomePage dentro de views/. O nome do arquivo será my_home_page.dart . Depois de criá-lo, adicione o seguinte snippet de código a ele:

  import'package: flutter/material.dart'; class MyHomePage extends StatelessWidget { título final da string; MyHomePage ({this.title}); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto (título), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Texto( 'Você apertou o botão tantas vezes:', ), Texto( '0', style: Theme.of (context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton ( onPressed: null, dica:'Incremento', filho: Ícone (Icons.add), ), ); }
}
 

Agora que temos o widget MyHomePage , vamos importá-lo em main.dart . Adicione a instrução import no topo de main.dart abaixo de import'package: flutter/material.dart';

  import'./views/my_home_page.dart';  

Agora, seu arquivo main.dart deve se parecer com este:

  import'package: flutter/material.dart';
import'./views/my_home_page.dart'; void main () { runApp (MyApp ());
} class MyApp extends StatelessWidget { //Este widget é a raiz do seu aplicativo. @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( título:'Flutter Demo', tema: ThemeData ( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage (título:'Página inicial de demonstração do Flutter'), ); }
}
 

Quando você salva seu aplicativo agora, todos os erros devem ter sido corrigidos e o aplicativo será executado. Mas você notará que ao clicar no botão novamente, o contador não será atualizado. Se você olhar o código views/my_home_page.dart , verá que estamos apenas codificando 0 como o valor do widget de Texto e passando null para o manipulador onPressed do botão. Vamos trazer GetX para a mistura para deixar o aplicativo funcional novamente.

Instalando GetX

Vá para a página de instalação para GetX em pub.dev e você verá a linha de código para copiar coloque em seu arquivo pubspec.yml para instalar GetX. No momento em que este artigo foi escrito, a versão atual do GetX era 3.23.1. Então, vamos copiar a linha:

  get: ^ 3.23.1  

E então cole na seção dependencies de nosso arquivo pubspec.yml . Quando você salva o arquivo, get deve ser instalado automaticamente para você. Ou você pode executar manualmente em seu terminal.

  flutter pub get  

A seção de dependências do seu arquivo pubspec.yml deve ser semelhante a:

Dependências

 : vibração: sdk: flutter get: ^ 3.23.1  

GetxController

Mencionamos que GetX permite que você separe a IU do seu aplicativo da lógica. Ele faz isso fornecendo uma classe GetxController que você pode herdar para criar classes de controlador para as visualizações de seu aplicativo. Para nosso aplicativo atual, temos uma visualização, portanto, criaremos um controlador para essa visualização. Vá para o diretório controllers/ e crie um arquivo chamado my_home_page_controller.dart . Isso manterá o controlador da visualização MyHomePage .

Depois de criar o arquivo, primeiro importe o pacote GetX adicionando-o ao topo do arquivo:

  import'package: get/get.dart';  

Então você criará uma classe chamada MyHomePageController dentro dela e estenderá a classe GetxController . Esta é a aparência do arquivo:

  import'package: get/get.dart'; class MyHomePageController extends GetxController {}
 

vamos adicionar o estado de contagem à classe que criamos.

  contagem final=0;  

No GetX, tornar uma variável observável-isso significa que quando ela muda, outras partes de nossa aplicação dependendo dela serão notificadas. Para fazer isso, simplesmente precisamos adicionar .obs à inicialização da variável. Portanto, para nossa variável count acima, adicionaremos .obs a 0 . Portanto, a declaração acima será semelhante a esta:

  contagem final=0.obs;  

É assim que nosso arquivo de controlador se parece no momento:

  import'package: get/get.dart'; class MyHomePageController extends GetxController { contagem final=0.obs;
}
 

Para finalizar com o MyHomePageController , implementaremos o método incremento . Este é o snippet para fazer isso:

  increment ()=> count.value ++;  

Você notará que precisamos adicionar .value à variável de contagem para incrementá-la. Fizemos isso porque adicionar .obs a uma variável a torna uma variável observável e, para obter o valor de uma variável observável, você faz isso a partir da propriedade value .

Concluímos o controlador. Agora, quando o valor de contagem muda, qualquer parte de nosso aplicativo que o usa será atualizada automaticamente.

Iremos agora para a nossa visão e informá-lo sobre o controlador que acabamos de criar. Faremos isso instanciando a classe do controlador usando o recurso de gerenciamento de dependência GetX. Isso garantirá que nosso controlador não fique na memória quando não for mais necessário.

Em views/my_home_page.dart importe o pacote Get e também o controlador que você criou, como:

  import'package: get/get.dart';
import'../controllers/my_home_page_controller.dart';  

Então, dentro da classe MyHomePage , iremos instanciar o MyHomePageController :

  final MyHomePageController controller=Get.put (MyHomePageController ());  

Agora que temos uma instância do MyHomePageController , podemos usar a variável de estado assim como o método. Portanto, começando com o estado, em GetX para marcar uma parte de sua IU a ser reconstruída quando uma variável de estado muda, você envolverá essa parte com o widget Obx . GetX fornece outras maneiras de fazer isso, mas esse método é muito mais simples e limpo.

Para nosso aplicativo de contagem, queremos que o widget de texto seja atualizado com a contagem atual. Portanto, envolveremos o widget de texto com o widget Obx assim:

  Obx (()=> Text ('0', style: Theme.of (context).textTheme.headline4,),)  

A seguir, substituiremos a string estática 0 pela variável de contagem do MyHomePageController da seguinte maneira:

  Obx (()=> Texto ('$ {controller.count.value}',
, style: Theme.of (context).textTheme.headline4,),)  

Por último, chamaremos o método de incremento quando floatingActionButton for pressionado assim:

  floatingActionButton: FloatingActionButton ( onPressed: controller.increment, dica:'Incremento', filho: Ícone (Icons.add), ),  

Portanto, no geral, nosso arquivo de visualização MyHomePage agora deve ser semelhante a:

  import'package: flutter/material.dart';
import'package: get/get.dart';
import'../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { título final da string; controlador final MyHomePageController=Get.put (MyHomePageController ()); MyHomePage ({this.title}); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto (título), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Texto( 'Você apertou o botão tantas vezes:', ), Obx ( ()=> Texto ( '$ {controller.count.value}', style: Theme.of (context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton ( onPressed: controller.increment, dica:'Incremento', filho: Ícone (Icons.add), ), ); }
}
 

Quando você salva seu aplicativo ou o executa novamente, o aplicativo contador deve estar funcionando como funcionava quando o criamos pela primeira vez.

Eu acredito que você viu como o gerenciamento de estado é intuitivo com GetX, não tivemos que escrever muitos clichês e essa simplicidade ficará mais óbvia à medida que seu aplicativo se torna complexo. Você também notará que nossa visualização não mantém ou mantém qualquer estado, então pode ser um widget sem estado. O cérebro da visualização, por sua vez, agora é uma classe de controlador que manterá o estado da visualização e dos métodos.

Navegação em GetX

Vimos gerenciamento de estado no GetX. Vejamos agora como GetX oferece suporte à navegação em seu aplicativo. Para ativar o recurso de navegação do GetX, você só precisa fazer uma alteração em main.dart , que é transformar o widget MaterialApp em um GetMaterialApp ferramenta. Vamos fazer isso primeiro importando Get in the top of main.dart

  import'package: get/get.dart';  

Em seguida, fazemos a alteração para MaterialApp para que nosso arquivo main.dart fique assim:

  import'package: flutter/material.dart';
import'package: get/get.dart';
import'./views/my_home_page.dart'; void main () { runApp (MyApp ());
} class MyApp extends StatelessWidget { //Este widget é a raiz do seu aplicativo. @sobrepor Construção de widget (contexto BuildContext) { return GetMaterialApp ( título:'Flutter Demo', tema: ThemeData ( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage (título:'Página inicial de demonstração do Flutter'), ); }
}
 

Agora, nosso aplicativo foi configurado para suportar navegação GetX. Para testar isso, criaremos outra visão no diretório views/. Chamaremos isso em about_page.dart e conterá o seguinte código:

  import'package: flutter/material.dart';
import'package: get/get.dart';
import'../controllers/my_home_page_controller.dart'; classe AboutPage extends StatelessWidget { controlador final de MyHomePageController=Get.put (MyHomePageController ()); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Sobre GetX'), ), corpo: Centro ( filho: coluna ( mainAxisAlignment: MainAxisAlignment.center, filhos:  [ Preenchimento( preenchimento: const EdgeInsets.all (16.0), filho: Texto ( 'GetX é uma solução extra leve e poderosa para Flutter. Ele combina gerenciamento de estado de alto desempenho, injeção de dependência inteligente e gerenciamento de rotas de maneira rápida e prática.', ), ), ], ), ), ); }
}
 

Iremos então para MyHomePage e adicionaremos um botão que, quando pressionado, nos levará à AboutPage . Igual a. O botão deve estar abaixo do widget Obx. Aqui está:

  FlatButton (onPressed: () {}, child: Text ('About GetX'))  

Também precisaremos importar a AboutPage na parte superior do arquivo MyHomePage :

  import'./about_page.dart';  

Para dizer ao GetX para navegar para a AboutPage , tudo o que precisamos é de uma linha de código que é:

Get.to(AboutPage()); 

Vamos adicionar isso ao retorno de chamada onPressed do widget FlatButton assim:

  FlatButton ( onPressed: () { Get.to (AboutPage ()); }, filho: Texto ('Sobre GetX'))  

Ao salvar seu aplicativo agora, você poderá navegar para a AboutPage .

Você também pode optar por substituir a visualização MyHomePage pela AboutPage para que o usuário não seja capaz de navegar de volta para a página anterior pressionando o botão Voltar do dispositivo. Isso é útil para telas como telas de login. Para fazer isso, substitua o conteúdo do manipulador onPressed pelo código a seguir:

  Get.off (AboutPage ());  

Isso abrirá a visualização MyHomePage e substituirá por AboutPage .

Agora que podemos navegar para a AboutPage , acho que não será tão ruim poder voltar para MyHomePage para fazer isso, adicionaremos um em AboutPage após o widget de preenchimento e em seu manipulador onPressed , faremos uma chamada para Get.back () para navegar de volta para MyHomePage :

  FlatButton ( onPressed: () { Voltam(); }, criança: Texto ('Vá para casa')
)  

Snackbar

Normalmente, no Flutter para mostrar um Snackbar, você precisará escrever algo assim:

  final snackBar=SnackBar (conteúdo: Texto ('Yay! Um SnackBar!'));
//Encontre o Scaffold na árvore de widgets e use-o para mostrar um SnackBar.
Scaffold.of (context).showSnackBar (snackBar);  

Você pode observar que ainda estamos dependendo da propriedade context . Vamos ver como podemos conseguir isso no GetX. Vá para a visualização MyHomePage e adicione outro widget FlatButton abaixo do último botão que adicionamos. Aqui está o snippet do botão:

  FlatButton ( onPressed: () { //TODO: Implementar Snackbar }, filho: Texto ('Mostrar Snackbar'))  

Vamos exibir a mensagem ‘Yay! Impressionante GetX Snackbar ’. Dentro da função de manipulador onPressed, adicione a linha de código abaixo:

  Get.snackbar ('GetX Snackbar','Yay! Awesome GetX Snackbar');  

Execute o seu aplicativo e ao clicar no botão “Mostrar barra de ferramentas” você verá uma barra de ferramentas no topo do seu aplicativo!

Viu como reduzimos o número de linhas necessárias para mostrar uma barra de ferramentas em um aplicativo Flutter? Vamos fazer mais algumas personalizações no Snackbar; Vamos fazer com que apareça na parte inferior do aplicativo. Altere o código para este:

  Get.snackbar ('GetX Snackbar','Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM,
);  

Salve e execute seu aplicativo e o Snackbar aparecerá na parte inferior do aplicativo. Que tal mudarmos a cor de fundo do Snackbar, uma vez que está transparente no momento. Vamos alterá-lo para uma cor amberAccent da classe Colors em Flutter. Atualize o código para este:

  Get.snackbar ('GetX Snackbar','Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent
);  

Em geral, o código do botão deve ser semelhante a este:

  FlatButton ( onPressed: () { Get.snackbar ('GetX Snackbar','Yay! Impressionante GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, filho: Texto ('Mostrar Snackbar'))  

Diálogo

GetX fornece um método simples para criar AlertDialog no Flutter. Vamos ver isso em ação. Crie outro botão abaixo do anterior:

  FlatButton ( onPressed: () { //TODO: Mostrar caixa de diálogo de alerta }, filho: Texto ('Mostrar AlertDialog'))  

Vamos chamar GetX para exibir uma caixa de diálogo de alerta:

Get.defaultDialog(); 

Isso mostrará uma caixa de diálogo de alerta padrão que pode ser dispensada tocando-se fora da caixa de diálogo. Você pode ver como em uma linha de código temos um diálogo de alerta em funcionamento. Vamos personalizá-lo um pouco. Vamos mudar o título e a mensagem:

  Get.defaultDialog ( título:'Alerta GetX', middleText:'Alerta GetX simples');  

Salve e execute seu aplicativo e você verá as mudanças quando clicar no botão “Mostrar AlertDialog”. Podemos adicionar botões de confirmação e cancelamento como:

  Get.defaultDialog ( título:'Alerta GetX', middleText:'Alerta GetX simples', textConfirm:'Ok', confirmTextColor: Colors.amberAccent, textCancel:'Cancelar');  

Existem várias maneiras de personalizar a caixa de diálogo GetX e a API é bastante intuitiva e simples.

Conclusão

GetX foi criado para melhorar a produtividade dos desenvolvedores do Flutter à medida que eles criam recursos. Em vez de ter que pesquisar o padrão necessário para fazer coisas como gerenciamento de estado, gerenciamento de navegação e muito mais, GetX fornece uma API simples e intuitiva para realizar essas atividades sem sacrificar o desempenho. Este artigo apresenta GetX e como começar a usá-lo em seus aplicativos Flutter.

• Você pode encontrar a demonstração aqui →