Page does not change despite state changing

[dan-leech]

Describe the bug The last page is frozen in page stack despite there is a new page should be.

I use _onGeneratePages this way:

[
if (flowState.input != null) NameForm(),
if (flowState.input == null && (flowState.medications?.isNotEmpty ?? false))
  SummaryPage(),
]

Flutter version is 2.2.2

I'm sure(I debugged and checked all things) that after state update only NameForm in the stack. But SummaryPage is still on the screen. Might it be Navigator issue...

I'm trying downgrade now. Might someone have the same issue?

[dan-leech]

downgrade does not help. Might Navigator thinks that one page == one another page?

[dan-leech]

I've found the issue.

If I use MaterialPage all is ok. But pages do not want to switch if I use CustomMaterial page without animation or delay.

class CustomMaterialPage<T> extends Page<T> {
  const CustomMaterialPage({required this.child, LocalKey? key})
      : super(key: key);

  final Widget child;
  static const _transitionDuration = Duration(milliseconds: 50);

  @override
  Route<T> createRoute(BuildContext context) => PageRouteBuilder(
        settings: this,
        transitionDuration: _transitionDuration,
        reverseTransitionDuration: _transitionDuration,
        pageBuilder: (
          context,
          animation,
          secondaryAnimation,
        ) =>
            FadeTransition(opacity: animation, child: child),
      );
}

@felangel Any Ideas? I guess that I use animation incorrect, but it works in general cases when pages go one by one. And it glitches on replace.

[felangel]

Hi @dan-leech 👋 Thanks for opening an issue!

Can you please share a link to a minimal reproduction sample? Thanks! 🙏

[dan-leech]

@felangel Just try to use CustomMaterialPage instead MaterialPage in any OnGeneratePages

I solved this with rewriting MaterialPage because it does not use PageRouteBuilder. PageRouteBuilder glitches.

[remonh87]

@felangel I have exactly the same issue as @dan-leech . I have created the a repo for you that shows the error I have encountered: https://github.com/remonh87/flowbuilder_issue_repo .

Also I have 2 scenarios that do work (one is exactly what Dan mentioned if you change to material page no issues).

I used the standard Flutter example for pageroutebuilder. Let me know if you need more.

[liPatrick]

I looked into @remonh87 repo and it turns out that the problem is not a flowbuilder issue but a Navigation2.0 issue. I replaced Flowbuilder with Navigation and reproduced the same problem (where the MaterialPage works but not a CustomPage). If you want to use a navigation bar, I would suggest just having a list of pages and selecting between them using setState when a bottom nav bar item is tapped. You can then add a flowbuilder widget within each page to control navigation.

[remonh87]

@liPatrick sorry for my super late reaction (for some reason missed your reply). The suggestion you proposed works great and is actually quite a nice one.

[felangel]

@remonh87 that's great to hear, thanks for sharing! Closing this for now since it doesn't appear there is any further action required. Let me know if you have any additional comments/questions and I'm happy to continue the conversation 👍

[ToniTornado]

I had the same problem (flow no longer updating) and came across this issue. Thanks for sharing your minimal example @remonh87.

So here is the deal: I tell you how to fix your CustomPage example and you find out and tell me why my fix works. 😉

To fix your CustomPage flow, all you need to do is add a key to at least one of the pages in your flow.

  static CustomPage<void> page() => const CustomPage<void>(
      name: 'page1',
      child: _Page1(),
      key: ValueKey('page1'), // <- This line is added
    );

That's it.

In my app I was cleaning up some code and among many other changes I removed a key from a MaterialPage. The flow has more than just two pages and the last step an alert that changed a parent flow. Reverting all my changes step by step lead to a tiny - and what I thought useless - key. Note: In my app I am using MaterialPages and it was not working. So maybe it is also a mystery to be solved why your MaterialPage example works...

My first thought was ok, there are only MaterialPage objects in the route list so for the rebuild to work we need keys to distinguish them. But why is one key enough for as it seems any number of pages?

[Boolin365]

I had the same problem too - thanks for the fix, @ToniTornado.

I would also be interested to know why this works as it does...