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!!