PageView rebuilding while animateToPage is in progress

Question

I'm creating a social media feed where each post is an image of a different size. The user can swipe right to like, left to dislike, up to skip to the next post, or down to go back. To do that, I'm using a Dismissible widget within a PageView, where each page contains a post/image. I used "animateToPage" in the Dismissible to automatically animate to the next page once the user swipes right or left.

The problem is that when the PageView animates to the next page, the image that was dismissed suddenly reappears on the previous page while the animation is happening. I want it to reappear only if the user swipes down to go back to the previous post, but not while the PageView is animating.

Here's a video showing what is going wrong

And here's an animation showing what I need

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
  int pageIndex = 0;

  PageController _pageController = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {

List images = [
  'assets/1.jpg', 'assets/2.jpg', 'assets/3.jpg', 'assets/4.jpg', 'assets/5.jpg',
];

return MaterialApp(
  home: Scaffold(
    backgroundColor: Color.fromRGBO(250, 250, 250, 1),
    body: LayoutBuilder(
      builder: (context, constraints) => PageView.builder(
          controller: _pageController,
          itemCount: 5,
          scrollDirection: Axis.vertical,
          itemBuilder: (context, index) {
            return images.map((image) => Dismissible(
              onResize: () {
                setState(() {
                  _pageController.animateToPage(index+1, duration: Duration(milliseconds: 300), curve: Curves.ease);
                });
              },
              onDismissed: (direction) {},
              key: UniqueKey(),
              child: Container(
                padding: const EdgeInsets.all(20.0),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.symmetric(vertical: 100),
                    child: Container(
                      alignment: Alignment.center,
                      child: Image(
                          image: AssetImage(image)
                      ),
                    ),
                  ),
                ),
              ),
            ))
                .toList()[index];
          }
      ),
    ),
  ),
);
  }
}

I assume this is happening because PageView is rebuilding the other pages while the animation is in progress. I'm still a beginner in Flutter and wasn't able to find a solution. Any ideas of how to fix this?

Answer 1

Everytime setState is called, the widget is redrawn. Try to put your animated code outside of setState method.

Documentation