Flutter change int state by get

Question

I have a simple website menu on clicking it's just changing int value and on the basis of int value it's changing the font color.

I don't want to use setState instead of it I need to use getX I am doing it like this

class SideMenu extends StatefulWidget {
  const SideMenu({Key? key}) : super(key: key);
  @override
  _SideMenuState createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  TileColorX tcx = Get.put(TileColorX());

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            child: Center(
                child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Dashboard ',
                    style: Theme.of(context).textTheme.caption!.copyWith(
                        color: Colors.white,
                        fontSize: 21,
                        fontWeight: FontWeight.w700)),
                Text('Dashboard',
                    style: Theme.of(context).textTheme.caption!.copyWith(
                        color: primaryColor,
                        fontSize: 21,
                        fontWeight: FontWeight.w700)),
              ],
            )),
          ),
          DrawerListTile(
            title: "Dashboard",
            svgSrc: "assets/icons/menu_dashbord.svg",
            control: 0,
            press: () {
              tcx.toggle(0);
            },
          ),
          DrawerListTile(
            title: "POS and Invoices",
            svgSrc: "assets/icons/menu_tran.svg",
            control: 1,
            press: () {
              tcx.toggle(1);
            },
          ),
        ],
      ),
    );
  }
}

class DrawerListTile extends StatelessWidget {
  DrawerListTile({
    Key? key,
    // For selecting those three line once press "Command+D"
    required this.title,
    required this.svgSrc,
    required this.press,
    required this.control,
  }) : super(key: key);

  final String title, svgSrc;
  final VoidCallback press;
  final int control;
  TileColorX tcx = Get.put(TileColorX());

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: press,
      horizontalTitleGap: 0.0,
      leading: SvgPicture.asset(
        svgSrc,
        color: control == tcx.selectedIndex.value
                ? Colors.white
                : Colors.white54,
        height: 16,
      ),
      title: Text(
        title,
        style: TextStyle(
            color: control == tcx.selectedIndex.value
                ? Colors.white
                : Colors.white54),
      ),
    );
  }
}

I have a class for toggle

class TileColorX extends GetxController {
  RxInt selectedIndex = 0.obs;    
  void toggle(int index) => selectedIndex.value = index;    
}

But it's not changing the state (mean not changing my font color)

Answer 1

You need to use Obx on that widget you want to see change. This will work

return Obx(() => ListTile(
      onTap: press,
      horizontalTitleGap: 0.0,
      leading: SvgPicture.asset(
        svgSrc,
        color: control == tcx.selectedIndex.value
            ? Colors.white
            : Colors.white54,
        height: 16,
      ),
      title: Text(
        title,
        style: TextStyle(
            color: control == tcx.selectedIndex.value
                ? Colors.white
                : Colors.white54),
      ),
    ));
  

I don't know more detailed answer to what Obx exactly did but it will work for you :D