CODEWITHSUNDEEP
flutter
Narayan Poudel
Narayan Poudel

Reputation: 349

How to get this type of page transition animation in flutter?

enter image description here

I want to get this type of page transition effect in flutter. I tried all the packages found on pub.dev but I didn't get this one.

Upvotes: 1

Views: 2956

Answers (1)

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12673

Try this:

Route scaleIn(Widget page) {
  return PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 300),
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, page) {
      var begin = 0.0;
      var end = 1.0;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      return ScaleTransition(
        scale: animation.drive(tween),
        child: page,
      );
    },
  );
}

And use it like so:

Navigator.push(context, scaleIn(NewPage()));

Upvotes: 2

Related Questions