How can I change the color state of a button with GetX

Question

I just started learning to use GetX in Flutter for some state management and performing a few experiences. Now I'm having a problem on updating successfully the button color state when the form fields aren't empty. I could just to this easily with a setState() and get what I wanted. Am I missing something here?

home_page.dart:

class HomePage extends GetWidget<HomeController> {

Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 20,
            ),
            const AppTextField(),
            const SizedBox(height: 16),
            gb.passwordController.text.isNotEmpty &&
                    gb.confirmPasswordController.text.isNotEmpty
                ? Obx(
                    () => AppButton(
                      onPressed: () {
                        log('${gb.passwordController.text} ${gb.confirmPasswordController.text}');
                        gb.passwordController.text !=
                                gb.confirmPasswordController.text
                            ? Get.snackbar('Error', 'Passwords do not match')
                            : Get.snackbar('Success', 'Passwords match');
                      },
                      text: "Login".toUpperCase(),
                    ),
                  )
                : AppButton(
                    color: Colors.grey,
                    onPressed: () {},
                    text: "Login".toUpperCase(),
                  ),
          ],
        ),

home_controller.dart

class HomeController extends GetxController {
  HomeController({this.provider});
  final HomeProvider? provider;
    
  final btn = AppButton(onPressed: () {}, text: 'Login'.toUpperCase()).obs;

  RxBool formField = false.obs;

}

I just need the color to change. The only examples I find is to change values from variables.

Answer 1

Here's a complete example application that uses GetxController and GetWidget where a button is enabled only when the TextField has text and also a container that changes color according to that. Maybe it helps you understand it:

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

void main() {
  runApp(
      GetMaterialApp(initialBinding: InitialBindings(), home: const MainApp()));
}

class MainApp extends GetWidget<MainAppController> {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: controller.textEditingController,
          ),
          Obx(() => ElevatedButton(
              onPressed: controller.enableButton.value ? () {} : null,
              child: const Text("Button"))),
          Obx(() => Container(
                width: 100,
                height: 100,
                color:
                    controller.enableButton.value ? Colors.green : Colors.red,
              ))
        ],
      ),
    );
  }
}

class InitialBindings extends Bindings {
  @override
  void dependencies() {
    Get.create(() => MainAppController());
  }
}

class MainAppController extends GetxController {
  TextEditingController textEditingController = TextEditingController();

  RxBool enableButton = false.obs;

  @override
  void onInit() {
    super.onInit();
    textEditingController.addListener(() {
      enableButton.value = textEditingController.text.isNotEmpty;
    });
  }

  @override
  void onClose() {
    textEditingController.dispose();
    super.onClose();
  }
}