Flutter Navigator, Horizontal Transiation with PageRoutebuilder

Question

I'm trying to force a horizontal Transiation in the Flutter Navigator Widget. Navigator uses the platform Default Transition from one screen to the next. In iOS, the transition is Right to left. Pops Left to Right. In Android it is Bottom to Top. I believe solution is to use a PageRouteBuilder, but no luck getting it to work. I marked the method with the Navigator Widget that I'd like to modify with a PageRouteBuilder to get desired Horizontal transition.

Code Snippet 2, is the Transition code I have been trying to make work with no luck.

---

This code works as default transition.

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'),
      initialRoute: "/",
      routes: {
        '/Second': (context) => SecondScreen(),
      },
    );
  }
}

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>[
            ButtonMaterial02(),
            new Text('NAV DEMO...',),
            new Text('How do I get a Horizontal Transition in Android?',),
          ],
        ),
      ),
 // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

//================================================================
//================================================================
  Padding ButtonMaterial02() {
    return Padding(
            padding: const EdgeInsets.all(18.0),
            child: new MaterialButton(
              onPressed: MatButton02_onPress,
              child: new Text("Material Button 02"),
              padding: EdgeInsets.all(50.0),
              minWidth: double.infinity,
              color: Theme.of(context).primaryColor,
            ),
          );
  }

  //  add Horizontal code here
  void MatButton02_onPress() {
              print(" MaterialButton02 onPressed...");
              Navigator.pushNamed(context, '/Second');
    //*************************************************
    //*************************************************
    //  HOW do I replace the Navigator above to use
    //  PageRouteBuilder so I can force ANDROID to
    //  Transition Right to Left instead of BottomToTop?
    //*************************************************
    //*************************************************
            }
}

//================================================================
//================================================================
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          child: new Text("RETURN"),
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
//================================================================
//================================================================

---

Code Snippet 2... transition code I have been trying to use.

  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('Second');

Answer 1

You're interested in using the CupertinoPageRoute. It animates from right to left, designed to imitate iOS's transition animation.

Following the example here, replace MaterialPageRoute references with CupertinoPageRoute and you'll be set!