Home > Enterprise >  Flutter push screen with pop animation
Flutter push screen with pop animation

Time:08-01

i have the code below and what i would like to achieve is to have an animation transition like 'pop' when calling 'push'. the code that i have just slides the new page from the direction that i specify. i would like to have the old screen be the one that is moving instead.

import 'package:flutter/material.dart';

class CustomPageRoute extends PageRouteBuilder {
  final Widget child;
  final AxisDirection direction;

  CustomPageRoute({
    required this.child,
    required this.direction,
  }) : super(
          transitionDuration: const Duration(milliseconds: 200),
          reverseTransitionDuration: const Duration(milliseconds: 200),
          pageBuilder: (context, animation, secondaryAnimation) => child,
        );

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) =>
      SlideTransition(
        position: Tween<Offset>(begin: getBeginOffset(), end: Offset.zero)
            .animate(animation),
        child: child,
      );

  Offset getBeginOffset() {
    switch (direction) {
      case AxisDirection.up:
        return const Offset(0, 1);
      case AxisDirection.down:
        return const Offset(0, -1);
      case AxisDirection.right:
        return const Offset(-1, 0);
      case AxisDirection.left:
        return const Offset(1, 0);
    }
  }
}

CodePudding user response:

You can use pageRouteBuilder with zero duration

Navigator.pushReplacement(
    context, 
    PageRouteBuilder(
        pageBuilder: (context, _, __) => NewPage(),
        transitionDuration: Duration.zero,
        reverseTransitionDuration: Duration.zero,
    ),
);

Edit

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, _, __) => Page2(),
    transitionsBuilder: (context, anim, a2, child) => FadeTransition(opacity: anim, child: child),
    transitionDuration: Duration(milliseconds: 2000),
  ),
);

CodePudding user response:

for anyone looking to achieve the same thing, it can be achieved by using popUntil

  • Related