How to access and change another widgets pageControllers index from parent widget?

Question

I am trying to nest a PageView inside a PageView and access the second PageView's controller.

The structure of the parent looks like this :

Scaffold(
      appBar: buildAppBar(context),
      body: PageView(
        children: [
          Column(                   //this column represents the first view of this pageview
            children: [
              Expanded(
                flex: 3,
                child: buildPreviewWidget(selection, _buildCropPreview),
              ),
              Expanded(
                flex: 2,
                 child: MediaGrid(
                         allowMultiSelection: multiSelectable,
                         collection: allCollection),
              ),
            ],
          ),
          CameraScreen() //this is the second view of the pageview and it also has a pageview with 2 children, i want to access its pageController
        ],
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );

and this is the bottomNavigationBar :

 BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      currentIndex: pageIndex,
      items: [
        const BottomNavigationBarItem(
          label: "Gallery",
          icon: SizedBox.shrink(),
        ),
        const BottomNavigationBarItem(
          label: "Photo",
          icon: SizedBox.shrink(),
        ),
        const BottomNavigationBarItem(
          label: "Video",
          icon: SizedBox.shrink(),
        ),
      ],
      onTap: (index) {
       //if index == 0, go to this pageViews first page
       //if index == 1, go to this pageviews second page (CameraScreen)  and to its first page
       //if index == 2, go to this pageviews second page (CameraScreen) and to its second page
      },
    );
  }

As you can see, the parents pageView only has 2 children but the bottomNavigationbar has 3 items.

I have written my desired functionality as pseudocode in the onTap() of the bottomNavigationBar

What I have tried

I tried to make the CameraScreens pageControllers index a required property so I can rebuild it with the desired index but that didn't work.

I also tried to implement notifications but that didn't work either. Probably because the receiver has to be active?

Is there an easy way to do this?

No, I tried to declare it in the class. Can you tell me how I set a state variable from another screen? — Christian, Nov 17 '20 at 17:27
It's the usual steps involved in creating a statefulwidget, just that you need to supply the value from this parent page and set the value of the state with the received value. As a reference, you can use the first snipper as part of this [answer](https://stackoverflow.com/a/58767810/8257908) — Joy Terence, Nov 17 '20 at 18:04
Oh man, I don't know why I didn't remember this. I did this a 1000 times by now... Thanks for helping me out! — Christian, Nov 18 '20 at 12:50
glad I could help :) just posted an answer as well so that it could help others when they come here. — Joy Terence, Nov 18 '20 at 16:56

score 0 · Accepted Answer · answered Nov 18 '20 at 16:56

The OP's approach to pass an index was one of the right approach but since it was not a Stateful widget, it did not work out. As discussed in comments, changing this to something like below helped to achieve the desired effect:

class CameraScreen extends StatefulWidget {
 final int index;
 const CameraScreen(this.index);

 @override
 _CameraScreenState createState() => _CameraScreenState ();
}

class _CameraScreenState extends State<CameraScreen > {
 @override
 Widget build(BuildContext context) {
   // here, access the index as widget.index
   return (...)
 }
}

How to access and change another widgets pageControllers index from parent widget?

1 Answers1