Flutter Pageview loses index on orientation change

Question

There have been similar issues recently, but they have been resolved and closed on GitHub. As I'm a newbie, I could be missing something here. After an orientation change, the page index reverts to zero, but the selected BottomNavigationBarItem is as it was. Here page "ONE" is being displayed, but tab "FOUR" was selected prior to rotating the device

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pageview Orientation Bug',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _page = 0;
  PageController _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: OrientationBuilder(
        builder: (context,orientation) {
          return orientation == Orientation.portrait
           ? Column(
            children: [
              Expanded(child: Container(color: Colors.grey)),
              Expanded(
                child: PageView(
                  controller: _controller,
                  children: [Text("ONE"),  Text("TWO"),Text("THREE"), Text("FOUR"),],
                ),
              ),
            ],
          )
          
         :  Row(
            children: [
              Expanded(child: Container(color: Colors.grey)),
              Expanded(
                child: PageView(
                  controller: _controller,
                  children: [Text("ONE"),  Text("TWO"),Text("THREE"), Text("FOUR"),],
                ),
              ),
            ],
          );
        }
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _page,
        onTap: (page) {
          setState(() {
            _page = page;
          });
          _controller.jumpToPage(page);
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_bike),
            label: "ONE",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_boat_outlined),
            label: "TWO",
           ),
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_car),
            label: "THREE",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.directions_run),
            label: "FOUR",
          ),
        ],
      ),
    );
  }
}

Answer 1

Add final Key _key = GlobalKey(); to HomeState and pass key to both PageView constructors. This will tell Flutter that it is the same PageView and does needs to be moved, not replaced when the orientation changes.

As your code is written, a new PageView element is created every time without maintaining state, thus using the PageController's initialValue when built.

Unrelated Suggestion

PageView's are scrollable, and as your code is written, if a user scrolls, it will not update the BottomNavigationBar. Below are a couple of approaches depending on the user experience you are after.

PageView(
  // use never scrollable physics if you only want the user to change pages via the nav bar
  physics: NeverScrollableScrollPhysics(),
  // use onPageChanged to sync scroll and nav bar
  onPageChanged: (page) {
    // remove this line from nav bar onTap
    setState(() => _page = page);
  },
  key: _key,
  controller: _controller,
  children: [
    Text("ONE"),
    Text("TWO"),
    Text("THREE"),
    Text("FOUR"),
  ],
),