Want to change navigation animation using Flutter? You can achieve this by using CupertinoPageRoute. Please check the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
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'), ), ); } } |
Some play-around with animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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(), ), )); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.