Flutter change int state by get-CodePudding

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)

CodePudding user response：

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