A page transition which supports drag-down-to-pop gesture. The main source code is copied from the cupertino/route.dart in Flutter SDK with some modifications.

Simplest Usage

Create a new PageRoute to use this page transiaction.

import 'package:drag_down_to_pop/drag_down_to_pop.dart';

class ImageViewerPageRoute extends MaterialPageRoute {
  ImageViewerPageRoute({@required WidgetBuilder builder})
      : super(builder: builder);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return const DragDownToPopPageTransitionsBuilder()
        .buildTransitions(this, context, animation, secondaryAnimation, child);
  }
}

// Push to a new page using ImageViewerPageRoute
Navigator.push(
  context,
  ImageViewerPageRoute(builder: (context) => ImageViewerPage()),
);

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add drag_down_to_pop

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  drag_down_to_pop: ^1.0.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:drag_down_to_pop/drag_down_to_pop.dart';

example/lib/main.dart

import 'package:drag_down_to_pop/drag_down_to_pop.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: FirstPage(),
      ),
    );

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Next page'),
          textColor: Colors.white,
          color: Colors.blue,
          onPressed: () {
            Navigator.push(
              context,
              ImageViewerPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class ImageViewerPageRoute extends MaterialPageRoute {
  ImageViewerPageRoute({required WidgetBuilder builder})
      : super(builder: builder, maintainState: false);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return const DragDownToPopPageTransitionsBuilder()
        .buildTransitions(this, context, animation, secondaryAnimation, child);
  }

  @override
  bool canTransitionFrom(TransitionRoute previousRoute) {
    return false;
  }

  @override
  bool canTransitionTo(TransitionRoute nextRoute) {
    return false;
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        child: Image.network(
          'https://ww4.sinaimg.cn/bmiddle/5c9763c0jw1dg9c1if6bjj.jpg',
        ),
      ),
      onTap: () {
        Navigator.maybePop(context);
      },
    );
  }
}

#flutter #dart #mobile-apps