Directory portal:A Guide to The Quick Start to Flutter

Page transitions are very important for a mature application.

Flutter provides an easy way to animate pages.

Normally, page jumps are performed using the MaterialPageRoute provided by Flutter, which provides the default page jump animation.

Of course, we can also define our own page jump animation.

1. Use PageRouteBuilder

Using PageRouteBuilder, you can quickly customize a page jump animation.

Navigator.push(context, PageRouteBuilder(pageBuilder:
                      (BuildContext context, Animation animation,
                          Animation secondaryAnimation) {
                    return ScaleTransition(
                        scale: animation,
                        alignment: Alignment.bottomRight,
                        child: AnimPage());
Copy the code

2. PageRoute inheritance

You can also customize the page jump animation by inheriting PageRoute.

class FadeRoute extends PageRoute {
  FadeRoute({
    @required this.pageBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true}); final WidgetBuilder pageBuilder; @override final Duration transitionDuration; @override final bool opaque; @override final bool barrierDismissible; @override final Color barrierColor; @override final String barrierLabel; @override final bool maintainState; @override Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) => pageBuilder(context); @override Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {returnFadeTransition( opacity: animation, child: pageBuilder(context), ); }}Copy the code

The key is to implement both buildPage() and buildTransitions().

Add transition widgets in buildTransitions().

Use:

Navigator.push(context, FadeRoute(builder: (context) {
  return AnimPage();
}));
Copy the code

Not very easy to define, but easy to encapsulate a unified transition animation.

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice