Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tkko/flutter_dismissible_page
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.
https://github.com/tkko/flutter_dismissible_page
animation dismissible flutter flutter-package flutter-ui hero swipe-to-dismiss swipeable
Last synced: 1 day ago
JSON representation
Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.
- Host: GitHub
- URL: https://github.com/tkko/flutter_dismissible_page
- Owner: Tkko
- License: mit
- Created: 2021-02-14T09:20:32.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-23T10:54:47.000Z (over 1 year ago)
- Last Synced: 2025-01-20T00:43:52.045Z (7 days ago)
- Topics: animation, dismissible, flutter, flutter-package, flutter-ui, hero, swipe-to-dismiss, swipeable
- Language: Dart
- Homepage: https://pub.dev/packages/dismissible_page
- Size: 28.6 MB
- Stars: 157
- Watchers: 3
- Forks: 41
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Flutter Dismissible Page From Tornike
[](https://pub.dev/packages/dismissible_page)
[](https://github.com/tkko/flutter_dismissible_page)
[](https://github.com/tenhobi/effective_dart)
[](https://opensource.org/licenses/MIT)
Flutter widget that allows you to dismiss page to any direction, forget the boring back button and
plain transitions.
## Features:
- Dismiss to any direction
- Works with nested list view
- Animating border
- Animating background
- Animating scale
## Support
#### PRs Welcome
#### Discord [Channel](https://rebrand.ly/qwc3s0d)
#### Don't forget to give it a star ⭐
## Demo
| [Live Demo](https://rebrand.ly/gw8nktq) | Multi Direction | Vertical |
|--|--|--|
| 
| 
| 
|
## Getting Started
```dart
const imageUrl =
'https://user-images.githubusercontent.com/26390946/155666045-aa93bf48-f8e7-407c-bb19-bc247d9e12bd.png';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(228, 217, 236, 1),
body: GestureDetector(
onTap: () {
// Use extension method to use [TransparentRoute]
// This will push page without route background
context.pushTransparentRoute(SecondPage());
},
child: Center(
child: SizedBox(
width: 200,
// Hero widget is needed to animate page transition
child: Hero(
tag: 'Unique tag',
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
),
),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DismissiblePage(
onDismissed: () {
Navigator.of(context).pop();
},
// Note that scrollable widget inside DismissiblePage might limit the functionality
// If scroll direction matches DismissiblePage direction
direction: DismissiblePageDismissDirection.multi,
isFullScreen: false,
child: Hero(
tag: 'Unique tag',
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
),
);
}
}
```
## Properties
``` dart
const DismissiblePage({
required this.child,
required this.onDismissed,
this.onDragStart,
this.onDragEnd,
this.onDragUpdate,
this.isFullScreen = true,
this.disabled = false,
this.backgroundColor = Colors.black,
this.direction = DismissiblePageDismissDirection.vertical,
this.dismissThresholds = const {},
this.dragStartBehavior = DragStartBehavior.down,
this.dragSensitivity = 0.7,
this.minRadius = 7,
this.minScale = .85,
this.maxRadius = 30,
this.maxTransformValue = .4,
this.startingOpacity = 1,
this.hitTestBehavior = HitTestBehavior.opaque,
this.reverseDuration = const Duration(milliseconds: 200),
Key? key,
}) : super(key: key);
/// Called when the widget has been dismissed.
final VoidCallback onDismissed;
/// Called when the user starts dragging the widget.
final VoidCallback? onDragStart;
/// Called when the user ends dragging the widget.
final VoidCallback? onDragEnd;
/// Called when the widget has been dragged. (0.0 - 1.0)
final ValueChanged? onDragUpdate;
/// If true widget will ignore device padding
/// [MediaQuery.of(context).padding]
final bool isFullScreen;
/// The minimum amount of scale widget can have while dragging
/// Note that scale decreases as user drags
final double minScale;
/// The minimum amount fo border radius widget can have
final double minRadius;
/// The maximum amount of border radius widget can have while dragging
/// Note that radius increases as user drags
final double maxRadius;
/// The amount of distance widget is able to drag. value (0.0 - 1.0)
final double maxTransformValue;
/// If true the widget will ignore gestures
final bool disabled;
/// Widget that should be dismissed
final Widget child;
/// Background color of [DismissiblePage]
final Color backgroundColor;
/// The amount of opacity [backgroundColor] will have when start dragging the widget.
final double startingOpacity;
/// The direction in which the widget can be dismissed.
final DismissiblePageDismissDirection direction;
/// The offset threshold the item has to be dragged in order to be considered
/// dismissed. default is [_kDismissThreshold], value (0.0 - 1.0)
final Map dismissThresholds;
/// Represents how much responsive dragging the widget will be
/// Doesn't work on [DismissiblePageDismissDirection.multi]
final double dragSensitivity;
/// Determines the way that drag start behavior is handled.
final DragStartBehavior dragStartBehavior;
/// The amount of time the widget will spend returning to initial position if widget is not dismissed after drag
final Duration reverseDuration;
/// How to behave during hit tests.
///
/// This defaults to [HitTestBehavior.opaque].
final HitTestBehavior hitTestBehavior;
```