Scrolling issue with GoogleMap widget in BottomNaviationBar with PageView for persisting state

Issue

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: _children,
        controller: pageController,
        onPageChanged: onPageChanged,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        backgroundColor: Colors.grey[100],
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.navigation),
            label: 'Track',
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.settings),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          )
        ],
      ),
    );
  }

  void onTabTapped(int value) {
    pageController.jumpToPage(value);
  }

  void onPageChanged(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

Hi, I’ve attached my build method of my stateful widget of my simple flutter app in the code image below. I am using a bottom navigation bar and want my widgets to persist in the tree when switching between the bottom pages. Thus, I implemented AutomaticKeepAliveMixin along with the page controller and page body to make the states persist. now my problem is,

1. my first page is a google maps widget that shows tracking information. Due to pageview, when I try to look at a different location on map by swiping in the direction of the destination, sometimes the right to left swipe on map causes page view to trigger page switch
2. If I remove pageview to make the map work as expected, the persisting of states is gone because as per the documentation, I should have the body of my scaffold wrapped in a PageView widget for the AutomaticKeepAliveMixin work.

Now my question is how do I achieve something that does both? I am stuck. I’ve tried to implement other state persisting techniques like indexed stack and pagekeystorage but no luck 🙁 Any help would be appreciated! Thank you!

Vertical scrolling works but when I try to scroll sideways in my map, the pageview takes precendence and just scrolls to new page like this:

Solution

PageView has a physics property that you can use to control how it scrolls in response to user swiping on it. If you assign NeverScrollableScrollPhysics(), it won’t be scrollable.

Answered By – spkersten

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)