Introduce YaruDraggable widget (#142)

example/lib/example_page_items.dart

@@ -5,6 +5,7 @@ import 'package:yaru_widgets_example/pages/carousel_page.dart';
 import 'package:yaru_widgets_example/pages/check_box_row_page.dart';
 import 'package:yaru_widgets_example/pages/color_disk_page.dart';
 import 'package:yaru_widgets_example/pages/color_picker_page.dart';
+import 'package:yaru_widgets_example/pages/draggable_page.dart';
 import 'package:yaru_widgets_example/pages/extra_option_row_page.dart';
 import 'package:yaru_widgets_example/pages/round_toggle_button_page.dart';
 import 'package:yaru_widgets_example/pages/section_page.dart';
@@ -175,7 +176,13 @@ final examplePageItems = <YaruPageItem>[
  ),
  ),
  YaruPageItem(
- titleBuilder: (context) => Text('YaruRoundToggleButton'),
- builder: (context) => RoundToggleButtonPage(),
- iconData: YaruIcons.app_grid)
+ titleBuilder: (context) => Text('YaruRoundToggleButton'),
+ builder: (context) => RoundToggleButtonPage(),
+ iconData: YaruIcons.app_grid,
+ ),
+ YaruPageItem(
+ titleBuilder: (context) => Text('YaruDraggable'),
+ builder: (context) => DraggablePage(),
+ iconData: YaruIcons.drag_handle,
+ ),
 ];

example/lib/pages/draggable_page.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class DraggablePage extends StatelessWidget {
+ const DraggablePage({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ return YaruPage(children: [
+ Container(
+ color: Theme.of(context).colorScheme.onSurface.withOpacity(.1),
+ child: SizedBox(
+ width: 500,
+ height: 250,
+ child: Stack(
+ children: [
+ YaruDraggable(
+ initialPosition: Offset(0, 0),
+ onDragUpdate: (currentPosition, nextPosition) {
+ double dx = nextPosition.dx;
+ double dy = nextPosition.dy;
+
+ if (dx < 0) dx = 0;
+ if (dy < 0) dy = 0;
+ if (dx > 500 - 192) dx = 500 - 192;
+ if (dy > 250 - 108) dy = 250 - 108;
+
+ return Offset(dx, dy);
+ },
+ childBuilder: (context, position, isDragging, isHovering) =>
+ SizedBox(
+ width: 192,
+ height: 108,
+ child: AnimatedOpacity(
+ opacity: isDragging ? 1 : .85,
+ duration: Duration(milliseconds: 100),
+ child: Container(
+ decoration: BoxDecoration(
+ border: Border(top: BorderSide(width: 10)),
+ color: Theme.of(context).primaryColor,
+ ),
+ child: Center(
+ child: Text(
+ position.toString(),
+ style: TextStyle(
+ color: Theme.of(context).colorScheme.onPrimary,
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ cursor: SystemMouseCursors.grab,
+ dragCursor: SystemMouseCursors.grabbing,
+ ),
+ ],
+ ),
+ ),
+ )
+ ]);
+ }
+}

lib/src/yaru_draggable.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+
+/// A draggable positioned widget - have to be child of a [Stack]
+class YaruDraggable extends StatefulWidget {
+ const YaruDraggable({
+ super.key,
+ required this.childBuilder,
+ required this.initialPosition,
+ this.onDragStart,
+ this.onDragUpdate,
+ this.onDragEnd,
+ this.cursor,
+ this.dragCursor,
+ });
+
+ /// Initial position of this element
+ final Offset initialPosition;
+
+ /// Builder callback of the child widget
+ final Widget Function(
+ BuildContext context,
+ Offset position,
+ bool isDragging,
+ bool _isHovering,
+ ) childBuilder;
+
+ /// Callback called when this element starts to be dragged
+ final void Function()? onDragStart;
+
+ /// Callback called on each position update - usefull for collision checks
+ ///
+ /// It takes the current position and the candidate new one and should return the real next position.
+ /// If null, the candidate next position is simply used.
+ final Offset Function(
+ Offset currentPosition,
+ Offset nextPosition,
+ )? onDragUpdate;
+
+ /// Callback called when this element finished to be dragged
+ final void Function()? onDragEnd;
+
+ /// Cursor used when hovering this element, also used when dragging if [dragCursor] is null
+ final MouseCursor? cursor;
+
+ /// Cursor used when dragging this element
+ final MouseCursor? dragCursor;
+
+ @override
+ _YaruDraggableState createState() => _YaruDraggableState();
+}
+
+class _YaruDraggableState extends State<YaruDraggable> {
+ late Offset _position = widget.initialPosition;
+ Offset _initialPosition = const Offset(0, 0);
+ Offset _moveOffset = const Offset(0, 0);
+
+ bool _isDragging = false;
+ bool _isHovering = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Positioned(
+ left: _position.dx,
+ top: _position.dy,
+ child: MouseRegion(
+ cursor: _getCursor(),
+ onEnter: (event) => setState(() {
+ _isHovering = true;
+ }),
+ onExit: (event) => setState(() {
+ _isHovering = false;
+ }),
+ child: GestureDetector(
+ onPanStart: (details) => setState(() {
+ _isDragging = true;
+ _initialPosition = _position;
+ if (widget.onDragStart != null) widget.onDragStart!();
+ }),
+ onPanUpdate: (details) => setState(() {
+ _moveOffset += details.delta;
+
+ final double dx = _initialPosition.dx + _moveOffset.dx;
+ final double dy = _initialPosition.dy + _moveOffset.dy;
+
+ _position = widget.onDragUpdate != null
+ ? widget.onDragUpdate!(_position, Offset(dx, dy))
+ : Offset(dx, dy);
+ }),
+ onPanEnd: (details) => setState(() {
+ _isDragging = false;
+ _moveOffset = const Offset(0, 0);
+ if (widget.onDragEnd != null) widget.onDragEnd!();
+ }),
+ child: Builder(builder: (context) {
+ return widget.childBuilder(
+ context, _position, _isDragging, _isHovering);
+ }),
+ ),
+ ),
+ );
+ }
+
+ MouseCursor _getCursor() {
+ if (widget.cursor == null) {
+ return MouseCursor.defer;
+ }
+
+ if (widget.dragCursor != null && _isDragging) {
+ return widget.dragCursor!;
+ }
+
+ return widget.cursor!;
+ }
+}

lib/yaru_widgets.dart

@@ -8,6 +8,7 @@ export 'src/yaru_color_disk.dart';
 export 'src/yaru_color_picker_button.dart';
 export 'src/yaru_compact_layout.dart';
 export 'src/yaru_dialog_title.dart';
+export 'src/yaru_draggable.dart';
 export 'src/yaru_expandable.dart';
 export 'src/yaru_expansion_panel_list.dart';
 export 'src/yaru_extra_option_row.dart';