Search code examples
flutterflutter-pageview

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


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