How to use Switch Toggle in GetX flutter ? | Switch Toggle in GetX 

Toggle in Flutter

Toggle in Flutter are very common and use for performing various type of operation such as ON/OFF , Allow/Not Allowed many more options. There are various techniques through which we can implemented using setState, notifyListeners and Obx

In this article we implement Toggle through GetX, for this we need to use an instance of the GetxController class to manage the state of the toggle.

Below are the steps to implement it through GetX

We use the Switch widget in Flutter to create a toggle switch, and Obx to update the state of the switch based on a value in our GetX controller.

Note: The below example will work only if you have used GetX package in your project. To know more about how to setup GetX.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_instance/get_instance.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyScreen(),
    );
  }
}
//Here we use GetxController
class MyController extends GetxController {
  var switchValue = false.obs;// by default seitchValue is false

  void onSwitchValueChanged(bool value) {
    switchValue.value = value;
  }
}
class MyScreen extends StatelessWidget {
  final MyController myController = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX example'),),
      body: Column(
        children: [
          SizedBox(height: 100,),
          Obx(() => Center(
            child: Switch(
              value: myController.switchValue.value, //Based on current value it shows true /false
              onChanged: myController.onSwitchValueChanged,// here onSwitchValueChanged react based on the user change the toggle
            ),
          )),
        ],
      ),
    );
  }
}

In the above example, we define a MyController class that extends GetXController and has an observable switchValue variable, by default then we define an onSwitchValueChanged function that sets the switchValue variable, it will change when user change the toggle state in UI.
The onChanged parameter of the Switch widget is set to myController.onSwitchValueChanged, which updates the value of switchValue when the switch is toggled. This way, the Switch widget will automatically update the state of the switchValue variable either true or false.

If you face any issue, please comment below, we will reply soon