How to create parallax page transition in Flutter?

Question

I'm trying to create parallax page transition in flutter, where the current page slides up as the new new page slides up. I have seen this kind of transitions used by Spotify, Reddit app or even Samsung native alarm app (seen below).

If anyone have some kind of idea how I could achieve this effect (with code example), I would really appreciate it.

Answer 1

Check out this snippet you can run on DartPad, and take a look at the SlideBottomUpRoute, it's the class that manages the transition animation between the pages:

import 'package:flutter/material.dart';

class SlideBottomUpRoute extends PageRouteBuilder {
  SlideBottomUpRoute(
      {@required this.enterWidget,
      @required this.oldWidget,
      RouteSettings settings})
      : super(
          transitionDuration: const Duration(milliseconds: 350),
          settings: settings,
          pageBuilder: (context, animation, secondaryAnimation) => enterWidget,
          transitionsBuilder: (context, animation, secondaryAnimation, child) =>
              Stack(
            children: <Widget>[
              SlideTransition(
                  position: Tween<Offset>(
                    begin: Offset.zero,
                    end: const Offset(0, -1),
                  ).animate(
                    CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn),
                  ),
                  child: oldWidget),
              SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0, 1),
                    end: Offset.zero,
                  ).animate(
                    CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn),
                  ),
                  child: enterWidget),
            ],
          ),
        );

  final Widget enterWidget;
  final Widget oldWidget;
}

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              SlideBottomUpRoute(enterWidget: SecondRoute(), oldWidget: this),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Here is the result:

You can modify the Offset in the animations in SlideBottomUpRoute to change the way the pages move in the transition.