Build transition for pageRouteBuilder in Flutter

Question

I have implemented routing in my flutter app via on-the-fly route generation with

onPressed:() => Navigator.of(context).push(new PageRouteBuilder(

   pageBuilder: (_, __, ___) => new Video(),

 )),

The transition from one page to another however is instant and without the native 'in from left' or 'in from bottom' animation, depending on whether you target iOS or Android. Is there a way to implement the native OS transitions without having to implement the animation from scratch.

I know that you can pass the

transitionBuilder

parameter to the

PageRouteBuilder

to create transitions, but so far I haven't found any information on how to create the necessary transitions or whether premade transitions are available. Any help with the implementation of the native transitions mentioned above would be appreciated!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can just use MaterialPageBuilder instead of PageRouteBuilder.

To play video, you can look into this.

example:

import 'package:chewie/chewie.dart';

final playerWidget = new Chewie(
  new VideoPlayerController(
    'https://flutter.github.io/assets-for-api-docs/videos/butterfly.mp4'
  ),
  aspectRatio: 3 / 2,
  autoPlay: true,
  looping: true,
);

 onPressed:() => Navigator.of(context).push(new MaterialPageRoute(
   pageBuilder: (BuildContext context) {
      return new Container(child: playerWidget);
   },
 )),

Hope this helped!

Build transition for pageRouteBuilder in Flutter

Sign up