flutter_canvas_template_editor/lib/resizeable_e...

import 'package:defer_pointer/defer_pointer.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class EditorTest with ChangeNotifier {
  double _selectedWidth = 150.0;

  double get selectedWidth => _selectedWidth;

  void updateElmWidth(double newWidth) {
    _selectedWidth = newWidth;
    notifyListeners();
  }
}

class ResizableElement extends StatefulWidget {
  @override
  _ResizableElementState createState() => _ResizableElementState();
}

class _ResizableElementState extends State<ResizableElement> {
  double _initialWidth = 150.0; // Initial width of the element
  Offset? _dragStartPosition; // Starting position of the drag

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Resizable Element ")),
      body: DeferredPointerHandler(
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            // Resizable container
            Container(
              width: _initialWidth,
              // height: 100,
              color: Colors.blue[100],
              // alignment: Alignment.center,
              child: Text(
                "Resizable Element $_initialWidth",
                textAlign: TextAlign.center,
              ),
            ),
            // Drag handle
            Positioned(
              right: -30,
              top: 0,
              bottom: 0,
              child: DeferPointer(
                child: Listener(
                  onPointerDown: (event) {
                    _dragStartPosition = event.position;
                  },
                  onPointerMove: (event) {
                    setState(() {
                      if (_dragStartPosition != null) {
                        // Calculate drag delta
                        final delta = event.position.dx - _dragStartPosition!.dx;
                        _initialWidth = (_initialWidth + delta).clamp(75.0, MediaQuery.of(context).size.width);
                        _dragStartPosition = event.position; // Update drag position
                      }
                    });
                  },
                  onPointerUp: (event) {
                    _dragStartPosition = null; // Reset drag start position
                  },
                  child: Container(
                    width: 30,
                    height: 100,
                    color: Colors.blue,
                    child: Icon(
                      Icons.drag_handle,
                      size: 16,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}