Reputation: 197
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.
Upvotes: 4
Views: 3248
Reputation: 97
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);
},
Upvotes: 7