floating_windows 1.0.0 floating_windows: ^1.0.0 copied to clipboard
A widget wrapper that allows a floating widget be dragged and rescaled.
A widget wrapper that allows a floating windows be dragged and rescaled.
Features #
- Floating widget on top of the screen
- Resizing and repositioning the floating widget
- Constrainable space to float inside the tree (optional)
- Limiting borders with padding
- State managment when pushing and poping screens (needs the RouteObserver for managing push)
Getting started #
Add to your pubspec.yaml
file:
dependencies:
flutter:
sdk: flutter
floating_windows: ^1.0.0
Import the package
import 'package:floating_windows/floating_windows.dart';
Usage #
Create a FloatingOverlayController
final controller1 = FloatingOverlayController.absoluteSize(
maxSize: const Size(800, 800),
minSize: const Size(400, 300),
start: Offset.zero,
padding: const EdgeInsets.all(20.0),
constrained: true,
);
final controller2 = FloatingOverlayController.absoluteSize(
maxSize: const Size(800, 800),
minSize: const Size(400, 300),
start: const Offset(100, 100),
padding: const EdgeInsets.all(20.0),
constrained: true,
);
final controller3 = FloatingOverlayController.absoluteSize(
maxSize: const Size(800, 800),
minSize: const Size(300, 500),
start: const Offset(300, 300),
padding: const EdgeInsets.all(20.0),
constrained: true,
);
or
final controller = FloatingOverlayController.relativeSize(
maxScale: 2.0,
minScale: 1.0,
start: Offset.zero,
padding: const EdgeInsets.all(20.0),
constrained: true,
);
Insert the FloatingOverlay widget inside your widget tree and give it the controller, a child and floatingChildren.
FloatingOverlay(
controllers: [controller1, controller2, controller3],
floatingChildren: [
SizedBox(
width: 400,
height: 300,
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
border: Border.all(
color: Colors.black,
width: 5.0,
),
),
),
),
SizedBox(
width: 400,
height: 300,
child: Container(
decoration: BoxDecoration(
color: Colors.amber,
border: Border.all(
color: Colors.black,
width: 5.0,
),
),
),
),
SizedBox(
width: 300,
height: 500,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(
color: Colors.black,
width: 5.0,
),
),
),
),
],
child: Container(),
)
Then use the controller to make the floating child show or hide.
controller.hide();
controller.isFloating;
controller.show();
controller.toggle();