English | 中文

Introduction

Route animation by using flutter's transition widget

Usage

use Navigator.push() to push route:


  Navigator.push(context, ProsteRouteAnimation.fadeRoute(route: DemoPage(), ...));

use Navigator.pushNamed() to push route,Can be set onGenerateRoute in MaterialApp

  MaterialApp(
    onGenerateRoute: (settings) {
      Widet widget;
      switch(settings.name) {
        case '/demo':
          widget = DemoPage();
          break;
      }

      return ProsteRouteAnimation.fadeRoute(route: widget, ...);
    }
  )

  ...

  RaisedButton(
    onPressed: () {
      Navigator.pushNamed(
        context,
        '/demo',
        arguments: {
          'param': param,
        },
      );
    },
    child: Text('push'),
  );

ProsteSlideMode

Determine the animation path of ProsteRouteAnimation.slideRoute()

  • fromLeft

    page from left to right

  • fromRight

    page from right to left

  • fromBottom

    page from bottom to top

  • fromTop

    page from top to bottom

ProsteRouteAnimation.slideRoute(
  route: DemoPage(),
  mode: ProsteSlideMode.fromLeft,
  ...
);

ProsteAnimationMode

Determine which animation method the constructor method uses

  • fade

    fade animation

  • slideFromLeft

    animation use slide and page from left to right

  • slideFromRight

    animation use slide and page from right to left

  • slideFromBottom

    animation use slide and page from bottom to top

  • slideFromTop

    animation use slide and page from top to bottom

  • scale

    animation use scale

  • rotation

    animation use rotation

  • size

    animation use size change

ProsteRouteAnimation(
  builder: (context) => DemoPage(),
  mode: ProsteAnimationMode.fade,
  ...
);

Api

Notice that using the constructor method can not control the routing time,other static functions can control the entry and exit time.

  • ProsteRouteAnimation
ProsteRouteAnimation(
  builder: (context) => DemoPage(),
  curve: Curves.linear,
  useFade: true,
  axis: Axis.vertical,
  alignment: Alignment.center,
  mode: ProsteAnimationMode.fade,
  maintainState: true,
  fullscreenDialog: false,
);
  • ProsteRouteAnimation.fadeRoute
  ProsteRouteAnimation.fadeRoute(
    route: DemoPage(),
    duration: Duration(milliseconds: 300),
    reverseDuration: Duration(milliseconds: 300),
    curve: Curves.linear,
  )
  • ProsteRouteAnimation.slideRoute
ProsteRouteAnimation.slideRoute(
  route: DemoPage(),
  mode: ProsteSlideMode.fromLeft,
  duration: Duration(milliseconds: 300),
  reverseDuration: Duration(milliseconds: 300),
  useFade: true,
  curve: Curves.linear,
);
  • ProsteRouteAnimation.scaleRoute
ProsteRouteAnimation.scaleRoute(
  route: DemoPage(),
  alignment: Alignment.center,
  duration: Duration(milliseconds: 300),
  reverseDuration: Duration(milliseconds: 300),
  useFade: true,
  curve: Curves.linear,
);
  • ProsteRouteAnimation.rotationRoute
ProsteRouteAnimation.rotationRoute(
  route: DemoPage(),
  alignment: Alignment.center,
  duration: Duration(milliseconds: 300),
  reverseDuration: Duration(milliseconds: 300),
  useFade: true,
  curve: Curves.linear,
);
  • ProsteRouteAnimation.sizeRoute
ProsteRouteAnimation.sizeRoute(
  route: DemoPage(),
  alignment: Alignment.center,
  duration: Duration(milliseconds: 300),
  reverseDuration: Duration(milliseconds: 300),
  useFade: true,
  axis: Axis.vertical,
  curve: Curves.linear,
);

If you find a bug, please send it to issues, I will fix it as soon as I see it, thinks!!

Libraries

proste_route_animation
proste_route_animation_class
proste_route_animation_type