Flutter PageView itemCount change causes PageController jumpToPage to jump to wrong page

Question

I have one PageView that handles three Lists of data that are different lengths. List one has one item, list 2 has 2 items and list 3 has 3 items. Here is what is happening.

PageView gets built with list 1 itemCount = 1 and page 0.
PageView gets built with list 2 itemCount = 2 and page 0.
PageView gets built with list 3 itemCount = 3 and page 2.
PageController.jumpToPage(2) gets called.
Page 2 gets displayed and then scrolls down automatically to page 1. (seems to think there is no page 2 and scrolls back to the last page when itemCount was 2)

I have tried calling jumpToPage(2) after the PageView gets built using WidgetsBinding.instance.addPostFrameCallback(...) in the build method thinking that PageController was reading the old itemCount = 2 value somewhere. That did not work.

How do I get jumpToPage(2) to work based on the new PageView itemCount = 3 ?

Here is my code. I have tried to keep it as simple as possible.

import 'package:flutter/material.dart';

class HomePage2 extends StatefulWidget {
  @override
  _HomePage2State createState() => _HomePage2State();
}

class _HomePage2State extends State<HomePage2> {
  List<Map<String, dynamic>> following = [
    {'title': 'Page 1 of 1 following', 'color': Colors.purple.value},
  ];
  List<Map<String, dynamic>> suggested = [
    {'title': 'Page 1 of 2 suggested', 'color': Colors.purple.value},
    {'title': 'Page 2 of 2 suggested', 'color': Colors.red.value},
  ];
  List<Map<String, dynamic>> trending = [
    {'title': 'Page 1 of 3 trending', 'color': Colors.purple.value},
    {'title': 'Page 2 of 3 trending', 'color': Colors.red.value},
    {'title': 'Page 3 of 3 trending', 'color': Colors.orange.value},
  ];

  String currentFeed = 'suggested';

  int followingCurrentPosition = 0;
  int suggestedCurrentPosition = 0;
  int trendingCurrentPosition = 0;

  PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    WidgetsBinding.instance.addPostFrameCallback(
        (_) => _pageController.jumpToPage(getCurrentFeedPosition()));
    return Scaffold(
      body: PageView.builder(
        itemCount: getCurrentFeed().length,
        scrollDirection: Axis.vertical,
        controller: _pageController = PageController(viewportFraction: 1),
        itemBuilder: (context, index) {
          print('PageView itemBuilder');
          return Container(
            color: Color(getCurrentFeed()[index]['color']),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: Text(getCurrentFeed()[index]['title']),
                ),
                Center(
                  child: RaisedButton(
                    onPressed: () => changeCurrentFeed(),
                    child: Text('Change Feed'),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  void changeCurrentFeed() {
    setState(
      () {
        if (currentFeed == 'following') {
          followingCurrentPosition = _pageController.page.floor();
          currentFeed = 'suggested';
        } else if (currentFeed == 'suggested') {
          suggestedCurrentPosition = _pageController.page.floor();
          currentFeed = 'trending';
        } else {
          trendingCurrentPosition = _pageController.page.floor();
          currentFeed = 'following';
        }
      },
    );
  }

  List<Map<String, dynamic>> getCurrentFeed() {
    if (currentFeed == 'following') {
      return following;
    } else if (currentFeed == 'suggested') {
      return suggested;
    } else {
      return trending;
    }
  }

  int getCurrentFeedPosition() {
    if (currentFeed == 'following') {
      return followingCurrentPosition;
    } else if (currentFeed == 'suggested') {
      return suggestedCurrentPosition;
    } else {
      return trendingCurrentPosition;
    }
  }
}

score 0 · Answer 1 · answered Sep 15 '20 at 15:39

This behavior seems to be caused by PageView itemBuilder being called more than once per build. Others have had this issue but I was not able to find a solution. I ended up using a separate PageView for each list instead of trying to use one PageView with multiple lists. That fixed it for me.

Flutter PageView itemCount change causes PageController jumpToPage to jump to wrong page

1 Answers1