Skip to content

Flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content

License

Notifications You must be signed in to change notification settings

hey24sheep/backdrop_modal_route

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Backdrop Modal Route

pub package publisher pub package GitHub Stars Platform

Buy Me A Coffee

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

Without null-safety

      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.

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

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

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