GetX: Entendendo o GetBuilder, GetX e Obx

Quando devemos usar o GetBuilder, GetX e Obx?

GetX: Entendendo o GetBuilder, GetX e Obx

Ao trabalharmos com GetX é muito comum a dúvida de qual componente devemos usar, GetBuilder, GetX e Obx.

Primeiramente, veremos que há dois tipos de abordagem para entendê-los:

De um lado há o GetX e Obx que é utilizado com as variáveis observáveis nas quais queremos que se atualizem de forma automática, como os .obs e streams, ou seja, sempre que estivermos trabalhando com eles estará trabalhando com streams; já do outro há o GetBuilder que trabalha com as informações que queremos informar quando elas irão ser atualizadas, como setState().

Desta forma, é possível verificar que o GetX e Obx exigem, mesmo que seja normal, um pouco mais de processamento do que o GetBuilder, pois ficam observando alguma alteração em suas streams.

Vamos aos códigos para verificar como tudo isso funciona na prática.

import 'package:flutter/material.dart';
import 'package:get/get.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GetBuilderState(),
    );
  }
}

Colocamos o Get antes de MaterialApp para o GetX gerenciar nossas rotas. Criar um Controlador:

class Controller extends GetxController {
  var items = [].obs;
  int get count => items.length;

  int valor = 0;

  alterarValor(int num) {
    valor = num;
  }
}

Vejamos que a primeira variável é um tipo observável items e a segunda um tipo comum valor. 

class GetBuilderState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetBuilder"),
      ),
      body: Center(
        child: Column(
          children: [
            GetBuilder(
                init: Controller(),
                builder: (controller) {
                  return Column(
                    children: [
                      Text("GetBuilder:"),
                      Text('${controller.valor}'),
                      RaisedButton(
                        child: Text("Alterar Valor"),
                        onPressed: () {
                          controller.alterarValor(10);
                        },
                      )
                    ],
                  );
                }),
            RaisedButton(
              child: Text("Alterar Valor"),
              onPressed: () {
                Get.to(GetxAndObxState());
              },
            )
          ],
        ),
      ),
    );
  }
}

Por conta de nossa variável valor ser comum e não observável utilizaremos o GetBuilder. Porém, para que se mude o valor desta variável, como vimos na introdução deste artigo, temos que fazer de forma manual, basta usar o update(), então iremos adicionar essa função no nosso controlador:

class Controller extends GetxController {
  var items = [].obs;
  int get count => items.length;

  int valor = 0;

  alterarValor(int num) {
    valor = num;
    update();
  }
}

Agora, vamos trabalhar com o GetX e Obx, para isso, teremos que inicializar nosso controlador:

final c = Get.put(Controller());

Vejamos como ficará:

class GetxAndObxState extends StatelessWidget {
  final c = Get.put(Controller());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX e Obx"),
      ),
      body: Column(
        children: [
          GetX(
            builder: (controller) {
              return Expanded(
                child: ListView.builder(
                  itemCount: controller.count,
                  itemBuilder: (BuildContext context, int index) {
                    return new Text(controller.items[index]);
                  },
                ),
              );
            },
          ),
          Obx(() => Text('${c.count}')),
          RaisedButton(
            child: Text("Alterar Valor"),
            onPressed: () {
              c.items.add('FlutterBrasil');
            },
          )
        ],
      ),
    );
  }
}

Utilizamos no código acima tanto o GetX quando o Obx, porém eles só podem retornar um observável, caso contrário irá retornar um erro.

Só para não esquecer, se você está trabalhando com variáveis comuns, int, String você deve user GetBuilder, porém se está trabalhando com observáveis, .obs, deve usar GetX e Obx.

Agora deu para entender a diferença entre ambos?