Flutter page transition like IOS style (CupertinoPageTransitionBuilder()) in android

Question

How can I create a custom page animation like CupertinoPageTransitionBuilder. There are some work arounds like stacking previous and new screen and building animations that works when you move towards next while popping it shows the last stacked screen once and disappear after few milliseconds.

Any help would be great.

pageTransitionsTheme: const PageTransitionsTheme(
      builders: {
        TargetPlatform.android: CupertinoPageTransitionsBuilder(), // NOT SO EFFECTIVE EITHER
      },
    ),

Stacking Current and next screen code.

Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0.0, 0.0),
            end: const Offset(-0.3, 0.0),
          ).animate(animation),
          child: prevPage,
        ),

        SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(animation),
          child: AnimatedBuilder(
            animation: animation,
            builder: (c, w) {
              return Material(
                shadowColor: Colors.black,
                // elevation: 10.0 * animation.value,
                child: nextPage
              );
            },
          ),
        )
      ],

Answer 1

its update if you want to create a page transition animation where both the next and previous pages are animated simultaneously during the transition, you can consider using the PageRouteBuilder with a custom animation controller. This allows you to control the animations of both pages.

Here's an example of how you can achieve this effect:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_customPageRoute());
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }

  PageRouteBuilder _customPageRoute() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return SecondPage();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.easeInOut;
        var tween = Tween<Offset>(begin: begin, end: end).chain(CurveTween(curve: curve));

        var offsetAnimation = animation.drive(tween);

        var slideFromRight = SlideTransition(
          position: offsetAnimation,
          child: child,
        );

        var slideFromLeft = SlideTransition(
          position: Tween<Offset>(begin: Offset(-1.0, 0.0), end: Offset.zero).chain(CurveTween(curve: curve)).animate(animation),
          child: child,
        );

        return Stack(
          children: [
            slideFromRight,
            slideFromLeft,
          ],
        );
      },
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

In this code:

1. We use the PageRouteBuilder to create a custom page transition.
2. In the transitionsBuilder, we define two SlideTransition widgets for the incoming and outgoing pages. These transitions move the pages in opposite directions, creating the desired effect.
3. We use a Stack to overlay both pages during the transition.

This approach should create a simultaneous animation for both the next and previous pages during the transition. Adjust the begin, end, and curve values to fine-tune the animation effect to your liking.