page routebuilder vs materialpageroute code example

Example 1: navigator animation flluttter

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    home: Page1(),
  ));
}

class Page1 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          child: Text('Go!'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Example 2: slide left animtion on naviagtor push in flutter

Navigator.push(context, SlideRightRoute(page: Screen2()))
import 'package:flutter/material.dart';class SlideRightRoute extends PageRouteBuilder {  final Widget page;  SlideRightRoute({this.page})      : super(          pageBuilder: (            BuildContext context,            Animation<double> animation,            Animation<double> secondaryAnimation,          ) =>              page,          transitionsBuilder: (            BuildContext context,            Animation<double> animation,            Animation<double> secondaryAnimation,            Widget child,          ) =>              SlideTransition(                position: Tween<Offset>(                  begin: const Offset(-1, 0),                  end: Offset.zero,                ).animate(animation),                child: child,              ),        );}

Tags:

Misc Example