what is solutions for the resizable draggable container in flutter

Question

in this code i have top left and bottom right solution for the drag the container. how to set another all point.

here i have only two point solution not set the all position point. in this code i have top left and bottom right solution for the drag the container. how to set another all point.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: ImageManager(),
        ),
      ),
    );
  }
}

final ballRadius = 7.5;

class ImageManager extends StatefulWidget {
  @override
  _ImageManagerState createState() => _ImageManagerState();
}

class _ImageManagerState extends State<ImageManager> {
  double _x = 0;
  double _y = 0;

  double _height = 200;
  double _width = 300;

  double _aspectRatio = 200 / 300;

  @override
  Widget build(BuildContext context) {
    return Stack(
      // overflow: Overflow.visible,
      children: <Widget>[
        Positioned(
          top: _y,
          left: _x,
          child: GestureDetector(
            onPanUpdate: (DragUpdateDetails details) {
              setState(() {
                _x += details.delta.dx;
                _y += details.delta.dy;
              });
            },
            child: Image.network(
              "https://via.placeholder.com/300x200",
              width: _width,
              fit: BoxFit.fill,
            ),
          ),
        ),

        // top left
        Positioned(
          top: _y - ballRadius,
          left: _x - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {
              var newWidth = _width - dx;
              var newHeight = newWidth * _aspectRatio;
              setState(() {
                _y = _y + (_height - newHeight);
                _x = _x + dx;
                _width = newWidth ;
                _height = newHeight;
              });
            },
            onDragEnd: () {},
          ),
        ),

        // top middle
        Positioned(
          top: _y - ballRadius,
          left: _x + _width / 2 - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // top right
        Positioned(
          top: _y - ballRadius,
          left: _x + _width - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // middle left
        Positioned(
          top: _y + _height / 2 - ballRadius,
          left: _x - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // middle right
        Positioned(
          top: _y + _height / 2 - ballRadius,
          left: _x + _width - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // bottom left
        Positioned(
          top: _y + _height - ballRadius,
          left: _x - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // bottom middle
        Positioned(
          top: _y + _height - ballRadius,
          left: _x + _width / 2 - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {},
            onDragEnd: () {},
          ),
        ),

        // bottom right
        Positioned(
          top: _y + _height - ballRadius,
          left: _x + _width - ballRadius,
          child: Ball(
            onDragStart: () {},
            onDrag: (double dx, double dy) {

              var newWidth = _width + dx;
              var newHeight = newWidth * _aspectRatio;

              setState(() {
                _width = newWidth ;
                _height = newHeight;
              });
            },
            onDragEnd: () {},
          ),
        ),
      ],
    );
  }
}

class Ball extends StatelessWidget {
  final Function onDragStart;
  final Function onDrag;
  final Function onDragEnd;

  const Ball({required this.onDragStart, required this.onDrag, required this.onDragEnd});

  void _onDragStart(DragStartDetails details) {
    if (onDragStart != null) onDragStart();
  }

  void _onDragUpdate(DragUpdateDetails details) {
    if (onDrag != null) onDrag(details.delta.dx, details.delta.dy);
  }

  void _onDragEnd(DragEndDetails details) {
    if (onDragEnd != null) onDragEnd();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanStart: _onDragStart,
      onPanUpdate: _onDragUpdate,
      onPanEnd: _onDragEnd,
      child: Container(
        height: 2 * ballRadius,
        width: 2 * ballRadius,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(ballRadius),
          border: Border.all(
            width: 3,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

in this code i have top left and bottom right solution for the drag the container. how to set another all point.

here i have only two point solution not set the all position point. in this code i have top left and bottom right solution for the drag the container. how to set another all point.

how to solve another position.

Answer 1

I have gone through your questions and code both.

So here is the solution I have found for you. You have not defined onDrag() function for bottom left and top right corners thats why you are facing the issue

You need to add following functions in your code

// bottom left

  Positioned(
      top: _y + _height - ballRadius,
      left: _x - ballRadius,
      child: Ball(
        onDrag: (double dx, double dy) {
          var newWidth = _width - dx;
          var newHeight = _height + dy;
          setState(() {
            _x = _x + dx;
            _width = newWidth;
            _height = newHeight;
          });
        },
        onDragStart: () {},
        //onDrag: (double dx, double dy) {},
        onDragEnd: () {},
      ),
    ),

// top right

    Positioned(
      top: _y - ballRadius,
      left: _x + _width - ballRadius,
      child: Ball(
        onDrag: (double dx, double dy) {
          var newWidth = _width + dx;
          var newHeight = newWidth * _aspectRatio;
          setState(() {
            _y = _y + (_height - newHeight);
            _width = newWidth;
            _height = newHeight;
          });
        },
        onDragStart: () {},
        //onDrag: (double dx, double dy) {},
        onDragEnd: () {},
      ),
    ),

Please try to add this in your code and it will work fine