How to Rebuild a page inside an IndexedStack

Question

I have two pages, one where you check out a stack of movies, where you can like the movie on the top of the stack and move to the next one, PAGE A, and a second one that presents the liked movies in a list PAGE B.

Every time that I like or dislike a movie, I can go to PAGE B and I should be able to see the movies that I've liked, but but because I'm using an IndexedStack, the PAGE B isn't rebuilt and therefore, doesn't show the updated list.

Is there a way to rebuild the PAGE B when I re-enter it?

Here's what I have:

class HomePage extends StatefulWidget {
  //
  static String id = 'home';
  //
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //
  List<Widget> _pages = [MovieStackPage(), LikedMoviesPage()];
  int pageIndex = 0;
  //
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: IndexedStack(
          index: pageIndex,
          children: _pages,
        ),
      ),
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: [...],
        iconSize: 25,
        elevation: 50,
        activeIndex: pageIndex,
        leftCornerRadius: 32,
        rightCornerRadius: 32,
        activeColor: User.color,
        inactiveColor: kAppIconGray,
        splashColor: User.color.withOpacity(.3),
        onTap: (index) => setState(() => pageIndex = index),
      ),
    );
  }
}

I am using a package for the BottomNavBar but that shouldn't be a problem.

Answer 1

Remove the page from your pages list and add it again at the same index:

onTap: (index) {
      _pages.removeAt(1);
      _pages.insert(1, LikedMoviesPage());
      setState(() => pageIndex = index);
},