Allow non-instant transitions between pages in the Navigator

[st-pasha]

Problem to solve

Currently, the Navigator pushes and pops pages instantaneously. It would be nice, however, if it also supported transitions between pages. For example, page sliding, or fading via transparency, etc.

[spydon]

Could they be supported through the effects system?

[rivella50]

Hopefully the planned transitions will eventually also be available for the overlays part.

[st-pasha]

Could they be supported through the effects system?

The regular Routes are PositionComponents, so you can apply a number of effects to them in order to create a transition: move them in any direction, or scale, or apply transparency, or blur out, etc.

All of that is already working, there's no need to create the transition effects per se. The only thing that's currently missing is that for the duration of transition both the old and the new route must remain visible. This should be pretty simple to implement, I expect the most work in this issue is creating documentation and examples and tests.

Hopefully the planned transitions will eventually also be available for the overlays part.

For overlays it would be more difficult though. There's no natural way for an overlay to be affected by an effect -- you'd have to create the overlay widget in a way that would allow it to be animated. So, while I think it's definitely possible, it's probably much easier to work with regular component-based routes if you want to have animations/transitions.

[rivella50]

@st-pasha Thanks for your opinion. Transitions for overlays is definitely not the same as for Components. I'm looking forward to the new release.

[savire]

Isn't the route just a Component not a PositionComponent? I mean assuming that its a PositionComponent what if it contains regular Widgets from Flutter it will also be automatically available under effects? I think the way the effects work are limited like how Glow Effects only work with Paint based Component while we users expect it to work with any objects geometry instead.

[ufrshubham]

Isn't the route just a Component not a PositionComponent?

It is a PositionComponent.

I mean assuming that its a PositionComponent what if it contains regular Widgets from Flutter it will also be automatically available under effects?

Flutter widgets cannot be added to flame components. So no, effects won't affect Flutter widgets.

I think the way the effects work are limited like how Glow Effects only work with Paint based Component while we users expect it to work with any objects geometry instead.

It is like saying move effects should work with any component. But it is not possible because move effect needs position data to work with and not all components have that data. Similarly, the glow effect needs paint data.

[savire]

Isn't the route just a Component not a PositionComponent?

It is a PositionComponent.

Referring to the example code given on the doc here its just a Component though

https://docs.flame-engine.org/1.7.0/flame/router.html

