CODEWITHSUNDEEP
flutter
th_lo
th_lo

Reputation: 575

How to use PositionedTransition or AlignTranstition to navigate in Navigator.pushNamed?

I have a question how to transform in a page transition. The whole content of 1st page should animate to the 2nd page on the x-axis, but not as with SlideTransition() on top of the 1st page. In CSS it would be something like translate.x

Instead I would like to shift/push/move the 1st page content from right to left out of the screen.

enter image description here

Upvotes: 1

Views: 503

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268254

Output:

enter image description here

Code:

This is Page1:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (_, __, ___) => Page2(),
                transitionsBuilder: (_, anim, __, child) {
                  return Stack(
                    children: [
                      SlideTransition(
                        position: Tween<Offset>(begin: Offset.zero, end: Offset(-1, 0)).animate(anim),
                        child: Page1(),
                      ),
                      SlideTransition(
                        position: Tween<Offset>(begin: Offset(1, 0), end: Offset.zero).animate(anim),
                        child: child,
                      ),
                    ],
                  );
                },
              ),
            );
          },
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
}

This is Page2:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar());
}

Upvotes: 1

Related Questions