Flutter change int state by get - flutter

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