flutter, PageRouteBuilder, adding Horizontal Transition

Question

The native navigation transition for iOS is RightToLeft. The Native Navigation transition for ANDROID is Bottom to Top. I would like to override the Native Navigation transition in Flutter to have the same RIght to Left transtion across iOS and ANDROID. To do this, I am trying to use PageRouteBuilder but no luck getting it to work. The first code block, I have a very basic screen that works... but natively. The second snippet includes the navigation transition code I am attempting to integrate.

The Code I am trying to fix.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      appBar: new AppBar(

        title: new Text(widget.title),
      ),
      body: new Center(

        child: new Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            //==============================================
            //  How would I force a horizontal transition?

            mbNav001(context),

            new Text(
              'Screen 1',
            ),
          ],
        ),
      ),

    );
  }
}


//===================================================
Padding mbNav001(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(28.0),
    child: new MaterialButton(
        height: 80.0,
        padding: EdgeInsets.all(50.0),
        minWidth: double.infinity,
        color: Theme.of(context).primaryColor,
        textColor: Colors.white,
        child: new Text(
          "material button a",
          style: new TextStyle(
            fontSize: 20.0,
            color: Colors.yellow,
          ),
        ),

        splashColor: Colors.redAccent,
        // -----    This line is giving me error...
        onPressed: () {
          print('click mb');

//===========================================================
//  How to force a horizontal trans in Navigation?
//===========================================================
          Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
          );
        }

      //  expecting to find...  :

    ),
  );
}
//===================================================




class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first screen when tapped!
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

---

this is the transition code I am trying to add.

  transitionsBuilder: (
      BuildContext context, 
      Animation<double> animation,
      Animation<double> secondaryAnimation, 
      Widget child) {
        return SlideTransition(
          position: new Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
         ).animate(animation),
        child: new SlideTransition(
        position: new Tween<Offset>(
          begin: Offset.zero,
          end: const Offset(1.0, 0.0),
        ).animate(secondaryAnimation),
        child: child,
      ),
    );
  },
);
Navigator.of(context).push(pageRoute);

Answer 1

This is the code i've used to achieve the slide up from the bottom animation on iOS. You'd just need to edit the tween values to achieve a left to right animation.

  var builder = PageRouteBuilder(
  pageBuilder: (BuildContext context,
      Animation animation,
      Animation secondaryAnimation) {
    return YourChildWidgetHere();
  },
  transitionsBuilder: (
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: child, 
    );

  });
Navigator.of(context).push(builder);

Answer 2

在我的情况下，使用CupertinoPageRoute而不是MaterialPageRoute解决了相同的问题，而没有尝试应用任何自定义动画。

Navigator.of(context).push(CupertinoPageRoute(builder: (context) => MyPanel()));