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?