How to remove pages from stack using Navigator.pages in Flutter

user_6055532 0
Viewed 563

I'm trying to understand Navigator 2.0 Pages API which allows to modify navigation stack via Navigator.pages property.

I prepared simple demo where I try to remove pages from the backstack by updating the provided list of pages.

Here is the DartPad demo

screen recording of the issue

However, when simply removing the CustomPage from the Navigator.pages there's an animation glitch. For a split second you can see the page being animated beneath the current page.

Is it a bug in Flutter framework or is there a better way to remove pages from the backstack?

flutter navigation
1 Answers

Adding a ValueKey to the Navigator widget seems to solve the problem:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Navigator(
        key: ValueKey(pages.length), // <------------- 
        pages: List.unmodifiable(pages),
        onPopPage: _onPopPage,
      ),
    );
  }
user_105333890
Related