Get the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated

Question

i got this error If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers and this is my code

 @override
  Widget build(BuildContext context) {
    bool expanded =false;
    return  Scaffold(
      backgroundColor: Colors.grey.shade200,
      body:Obx(() => PageView.builder(
        pageSnapping: true,
        itemCount: 5,
        itemBuilder: (context, index) {
          return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 26.0),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  AnimatedPositioned(
                      duration: Duration(milliseconds: 500),
                      bottom: expanded?150:100,

                      child: GestureDetector(
                          onPanUpdate: (details) {
                            print('object');
                            print(details.delta.dy);
                            if(details.delta.dy<0){
                                expanded=true;
                            }else if(details.delta.dy>0){
                                expanded=false;}
                          },
                          child: Image.network('https://metroparkstoledo.com/media/7672/home-rentals-700x880.jpg',height:MediaQuery.of(context).size.height*.6))),
                ],
              ));
        },),)
    );
  }

i want to update bool varibale expanded using GestureDetector

Answer 1

In the given code example, the

expanded

variable is not marked as an observable variable, so the error occurs. For debugging, you can make the expanded variable observable with the obs extension provided by GetX.

    @override
Widget build(BuildContext context) {
  final RxBool expanded = false.obs; // Make expanded an observable boolean
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    body: Obx(() => PageView.builder(
      pageSnapping: true,
      itemCount: 5,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 26.0),
          child: Stack(
            alignment: Alignment.center,
            children: [
              AnimatedPositioned(
                duration: Duration(milliseconds: 500),
                bottom: expanded.value ? 150 : 100, // Access the value of the observable
                child: GestureDetector(
                  onPanUpdate: (details) {
                    print('object');
                    print(details.delta.dy);
                    if (details.delta.dy < 0) {
                      expanded.value = true; // Update the value of the observable
                    } else if (details.delta.dy > 0) {
                      expanded.value = false; // Update the value of the observable
                    }
                  },
                  child: Image.network('https://metroparkstoledo.com/media/7672/home-rentals-700x880.jpg', height: MediaQuery.of(context).size.height * 0.6),
                ),
              ),
            ],
          ),
        );
      },
    ),
    );
  }

}