draggable_panel_flutter

Description:

draggable panel flutter

draggable_panel_flutter #
Plugin to replicate the DraggablePanel functionality as in Draggable panel in Android.
When the top widget is dragged to bottom it is scaled down to minimum width and height passed to the widget
Demo #

Draggable Panel

Opening a widget between Parent and Panel (draggable_example_four.dart)


Code #
Main class DraggablePanel
DraggablePanel(
parent: Container(color: Colors.grey) // optional, this will as the back widget(behind panel)
topChild: Container(color: Colors.blue, alignment: Alignment.center, child: Icon(Icons.filter, size: 50,),),
bottomChild: Container(color: Colors.red,),)
copied to clipboard

You can push it as new screen (But you won't be able to touch the back stack widget)

Navigator.of(context).push(TransparentRoute(
builder: (ctx) => DraggablePanel(
topChild: Container(color: Colors.blue, alignment: Alignment.center, child: Icon(Icons.filter, size: 50,),),
bottomChild: Container(color: Colors.red,),
)
));
copied to clipboard

If you want to touch the back stack widget when the panel is minimized, pass the parent widget-

DraggablePanel(
parent: Container(color: Colors.grey,)
topChild: Container(color: Colors.blue, alignment: Alignment.center, child: Icon(Icons.filter, size: 50,),),
bottomChild: Container(color: Colors.red,),)
copied to clipboard
Check "Parent passed to draggable panel" example (draggable_example_four.dart) for proper implementation #
With above you will be able to touch parent container and can perform action on the same.
You can also perform operation like show/hide panel, add widgets in between Parent and Panel by accessing the panel state:
GlobalKey<DraggableState> _draggableKey = GlobalKey<DraggableState>();
_draggableKey.currentState.show();

// add widget between panel and parent
_draggableKey.currentState.addWidgetInBetween(Scaffold(body: Container(),));

// remove the widget added between panel and parent
_globalKey.currentState.removeWidget(widget);

// Whether panel is shown or hidden
_globalKey.currentState.isShown();

// To hide panel
_globalKey.currentState.hide();

// To show panel. Here if you pass "reset: true", the panel will be reset to default position i.e maximise
_globalKey.currentState.show({reset: bool});

_globalKey.currentState.maximise(); // To maximise the panel
_globalKey.currentState.minimise(); // to minimise the panel

// to reset the panel values, optionally notify this state change to widget
_globalKey.currentState.resetAttributes({notifyStateChange: bool});

// To make panel full screen
_globalKey.currentState.fullScreen();
copied to clipboard
If you pass the DragListener to the widget then you can listen for the state change
onMinimised(); // When panel minimised
onMaximised(); // When panel maximised
onFullScreen(); // When panel is in fullscreen mode
onDrag(double dragPosition); // When panel is being dragged
onExit(BuildContext context); // When panel is dragged away either horizontally left or right
You can use this context to either pop the widget or you can call hide & reset method to hide the panel and resetting its state to give exit illusion.
copied to clipboard
Other properties of the DraggablePanel-

parent: Parent Widget, widget that you want to place behind the DraggablePanel. Only available in DraggablePanelWithParent class.
topChild: The widget you want to show at top of panel
bottomChild: The widget you want to show after top widget, that covers the remaining panel area.
topChildHeight: The height of the top widget (section)
topChildDockWidth(minimum Width): The width when the top widget is dragged down to dock state
topChildDockHeight(minimum height): The height when the top widget is dragged down to dock state
listener: Listener to get callback when the panel is Dragged, minimised, maximised
defaultShow: Initial state of panel show/hide
dockStateBottomMargin: Bottom margin for dock state
dockStateRightMargin: right margin for dock state
dockModeCornerRadius: corner radius in dock mode
childBetweenTopAndBottom: Widget is placed between Top and Bottom widget
childBetweenTopAndBottomHeight: Height of the between widget
childBetweenTopAndBottomWidth: Width of the between widget
childBetweenTopAndBottomLeftMargin: Left margin for the between child
childBetweenTopAndBottomRightMargin: Right margin for the between child
autoDragAnimationDuration: Animation duration for auto animation

Note: As you can see we have to place every widget inside same stack to access the touch event from panel when minimised. I am looking for something which may allow us to pass touch events to back widget without placing them in same stack. In case you find anything let me know. #