Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change navigation animation using Flutter

Is there any way to change the default animation when navigating to/from a page in Flutter?

like image 566
nlern Avatar asked May 06 '18 06:05

nlern


People also ask

How do you control animation in Flutter?

Work flow of the Flutter AnimationAnimationController(duration: const Duration(seconds: 2), vsync: this); animation = Tween<double>(begin: 0, end: 300). animate(controller); controller. forward(); Add animation based listener, addListener to change the state of the widget.

How do you animate a path in Flutter?

To animate a CustomPainter pass the AnimationController into its constructor and also to the super constructor. In paint use the value of the animation to decide how much of the path the draw. For example, if value is 0.25, draw just the first 25% of the path.


3 Answers

You can use PageRouteBuilder.

The following example shows FadeTransition when you navigate to second screen.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Page2(),
    transitionDuration: Duration(seconds: 2),
    transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
  ),
);

If you're using go_router:

GoRoute(
  path: '/page2',
  pageBuilder: (_, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: Page2(),
      transitionDuration: Duration(seconds: 2),
      transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
    );
  },
)

and then:

context.go('/page2');
like image 81
CopsOnRoad Avatar answered Oct 16 '22 22:10

CopsOnRoad


You can subclass MaterialPageRouteand override buildTransitions.

Eg:

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation,
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

to use :

new RaisedButton(
                child: new Text('Goto'),
                onPressed: (){
                  Navigator.push(
                    context,
                    new MyCustomRoute(builder: (context) => new SecondPage()),
                  );
                }),

Replace fade transition with your animation

like image 35
Shyju M Avatar answered Oct 16 '22 20:10

Shyju M


You can achieve this by using CupertinoPageRoute. Please check the below code.

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

  // 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(),
          ),
        ));
  }
like image 46
Arnold Parge Avatar answered Oct 16 '22 20:10

Arnold Parge