Flutter- drag down to dismiss

I was solving same issue for myself

enter image description here

This is the dartpad link for demo above 👆

Full source code

import 'package:flutter/material.dart';

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: () {
            showGeneralDialog(
              barrierLabel: "Label",
              barrierDismissible: false,
              barrierColor: Colors.black.withOpacity(0.5),
              transitionDuration: Duration(milliseconds: 400),
              context: context,
              pageBuilder: (context, anim1, anim2) {
                return SecondRoute();
              },
              transitionBuilder: (context, anim1, anim2, child) {
                return SlideTransition(
                  position: Tween(begin: Offset(0, 1), end: Offset(0, 0))
                      .animate(anim1),
                  child: child,
                );
              },
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dismissible(
      direction: DismissDirection.vertical,
      key: const Key('key'),
      onDismissed: (_) => Navigator.of(context).pop(),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Second Route"),
        ),
        body: Align(
          alignment: Alignment.center,
          child: Container(
            height: 300,
            width: 300,
            child: SizedBox.expand(child: FlutterLogo()),
            margin: EdgeInsets.only(bottom: 50, left: 12, right: 12),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(40),
            ),
          ),
        ),
      ),
    );
  }
}

NOTE: not tested for cases when SecondRoute has (ListView or SingleChildScroll) but I think in that case if you drag starting from AppBar or from location not covered by ListView it should dismiss as expected


You can use the Dismissible widget for this. Docs with example: https://flutter.io/docs/cookbook/gestures/dismissible


A simple example of drag up/down to dismiss a page using Dismissible:

Dismissible(
    direction: DismissDirection.vertical,
    key: const Key('key'),
    onDismissed: (_) => Navigator.of(context).pop(),
    child: ...
)

Tags:

Flutter