Flutter: How to smooth PageView onPageChanged animation

Question

If you follow the example codes found online, when building a scaffold, under body, you can have:

body: PageView(
    controller: _pageController,
        onPageChanged: (index) {
        setState(() => _selectedPage = index);
    },
    children: <Widget>[
        Container(color: Colors.pink,),
        Container(color: Colors.cyan,),
        Container(color: Colors.deepPurple,),
    ],
)

When you are on the page that shows the color pink and you swipe left, a page of color cyan comes from the right. However, right now I extended it for my usecase and now have:

body: PageView(
    controller: _pageController,
        onPageChanged: (index) {
        setState(() => _selectedPage = index);
    },
    children: <Widget>[
        Container(child: _pageOptions[_selectedPage],),
        Container(child: _pageOptions[_selectedPage],),
        Container(child: _pageOptions[_selectedPage],),
    ],

)

The "_pageOptions[]" is defined as follows:

final _pageOptions = [
    Page1(),
    Page2(),
    Page3(),
];

My issue is as follows: When, for example, you are on Page1 and swipe left, Page2 is supposed to come from the right and become the new page you are looking at. However, when you swipe from Page1 to Page2 slowly, you can see that the page that is coming from the right is Page1 rather than Page2. Up until you swipe halfway that the incoming page becomes Page2. However, by this point, the page that you are swiping away into the left side (which is supposed to be Page1) becomes Page2 as well.

How can I fix this? Page1() and the rest return a widget. For example, class Page1 is coded as:

class Page1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(25.0),
        child: Text('Page1', style: TextStyle(fontSize: 36.0),)
    );
    }
}

Now that I've posted this question, I've seen that the containers have the same widgets as children. I'll see to changing the _pageOptions[] index values. If this fixes it, I'll close the question — IntiM, May 10 '20 at 14:56

score 0 · Answer 1 · answered May 10 '20 at 15:02

In:

children: <Widget>[
    Container(child: _pageOptions[_selectedPage],),
    Container(child: _pageOptions[_selectedPage],),
    Container(child: _pageOptions[_selectedPage],),
],

the children are changing depending on _selectedPage which changes when onPageChanged.

If you are in Page1, _selectedPage = 1 and thus all children are _pageOptions[1] which are Page1. Change code to:

children: <Widget>[
    Container(child: _pageOptions[0],),
    Container(child: _pageOptions[1],),
    Container(child: _pageOptions[2],),
],

Flutter: How to smooth PageView onPageChanged animation

1 Answers1