class SplashScreenPage extends Component
    with TapCallbacks, HasGameRef<RouterGame> {
  @override
  Future<void> onLoad() async {
    addAll([
      Background(const Color(0xff282828)),
      TextBoxComponent(
        text: '[Router demo]',
        textRenderer: TextPaint(
          style: const TextStyle(
            color: Color(0x66ffffff),
            fontSize: 16,
          ),
        ),
        align: Anchor.center,
        size: gameRef.canvasSize,
      ),
    ]);
  }

I mean assuming that its a PositionComponent what if it contains regular Widgets from Flutter it will also be automatically available under effects?

Flutter widgets cannot be added to flame components. So no, effects won't affect Flutter widgets.

Again saying it cannot be added is wrong since we can actually add regular Flutter widgets into the the Flame components like for example within the Route and it will be rendered alright.

Although yes indeed currently Flame does not add the capability of applying its effects into it which well we expect it to some degree since Flutter is all about that mix and match stuff.

I think the way the effects work are limited like how Glow Effects only work with Paint based Component while we users expect it to work with any objects geometry instead.

It is like saying move effects should work with any component. But it is not possible because move effect needs position data to work with and not all components have that data. Similarly, the glow effect needs paint data.

Yes I understand those flutter widgets are currently outside of Flame reach, but flutter widgets actually has its own positioning information and has its bounding box which can be used to apply the glow effect at least outside the bounding box since well I think that is what glow effect should be.

Again if you refers to the Flame capabilities alone then its all will be valid from your point of view but in the production we will try to mix and match widgets from flutter or 3rd parties as well because its just weird to use Flutter Route for example if we mainly displays Flame UI all around. But again Flame does comes with such limitations.

Well Flutter indeed has its own issues too as well like how the Shader aren't properly supported on the Web. Since flame just basically relied upon its mechanism then its somehow got affected indirectly.

[ufrshubham]

Referring to the example code given on the doc here its just a Component though

https://docs.flame-engine.org/1.7.0/flame/router.html

class SplashScreenPage extends Component
    with TapCallbacks, HasGameRef<RouterGame> {
  @override
  Future<void> onLoad() async {
    addAll([
      Background(const Color(0xff282828)),
      TextBoxComponent(
        text: '[Router demo]',
        textRenderer: TextPaint(
          style: const TextStyle(
            color: Color(0x66ffffff),
            fontSize: 16,
          ),
        ),
        align: Anchor.center,
        size: gameRef.canvasSize,
      ),
    ]);
  }

You confusing between Route and the component passed as input to the route. In that example, SplashScreenPage is a component which gets wrapped in a Route. Route is a separate PositonComponent. When I say Route this is the class that I am referring: https://github.com/flame-engine/flame/blob/ac878d8edfff4b6d9e3889c18fe077dd4b562449/packages/flame/lib/src/components/route.dart#L26

Again saying it cannot be added is wrong since we can actually add regular Flutter widgets into the the Flame components like for example within the Route and it will be rendered alright.

I think there is some misunderstanding. Can you share an example where a flutter widget is added to a flame component?

[savire]

Referring to the example code given on the doc here its just a Component though https://docs.flame-engine.org/1.7.0/flame/router.html

class SplashScreenPage extends Component
    with TapCallbacks, HasGameRef<RouterGame> {
  @override
  Future<void> onLoad() async {
    addAll([
      Background(const Color(0xff282828)),
      TextBoxComponent(
        text: '[Router demo]',
        textRenderer: TextPaint(
          style: const TextStyle(
            color: Color(0x66ffffff),
            fontSize: 16,
          ),
        ),
        align: Anchor.center,
        size: gameRef.canvasSize,
      ),
    ]);
  }

You confusing between Route and the component passed as input to the route. In that example, SplashScreenPage is a component which gets wrapped in a Route. Route is a separate PositonComponent. When I say Route this is the class that I am referring:

https://github.com/flame-engine/flame/blob/ac878d8edfff4b6d9e3889c18fe077dd4b562449/packages/flame/lib/src/components/route.dart#L26

Well this issue were about how to enable transition between pages right. So isn't the component referred to is that one on the demo because the way that I understand it is to somehow add some options to the router component so that it has options to let us pick how to animate its pages.

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );

Took an example from the Flutter Route.

Again saying it cannot be added is wrong since we can actually add regular Flutter widgets into the the Flame components like for example within the Route and it will be rendered alright.

I think there is some misunderstanding. Can you share an example where a flutter widget is added to a flame component?

// On the widget declaration
final game = MyGame();

Widget build(BuildContext context) {
  return GameWidget(
    game: game,
    overlayBuilderMap: {
      'PauseMenu': (BuildContext context, MyGame game) {
        return Text('A pause menu');
      },
    },
  );
}

Text is obviously a regular Flutter Widget and I already tested it that its working to use any regular flutter widgets since its mentioned on the document so that it will simplify the navigation or adding something on top of the Flame layer easily. For that its really helpful. But again we do expect that if it could applied some of the Flame processing into it even on the bounding-box then it will be awesome because lets say I pop a dialog containing Flutter made form and decorated the dialog with some Flame effects along with some transitioning animation then that would be awesome.

[ufrshubham]

Well this issue were about how to enable transition between pages right. So isn't the component referred to is that one on the demo because the way that I understand it is to somehow add some options to the router component so that it has options to let us pick how to animate its pages.

It is about transition between components, but the component we are talking about is Route. Which is why Pasha earlier said that it is already possible to apply effects to routes. Only in-out times of routes being transitioned needs to be in user control. That is the original problem that this issues tracks.

Text is obviously a regular Flutter Widget and I already tested it that its working to use any regular flutter widgets since its mentioned on the document so that it will simplify the navigation or adding something on top of the Flame layer easily. For that its really helpful. But again we do expect that if it could applied some of the Flame processing into it even on the bounding-box then it will be awesome because lets say I pop a dialog containing Flutter made form and decorated the dialog with some Flame effects along with some transitioning animation then that would be awesome.

Yes, Text is a widget, but the example you shared does not add Flutter widget to Flame component. OverlayBuilderMap renders the given widgets on top of flame's GameWidget. It is still part of the Flutter widget tree and not the Flame component tree. It is not possible to add flutter components to flame widgets right now, is what I am trying to explain.

final flameComponent = PositionComponent(position: Vector2(10, 40));
final flutterWidget = Text('I am a Flutter widget');
component1.add(flutterWidget); // this is not possible

[savire]

Well this issue were about how to enable transition between pages right. So isn't the component referred to is that one on the demo because the way that I understand it is to somehow add some options to the router component so that it has options to let us pick how to animate its pages.

It is about transition between components, but the component we are talking about is Route. Which is why Pasha earlier said that it is already possible to apply effects to routes. Only in-out times of routes being transitioned needs to be in user control. That is the original problem that this issues tracks.

Text is obviously a regular Flutter Widget and I already tested it that its working to use any regular flutter widgets since its mentioned on the document so that it will simplify the navigation or adding something on top of the Flame layer easily. For that its really helpful. But again we do expect that if it could applied some of the Flame processing into it even on the bounding-box then it will be awesome because lets say I pop a dialog containing Flutter made form and decorated the dialog with some Flame effects along with some transitioning animation then that would be awesome.

Yes, Text is a widget, but the example you shared does not add Flutter widget to Flame component. OverlayBuilderMap renders the given widgets on top of flame's GameWidget. It is still part of the Flutter widget tree and not the Flame component tree. It is not possible to add flutter components to flame widgets right now, is what I am trying to explain.

final flameComponent = PositionComponent(position: Vector2(10, 40));
final flutterWidget = Text('I am a Flutter widget');
component1.add(flutterWidget); // this is not possible

Yes understood mate. I'm well aware that currently Flame maintain its own component tree outside of Flutter. Although its possible to acquire flutter parent widgets bounding box via the RenderBox and somehow applies Flame magic on it. I did that though manually right now and yes its painful since its not automated.