draggable_float_widget

Description:

draggable float widget

draggable_float_widget #
This is a draggable and floating Flutter widget, which can control its visibility through the scrolling event of ScrollView.
Usage #
To use this plugin, add draggable_float_widget as a dependency in your pubspec.yaml file.
constructor


the constructor of component
DraggableFloatWidget({
Key? key,
this.width = defaultWidgetWidth,
this.height = defaultWidgetHeight,
this.eventStreamController,
this.config = const DraggableFloatWidgetBaseConfig(),
required this.child,
this.onTap,
}) : super(key: key);
copied to clipboard


special field instructions



property
description
default




eventStreamController
The [StreamController] of [OperateEvent]
null


config
the base config of [DraggableFloatWidget]
DraggableFloatWidgetBaseConfig()





the base config of component
DraggableFloatWidgetBaseConfig({
this.isFullScreen = true,
this.appBarHeight = kToolbarHeight,
this.initPositionXInLeft = true,
this.initPositionYInTop = true,
this.initPositionYMarginBorder = 0,
this.borderLeft = defaultBorderWidth,
this.borderRight = defaultBorderWidth,
this.borderTop = defaultBorderWidth,
this.borderTopContainTopBar = false,
this.borderBottom = defaultBorderWidth,
this.exposedPartWidthWhenHidden = defaultExposedPartWidthWhenHidden,
this.animDuration = const Duration(milliseconds: 300),
this.delayShowDuration = const Duration(milliseconds: 500),
this.debug = false,
});
copied to clipboard


example


the first, add scroll listener
⚠️Ignore this step if the component is not affected by ScrollView scrolling, and you don't need to pass an StreamController instance into the instance.
NotificationListener(
onNotification: (notification) {
if (notification is ScrollStartNotification) {
eventStreamController.add(OperateEvent.OPERATE_HIDE);
} else if (notification is ScrollEndNotification) {
eventStreamController.add(OperateEvent.OPERATE_SHOW);
}
return true;
},
child: ListView(...),
)
copied to clipboard


the first way: stack mode
Stack(
children: [
listView,
DraggableFloatWidget(
child: child,
eventStreamController: eventStreamController,
config: DraggableFloatWidgetBaseConfig(
isFullScreen: false,
initPositionYInTop: false,
initPositionYMarginBorder: 50,
borderBottom: navigatorBarHeight + defaultBorderWidth,
),
onTap: () => print("Drag onTap!"),
)
],
)
copied to clipboard



the second way: overlay mode
_overlayEntry = OverlayEntry(builder: (context) {
return DraggableFloatWidget(
child: widget.child,
eventStreamController: widget.eventStreamController,
config: DraggableFloatWidgetBaseConfig(
initPositionYInTop: false,
initPositionYMarginBorder: 50,
borderTopContainTopBar: true,
borderBottom: widget.navigatorBarHeight + defaultBorderWidth,
),
onTap: () => print("Drag onTap!"),
);
});

/// Warning: context cannot be the context of MaterialApp
Overlay.of(context)?.insert(_overlayEntry!);
copied to clipboard



Contributions #
If you encounter any problem or the library is missing a feature feel free to open an issue. Feel free to fork, improve the package and make pull request.
License #
MIT