https://github.com/hey24sheep/backdrop_modal_route
Flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content
https://github.com/hey24sheep/backdrop_modal_route
android backdrop bottomsheet dart flutter flutter-package flutter-plugin ios material
Last synced: about 1 year ago
JSON representation
Flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content
- Host: GitHub
- URL: https://github.com/hey24sheep/backdrop_modal_route
- Owner: hey24sheep
- License: mit
- Created: 2020-05-11T09:29:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-12T06:41:18.000Z (over 2 years ago)
- Last Synced: 2025-05-07T03:08:55.780Z (about 1 year ago)
- Topics: android, backdrop, bottomsheet, dart, flutter, flutter-package, flutter-plugin, ios, material
- Language: Dart
- Homepage: https://pub.dev/packages/backdrop_modal_route
- Size: 3.61 MB
- Stars: 12
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Backdrop Modal Route
[](https://pub.dev/publishers/hey24sheep.com/packages)
[](https://pub.dartlang.org/packages/backdrop_modal_route)
[](https://github.com/hey24sheep/backdrop_modal_route)
[](https://img.shields.io/badge/platform-Android%20%7C%20iOS-green.svg)
**Get best of both worlds, backdrop with actual backdrop unlike material design and non sticky bottom sheet**
This flutter package will help you create **backdrop modal route** or **non sticky bottom sheet** with **minimal code and efforts with dynamic content**.
- **Android and IOS**
- **simple and easy**
- **no other dependencies**
- **well documented**
- **production-ready**
This package was created as a need for our in-production app, as there is no single solution which gives you a route enabled bottom-sheet or backdrop which is route enabled and a new page with an actual backdrop unlike material design.
## Installation
With `null-safety`
```dart
dependencies:
backdrop_modal_route: ^2.0.1
```
Without `null-safety`
```dart
dependencies:
backdrop_modal_route: 1.1.0
```
## Getting Started
Add the dependency to your project and start using **Backdrop Modal Route** everywhere:
Import the package.
```dart
import 'package:backdrop_modal_route/backdrop_modal_route.dart';
```
Open backdrop with your custom widget which could be stateful/stateless.
```dart
// with custom return type T
final result = await Navigator.push(
context,
BackdropModalRoute(
overlayContentBuilder: (context) =>
YourStatelessOrStatefulBackdropOverlayContentWidget(),
),
);
```
Open backdrop with inline widget
```dart
// with inline widget
await Navigator.push(
context,
BackdropModalRoute(
overlayContentBuilder: (context) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(24),
child: RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('Inline Close'),
),
);
},
),
);
```
### Creating custom block modal transitions
```dart
// ... more code
customBuildBlockModalTransitions:
(context, animation, secondaryAnimation, child) {
return RotationTransition(
turns: animation,
child: child,
);
},
// ... more code
```
For more details have a look at the other [examples](https://github.com/hey24sheep/backdrop_modal_route/tree/master/example).
## Properties
| Property | Type | Default | Note |
| ------------------------ |:------------:| --------------------------------: | -------------------------------------------------------------: |
| DEFAULT_BACKDROP_TOP_PADDING | double | 56.0 | |
| overlayContentBuilder (required) | Function | you implement it | |
| backgroundColor | Color | White | |
| topPadding | double | 56.0 | |
| barrierOpacity | double | 0.5 | |
| transitionDurationVal | Duration | milliseconds:500 | |
| isOpaque | boolean | false | |
| canBarrierDismiss | boolean | true | |
| barrierColorVal | Color | black.withOpacity(barrierOpacity) | |
| barrierLabelVal | String | null | |
| shouldMaintainState | bool | true | |
| backdropShape | ShapeBorder | RoundedRectangleBorder | |
| safeAreaLeft | bool | true | Set as 'false' to disable 'Left' Safe Area |
| safeAreaTop | bool | true | Set as 'false' to disable 'Top' (usually status bar) Safe Area |
| safeAreaRight | bool | true | Set as 'false' to disable 'Right' Safe Area |
| safeAreaBottom | bool | true | Set as 'false' to disable 'Bottom' Safe Area |
| safeAreaMinimumPadding | EdgeInsets | topPadding | 'topPadding' is used to set this. Default 56.0. |
| safeAreaMaintainBottomViewPadding | bool | false | |
| isSlideTransitionDefault | bool | true | Toggle between slide or fade transition |
| buildBlockModalTransitions | Function | - | Use this to create custom transition other than fade/slide |
## FAQ
Q. How to hide content using scroll ?
A. You have to implement it yourself and you could add it as parent of OverlayContent.
Check this [#1](https://github.com/hey24sheep/backdrop_modal_route/issues/1)
## Improve
Help me by reporting bugs, **submit new ideas** for features or anything else that you want to share.
- Just [write an issue](https://github.com/hey24sheep/backdrop_modal_route/issues) on GitHub. ✏️
- And don't forget to hit the **like button** for this package ✌️
## More
Check out my other useful packages on [pub.dev](https://pub.dev/publishers/hey24sheep.com/packages)