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",
          ),
        ],
      ),
    );
  }
}

Lee3 · Accepted Answer · 2020-11-25T04:32:07.893

4

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"),
  ],
),

edited Nov 25 '20 at 04:32

answered Nov 24 '20 at 19:51

Lee3

2,882
1
11
19

Thanks, the initialPage could be set in the controller to 0, but PageView does not seem to have an initial page, but it does have a controller, will try. – user2885978 Nov 24 '20 at 20:03
Ah yes, my bad. That was just my first thought, but I don't think it is going to work. I will update with a working solution and explanation asap. – Lee3 Nov 24 '20 at 20:42
That looks like the key insight, as the second paragraph in your answer - a new `PageView` created. Many thanks. Will try. – user2885978 Nov 25 '20 at 10:17
Your suggestion to provide a `GlobalKey()` to both `PageView` constructors is not something I would have thought of even trying, feels like playing a trick on the framework, but I've learnt something useful. Thanks. – user2885978 Nov 25 '20 at 18:34
1

Glad I could help. This is actually exactly one of the purposes of `GlobalKey`s. Check out this video: https://www.youtube.com/watch?v=kn0EOS-ZiIc for an intro on Keys in Flutter. It's a nice intro to the topic and will provide a little more understanding of how Widgets and Keys work. – Lee3 Nov 26 '20 at 02:36
The video says it for me: _"They can be used to preserve the users scroll location"_ How did I miss that? Thanks again. – user2885978 Nov 26 '20 at 15:59

Flutter Pageview loses index on orientation change

1 Answers1