Gerenciamento de Estado com GetX no Flutter

O get, e não get_it, é um pacote muito completo, contendo os três pilares ( Gerenciamento de Estado, Gerenciamento de Rotas e Gerenciamento de Dependências ).

Ele conta com outras diversas soluções, como um cliente http GetConnect, utilidades GetUtils e etc...

Porém nós iremos falar sobre o GetxController, existem algumas formas de fazer o gerencimento de estado com o get, podemos optar pelo reativo ou simples.

Hoje, iremos abordar o mais simples. Então vamos lá, depois de você ter instalado o get no seu projeto no arquivo pubspec.yaml podemos ir diretamente para o código.

Vamos utilizar o código padrão de boas-vindas do Flutter, o contador.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Contador',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Aqui temos uma estrutra simples, não vou explicar pois se você desenvolve em Flutter, só deve entrar nesse assunto de Gerenciamento de Estado mais profundo depois de ter entendido bem o próprio setState.

Pois é, se você não sabe o que é esse código acima, aconselho voltar um pouco para entender melhor a estrutura de Widgets do Flutter.

Então vamos lá. Podemos criar um controlador para gerenciar esse contador.

class Controller extends GetxController {
   
}

Note que na hora de fazer a importação, aparecerá várias formas de importar, isso acontece pois o get é desacoplado na questão de funcionalidades. veja na documentação:

GetX não está inchado. Ele possui uma infinidade de recursos que permitem começar a programar sem se preocupar com nada, mas cada um desses recursos fica em containers separados e só são iniciados após o uso. Se você usar apenas o gerenciamento de estado, apenas o gerenciamento de estado será compilado. Se você usar apenas rotas, nada do gerenciamento de estado será compilado.

Agora, vamos tirar a variável _counter e o método _incrementCounter da nosso _MyHomePageState.

Simplesmente precisamos movê-los para o nosso Controller, ficando assim:

class Controller extends GetxController {

  int counter = 0;
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }
  
}

Pronto! A única mudança que fiz ai, foi tirar os "_" para poder acessar a variável e o método na View ( Claro que foi só para facilitar, mas teria como usar os getters e setters tranquilamente ).

Agora temos um problema! O setState depende de um State, e nós não temos mais esse State, a solução é muito simples, basta tirarmos ele e trocar por um update()

class Controller extends GetxController {

  int counter = 0;
  void incrementCounter() {
    counter++;
    update();
  }
  
}

Simples né? Agora, só falta mudar a View, vamos fazer isso agora.

// ...

class _MyHomePageState extends State<MyHomePage> {

  final controller = Get.put(Controller());
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            GetBuilder<Controller>(
              builder: (_) {
                return Text(
                 '${controller.counter}',
                 style: Theme.of(context).textTheme.headlineMedium,
               );
              }
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Agora podemos testar! Você verá o contador sendo incrementado perfeitamente.

Nós precisamos registrar o nosso Controller, eu fiz isso usando o Get.put, eu poderia usar o init do GetBuilder que também funcionaria.

Depois eu envolvi o Text em um GetBuilder que é o responsavel por reconstruir o Widget em uma atualização.

É importante tipar, GetBuilder< Seu tipo aqui >.

No builder dele, temos acesso a instância do próprio Controller, então poderiamos usar ele para acessar a variável ou o método.

Por fim, retornamos o Widget e com apenas isso, temos um gerenciamento de estados utilizando o GetX! :)