flutter page navigation animation code example

Example 1: slide page transition flutter

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.upToDown, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen()));

Example 2: slide left animtion on naviagtor push in flutter

Navigator.push(context, SlideRightRoute(page: Screen2()))
import 'package:flutter/material.dart';class SlideRightRoute extends PageRouteBuilder {  final Widget page;  SlideRightRoute({this.page})      : super(          pageBuilder: (            BuildContext context,            Animation<double> animation,            Animation<double> secondaryAnimation,          ) =>              page,          transitionsBuilder: (            BuildContext context,            Animation<double> animation,            Animation<double> secondaryAnimation,            Widget child,          ) =>              SlideTransition(                position: Tween<Offset>(                  begin: const Offset(-1, 0),                  end: Offset.zero,                ).animate(animation),                child: child,              ),        );}

Tags:

Misc Example