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.
Output:
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());
}