backdrop_modal_route

Description:

backdrop modal route

Backdrop Modal Route #






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
dependencies:
backdrop_modal_route: ^2.0.1
copied to clipboard
Without null-safety
dependencies:
backdrop_modal_route: 1.1.0
copied to clipboard
Getting Started #
Add the dependency to your project and start using Backdrop Modal Route everywhere:
Import the package.
import 'package:backdrop_modal_route/backdrop_modal_route.dart';
copied to clipboard
Open backdrop with your custom widget which could be stateful/stateless.
// with custom return type T
final result = await Navigator.push(
context,
BackdropModalRoute<T>(
overlayContentBuilder: (context) =>
YourStatelessOrStatefulBackdropOverlayContentWidget(),
),
);
copied to clipboard
Open backdrop with inline widget
// with inline widget
await Navigator.push(
context,
BackdropModalRoute<void>(
overlayContentBuilder: (context) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(24),
child: RaisedButton(
onPressed: () => Navigator.pop(context),
child: Text('Inline Close'),
),
);
},
),
);
copied to clipboard
Creating custom block modal transitions #
// ... more code
customBuildBlockModalTransitions:
(context, animation, secondaryAnimation, child) {
return RotationTransition(
turns: animation,
child: child,
);
},
// ... more code

copied to clipboard
For more details have a look at the other examples.
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
Improve #
Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

Just write an issue on GitHub. ✏️
And don't forget to hit the like button for this package ✌️

More #
Check out my other useful packages on pub.dev