如何使用Flutter更改导航动画

您可以使用CupertinoPageRoute实现此目的。请检查以下代码。

import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: 'Transition Animation Demo',      theme: new ThemeData(        primarySwatch: Colors.blue,      ),      home: new FirstPage(),    );  }}class FirstPage extends StatefulWidget {  @override  _FirstPageState createState() => new _FirstPageState();}class _FirstPageState extends State<FirstPage> {  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text('First Page'),      ),      body: new Center(        child: new RaisedButton(          child: new Text('Goto Second Page'),          onPressed: () { Navigator.of(context).push(new SecondPageRoute());          },        ),      ),    );  }}class SecondPageRoute extends CupertinoPageRoute {  SecondPageRoute()      : super(builder: (BuildContext context) => new SecondPage());  // OPTIonAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING  @override  Widget buildPage(BuildContext context, Animation<double> animation,      Animation<double> secondaryAnimation) {    return new FadeTransition(opacity: animation, child: new SecondPage());  }}class SecondPage extends StatefulWidget {  @override  _SecondPageState createState() => new _SecondPageState();}class _SecondPageState extends State<SecondPage> {  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text('Second Page'),      ),      body: new Center(        child: new Text('This is the second page'),      ),    );  }}

一些动画玩法

  // OPTIonAL IF YOU WISH TO HAVE SOME EXTRA ANIMATION WHILE ROUTING  @override  Widget buildPage(BuildContext context, Animation<double> animation,      Animation<double> secondaryAnimation) {    return new RotationTransition(        turns: animation,        child: new ScaleTransition(          scale: animation,          child: new FadeTransition( opacity: animation, child: new SecondPage(),          ),        ));  }