GetX doesn't support passing observables to StatefulWidget?

[ogeburt]

I designed my own TapAndHoverButton (a stateful widget) and pass a color to it. On tap, the color of the button should change but it doesn't. This mini example shows that the color of the Text changes as expected but the button color doesn't. Why?

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

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.put(HomeController());
  }
}

class HomeController extends GetxController {
  RxBool colorKey = true.obs;

  void onPressed() {
    colorKey.value = !colorKey.value;
  }
}

void main() {
  runApp(GetMaterialApp(
    initialRoute: '/',
    getPages: [GetPage(name: '/', page: () => Home(), binding: HomeBinding())],
  ));
}

class Home extends GetView<HomeController> {
  final Map<bool, Color> colorMap = <bool, Color>{
    true: Colors.red,
    false: Colors.blue,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tap and Hover Button'),
      ),
      body: Obx(() => Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TapAndHoverButton(
                    child: Icon(Icons.add),
                    color: colorMap[controller.colorKey]!,
                    hoverChild: Icon(Icons.clear),
                    onTap: () => controller.onPressed(),
                    width: 50,
                  ),
                  Text(
                    'Color',
                    style: TextStyle(
                      color: colorMap[controller.colorKey]!,
                    ),
                  )
                ],
              ),
            ],
          )),
    );
  }
}

class TapAndHoverButton extends StatefulWidget {
  const TapAndHoverButton(
      {this.child,
      this.hoverChild,
      required this.color,
      this.onTap,
      this.width});

  final Widget? child;
  final Widget? hoverChild;
  final Color color;
  final void Function()? onTap;
  final double? width;

  static final height = 28.0;

  @override
  State<TapAndHoverButton> createState() => _TapAndHoverButtonState(
        child: child,
        hoverChild: hoverChild,
        color: color,
        onTap: onTap,
        width: width,
        height: height,
      );
}

class _TapAndHoverButtonState extends State<TapAndHoverButton> {
  _TapAndHoverButtonState({
    this.child,
    this.hoverChild,
    required this.color,
    this.onTap,
    this.width,
    required this.height,
  })  : widgetColor = color,
        childWidget = child;

  final Widget? child;
  final Widget? hoverChild;
  final Color color;
  final void Function()? onTap;
  final double? width;
  final double height;

  Color widgetColor;
  Widget? childWidget;

  void _onEnter(PointerEvent event) {
    setState(() {
      widgetColor = Color.alphaBlend(Colors.black.withOpacity(0.25), color);
      childWidget = hoverChild ?? child;
    });
  }

  void _onExit(PointerEvent event) {
    setState(() {
      widgetColor = color;
      childWidget = child;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      onExit: _onExit,
      onEnter: _onEnter,
      child: GestureDetector(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 100),
          padding: EdgeInsets.fromLTRB(5, 2.5, 5, 2.5),
          height: height,
          width: width,
          child: Center(
            child: childWidget,
          ),
          decoration: BoxDecoration(
            color: widgetColor,
            borderRadius: BorderRadius.circular(5.0),
          ),
        ),
        onTap: onTap,
      ),
    );
  }
}

[BlackCatDev-IO]

Your TapAndHoverButton is not using the color value that you're passing in. You don't need to manually pass in any of those variables into the createState() override. Once inside _TapAndHoverButtonState you access all variables that you're trying to pass in with widget.yourVariable. For the color to change in your button all you need to do is set the color in the BoxDecoration to widget.color and you'll get expected behavior from GetX because it is definitely rebuilding when it's supposed to.

Also if you wanted to you could lose the colorMap entirely and just pass in controller.colorKey.value ? Colors.red : Colors.blue to the color properties.