How to change the value of 'selectedIndex' from one dart file to the other dart file using flutter GetX?

Issue

I have my custom Bottom Navigation Bar in one dart file, i.e. bottomnavbar.dart. And I have list of multiple screens(or pages) in my home.dart file. I am using an .obs variable to store my selected index value.

code from home.dart file:

var selectedIndex = 0.obs;
final screen = [
  const Page1(),
  const Page2(),
  const Page3(),
  const Page4(),
  const Page5(),
];
...
body: screen[selectedIndex.value],
...

Even if I change the variable value (like 0.obs to 1.obs), page not changing, why??

next of, In my bottomnavbar.dart file, I have extracted and made a widget for my nav bar 'items'. And I have tried to wrap the item widget with Obx:

Widget bnbItems(String image, int index, double height) {
return Obx(
  () => InkWell(
    splashColor: Theme.of(context).brightness == Brightness.dark
        ? Colors.white.withOpacity(0.5)
        : Colors.pink.withOpacity(0.5),
    enableFeedback: true,
    onTap: () => setState(() {
      selectedIndex.value = index;
      _controller.animateTo(index / 4);
      // print(selectedIndex);
    }),
    child: Container(
      alignment: Alignment.center,
      width: 50,
      height: 50,
      child: Padding(
        padding: const EdgeInsets.only(top: 5.0),
        child: Image.asset(
          image,
          height: height,
        ),
      ),
    ),
  ),
);}

and I am getting this error:

[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.
      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 suitable for an update 
      (example: GetX => HeavyWidget => variableObservable).
      If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.

Can anyone give me the solution with some code and explanation? And also how will I be able to set a particular screen as the initial screen?

Solution

Replace on tap with this code

onTap: () {
   selectedIndex.value = 1; // page index you want to view
},

then remove Obx(()=> on bnbItems widget

Widget bnbItems(String image, int index, double height) {
  return InkWell(
    splashColor: Theme.of(context).brightness == Brightness.dark
        ? Colors.white.withOpacity(0.5)
        : Colors.pink.withOpacity(0.5),
    enableFeedback: true,
    onTap: () {
       selectedIndex.value = 1; // page index you want to view
    },
    child: Container(
      alignment: Alignment.center,
      width: 50,
      height: 50,
      child: Padding(
        padding: const EdgeInsets.only(top: 5.0),
        child: Image.asset(
          image,
          height: height,
        ),
      ),
    ),
);}

then use Obx(()=> wrapper on the body’s widget

body: Obx(() => screen[selectedIndex.value]),

Answered By – Paulo

Answer Checked By – Mildred Charles (FlutterFixes Admin)