Por quê o GetX? Existe outras opções até mais populares, como o Redux, Provider, bloc, MobX entre outros... Notou alguma semelhança no nome do MobX? Boa, as semelhanças não ficam apenas no nome...

Quando escolhi o GetX meu objetivo era produtividade, naquele momento estava utilizando o MobX e o meu grande problema era mobx_codegen já que estava ficando cada vez mais chato aguardar gerar os arquivos toda vez que o Controller era modificado este tempo ficava maior a medida que o projeto crescia...

Quando eu dei um chega no MobX e fui para o GetX?

Um dia como de costume fui navegando pelos top packages do pub.dev vi o GetX, logo notei a semelhança entre o MobX resolvi assim então, efetuar o Get Started:

Com uma abordagem bem simples o GetX é muito simples de entender e gerenciar estado com ele entre telas é quase que natural:


Primeiro: Adicionando o Controller.dart

class Controller extends GetxController{
  var numero = 0.obs;
  incrementar() => numero++;
}

Se sua aplicação for pequena apenas um Controller será o suficiente, Eu não recomendo usar apenas um  já que para manter o código sempre organizado o ideal separar os seus Controllers um para cada 'Module'.

Se você observar a variável numero ela é iniciada com 0 logo em seguida adicionamos .obs (como o observable do MobX) ficando var numero = 0.obs;

Este .obs é possível adicionar em todos os tipos do dart ele é para tornar a variável observável e podermos ser notificados quando houver uma modificação.

Segundo: Conectando o Controller a nossa View

No segundo passo, será bem simples no próprio arquivo main.dart vamos criar uma classe Stateless que representará nossa HomePage (View) e vamos também instanciar nosso controller para assim  ter acesso a nossa .obs.

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {

    // Instanciando sua class com Get.put()
    final meuController = Get.put(Controller());
    
  @override
  Widget build(context) {


    return Scaffold(
      // Utilize Obx(()=> para atualizar atualizar o Text() sempre que sua obs for modificada.
      appBar: AppBar(title: Obx(() => Text("Cliques: ${meuController.numero}"))),

      // Ao invés de utilizar Navigator.push() você poderá utilizar Go.to() mais um beneficio do GetX
      body: Center(child: RaisedButton(
              child: Text("Ir para a Segunda Tela"), onPressed: () => Get.to(SegundaTela()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: meuController.incrementar));
  }
}

Como podemos ver no exemplo acima, foi bem simples, além de ser um ótimo gerente  de estado o GetX tem uma pegada bem simples, o GetX ainda tem gerenciamento de rotas, e não é necessário ficar repassando o chato Context sempre...

Terceiro e último passo do nosso exemplo:

Nesse passo vamos criar a nossa visualização da Segunda Tela que será exibida  quando acionado o botão, e mostrará o valor correto da nossa variável que está no nosso Controller.

class SegundaTela extends StatelessWidget {
  // Recuperando nosso controlador que foi instanciado na HomePage
  final Controller meuController = Get.find();

  @override
  Widget build(context){
     // acessando variável atualizada
     return Scaffold(body: Center(child: Text("${meuController.numero}")));
  }
}

Pronto! Agora temos uma aplicação funcionando e o mais bacana, com gerência de estado entre as telas de forma bem simples e produtiva.

O GetX vai muito além disso, se você pretende ver mais artigos sobre o GetX com exemplos mais complexos deixe seu comentário e compartilhe, seu like pode ajudar a entender que você gostou do conteúdo e isso vai incentiva a escrever mais conteúdos como este!

Obrigado a todos! Até a próxima...