how to only render pageView pages after the sliding animation is over

4
votes

in my app I use heavy pages that have a lot to show, images to render and more, when sliding what happens is that my sliding animation will stagger while my page is being rendered mid swipe, I want to minimize this effect.

I want to have the page, by default, display a certain widget(preferably a single container with a bg color, or a shimmer, or any placeholder I can choose), and then when the sliding animation is finished the data which is being computed in the background will appear. like this, I won't have to see the janky animation when swiping.

is there any way of doing this, other than having to manually use streambuilders to listen for the pageView controller?

2
flutterdartpageviews
Please share the code for PageView! – ASAD HAMEED

2 Answers

1
votes

you can try this, preload_page_view, pageview outside screen will be preloaded~

[EDITED] Alternative, What if you only put context When index == onchangedIndex, something like,

int _currentIndex = 0;

PageView.builder(
  onPageChanged: (index){
    //Even you can use here Future.delay to delay a second after onPageChanged, if loading your content is too quick
                              setState(() {
                                _currentIndex = index;
                              });
                            },
  itemBuilder: (context, index){
    return _currentIndex == index ? //your content : Container(/*with background color*/);
}
0
votes

Add a delay to the Pages, equal to the animation duration of PageView.

1.Create a variable,

final duration = Duration(milliseconds: 600);

2.Add delay to the Page(),

Future.delayed(duration, () => Page() );

3.Animate to a different page,

_pageController.animateToPage(
  1,
  duration: duration,
  curve: Curves.easeInOut,
);