Flutter- drag down to dismiss
I was solving same issue for myself
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: ...
)