Toggle Switch not changing position after app language is changed using GETX package Flutter-CodePudding

I have a toggle switch in my app, where the user clicks to change language. I am using the toggle_switch package in my view. My view looks like this :

    class Welcome extends GetView<WelcomeController> {
      final WelcomeController _controller = Get.put(WelcomeController());
      Welcome({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        var _toggleValue = 0.obs;
 
        return Scaffold(
          body: Obx(() => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Toggle Value : ${_controller.selectedLanguage.value}'),
              ToggleSwitch(
                minWidth: 90.0,
                cornerRadius: 20.0,
                activeBgColors: [[Colors.cyan], [Colors.redAccent]],
                activeFgColor: Colors.white,
                inactiveBgColor: Colors.grey,
                inactiveFgColor: Colors.white,
                totalSwitches: 2,
                labels: ['English', 'Bangla'],
                onToggle: (index) {
                  print('switched to: $index');
                  changeLanguage(index);
                },
              ),
            //some other widgets
            ],
          ))
        );
      }
    
      void changeLanguage(int value) {
        if (value == 0) {
          _controller.changeLang('en');
        } else {
          _controller.changeLang('bn');
        }
      }
    
    }

My controller has the changeLang function which does the following:

class WelcomeController extends GetxController{
  var selectedLanguage = Get.locale!.languageCode.obs;

  void changeLang(String lang) {
    Locale locale = Locale(lang);
    Get.updateLocale(locale);
    selectedLanguage.value = lang;
  }
}

If i use the above function inside the toggles onToggle function, the toggle position does not move to the current index selected and also the color does not change but the language is changed whenever I click on English or Bangla. What am I doing wrong?

CodePudding user response：

To get Switch to work , move the setState(() {}) outside of Switch in a callback function .

// Switch  Widget
    Switch( value: _toggleState,
            onChanged: _attemptChange,
            ),
    
//Callback
 void _attemptChange(bool newState) {
    setState(() {
      _toggleState = newState;
      newState ? _switchCase = 'ON' : _switchCase = 'OFF';
    });

or u can use CupertinoSwitch it has value property


set variable in your controller


              CupertinoSwitch(
                        value: controller.boolVal,
                        onChanged: (bool value) {
                 /// change your variable value in controller       
                  }
                );

CodePudding user response：

First assign toggleValue in controller like

enter code here

Then add line in ToggleSwitch as below,

initialLabelIndex: _controller.toggleValue.value

Add update method as below

void  changeLanguage(int value) {
   _controller.toggleValue.value = value;
   if (value == 0) {
     _controller.changeLang('en');
   } else {
     _controller.changeLang('bn');
   }
}