NavigateTo, fluro’s page-switching function Router. NavigateTo, fluro’s page-switching function router. navigateTo, Fluro’s page-switching function router. navigateTo, Fluro’s page-switching function Router.

Switching effect classification

Fluro’s built-in switch animations can be divided into three categories:

  1. Native effects for each platform
  2. Non-native effect
  3. Custom effects
Router.navigateTo(
    context
    path
    transition
    transitionBuilder
    transitionDuration
)
Copy the code

The router. navigateTo function has been introduced to Flutter routing management and Fluro. TransitionBuilder is used to customize the transition effect, and transitionDuration is the time required to switch animations.

1. Native effects of each platform

This platform only applies to Android and ios. As explained in the previous article, when a flutter is performed using the system’s default route management system, the flutter performs different transitions depending on the platform on which the flutter is based. In Android, the flutter fades from bottom to top, while in ios, the flutter slides from right to left.

In Fluro, there are three types of native effects, each of which comes in pairs:

  1. Effect with platform:TransitionType.native 和 TransitionType.nativeModal

  1. Using Android effects:TransitionType.material 和 TransitionType.materialFullScreenDialog

  1. Effects of using ios:TransitionType.cupertino 和 TransitionType.cupertinoFullScreenDialog

Each effect comes in pairs because native route switching effects in Flutter can be non-full-screen or full-screen.

In Material and Cupertino, there is a close button instead of a back button to the left of the full-screen AppBar.

On iOS, instead of swiping left, the full screen effect is swiped from bottom to top, and you can no longer swipe right to close the page.

Note that the native switching effect in the preceding 6 does not support custom switching duration. The native switching effect is the same.

2. Non-native effects

Fluro also has four common effects built in, all of which support transitionDuration custom switching duration.

  1. Fade in:TransitionType.fadeIn

  2. From left to right to enter: TransitionType inFromLeft

  1. Enter from right to left:TransitionType.inFromRight

  1. Enter from the bottom up:TransitionType.inFromBottom

3. Customize the effect

In addition to the above 10 effects, there is a special custom effect, transitionType.custom.

It must be accompanied by the transitionBuilder parameter.

Custom effects Can also be customized using transitionDuration.

Here is an example of a custom fade in effect:

. Router.navigateTo( context, path, transition: TransitionType.custom, transitionBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(
              parent: animation,
              curve: Curves.linear,
          ),
          child: child
        );
    },
    transitionDuration: Duration(seconds: 1), // The switch takes 1s); .Copy the code

Check out more, please pay attention to: