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

Issue

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?

Solution

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 (...)
 }
}

Answered By – Joy Terence

Answer Checked By – Senaida (FlutterFixes Volunteer)