backdrop_modal_route 2.0.0
backdrop_modal_route: ^2.0.0 copied to clipboard

A flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content.

Backdrop Modal Route #

pub package GitHub Stars Platform

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.

Getting Started #

Add the dependency backdrop_modal_route: ^0.1.0 to your project and start using Backdrop Modal Route everywhere:

import 'package:backdrop_modal_route/backdrop_modal_route.dart';

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(),
      ),
    );

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'),
            ),
          );
        },
      ),
    );

Creating custom block modal transitions #

// NOTE : only for on UIBlock.block as this uses Modal Barrier
// widget block is inline widget replacement with loader widget

// ... 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.

Properties #

PropertyTypeDefaultNote
DEFAULT_BACKDROP_TOP_PADDINGdouble56.0
overlayContentBuilder (required)Functionyou implement it
backgroundColorColorWhite
topPaddingdouble56.0
barrierOpacitydouble0.5
transitionDurationValDurationmilliseconds:500
isOpaquebooleanfalse
canBarrierDismissbooleantrue
barrierColorValColorblack.withOpacity(barrierOpacity)
barrierLabelValStringnull
shouldMaintainStatebooltrue
backdropShapeShapeBorderRoundedRectangleBorder
safeAreaLeftbooltrueSet as 'false' to disable 'Left' Safe Area
safeAreaTopbooltrueSet as 'false' to disable 'Top' (usually status bar) Safe Area
safeAreaRightbooltrueSet as 'false' to disable 'Right' Safe Area
safeAreaBottombooltrueSet as 'false' to disable 'Bottom' Safe Area
safeAreaMinimumPaddingEdgeInsetstopPadding'topPadding' is used to set this. Default 56.0.
safeAreaMaintainBottomViewPaddingboolfalse
isSlideTransitionDefaultbooltrueToggle between slide or fade transition
buildBlockModalTransitionsFunction-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

21
likes
130
pub points
79%
popularity

A flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content.

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on backdrop_modal_route