0

I have placed a draggable container whose child consists of a positioned container widget with which resizing can be done by using gesture detector widget.

Currently, when I try to resize the parent container by dragging the bottom right positioned child container in z- direction, the container gets resized sometimes and sometimes it gets dragged to another position (as the parent is a draggable widget) inconsistently.

here's the code for ref.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home:  Resize(),
    );
  }
}

class Resize extends StatefulWidget {
  const Resize({super.key});
  @override  _ResizeState createState() => _ResizeState();
}
class _ResizeState extends State<Resize> {
  double height = 30;
  double width = 100;
  double x = 100;
  double y = 100;
  int count = 0;
  Widget container() {
    return Container(
      color: Colors.lightGreen,
      width: width,
      height: height,
    );
  }
  @override  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: const Text('Resize Demo'),
        ),
        body: Stack(
          children: [
            Positioned(
              top: y,
              left: x,
              child: Draggable(
                  onDragEnd: (details) {
                    setState(() {
                      x = details.offset.dx;
                      y = details.offset.dy;
                    });
                  },
                  feedback: Container(
                    color: Colors.lightGreen,
                    height: height,
                    width: width,
                  ),
                  child: resizeContainer(container())),
            ),
          ],
        ));
  }
  Widget resizeContainer(Widget formField) {
    double initX = 0;
    double initY = 0;
    return StatefulBuilder(
        builder: (context, setState) =>          Container(
          height: height + 30,
          width: width + 30,
          child: Stack(clipBehavior: Clip.none, children: [
               Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                        height: height, width: width, child: formField)),
              Positioned(
                  right: -2.5,
                  bottom: -2.5,
                  child: GestureDetector(
                    onVerticalDragStart: (details) {
                      initX = details.globalPosition.dx;
                      initY = details.globalPosition.dy;
                    },
                    onHorizontalDragStart: (details) {
                      initX = details.globalPosition.dx;
                      initY = details.globalPosition.dy;
                    },
                    onVerticalDragUpdate: (details) {
                      final double dx = details.globalPosition.dx - initX;
                      final double dy = details.globalPosition.dy - initY;
                      final double newHeight = height + dy;
                      final double newWidth = width + dx;
                      if (newHeight >= 30) {
                        initY = details.globalPosition.dy;
                        height =
                            newHeight.clamp(30, double.infinity);
                      }

                      if (newWidth >= 100) {
                        initX = details.globalPosition.dx;
                        width = newWidth.clamp(100, double.infinity);
                      }
                      setState(() {});
                    },
                    onHorizontalDragUpdate: (details) {
                      final double dx = details.globalPosition.dx - initX;
                      final double dy = details.globalPosition.dy - initY;
                      final double newHeight = height + dy;
                      final double newWidth = width + dx;
                      if (newHeight >= 30) {
                        initY = details.globalPosition.dy;
                        height =
                            newHeight.clamp(30, double.infinity);
                      }

                      if (newWidth >= 100) {
                        initX = details.globalPosition.dx;
                        width = newWidth.clamp(100, double.infinity);
                      }
                      setState(() {});
                    },
                    child: Container(
                      height: 30,
                      width: 30,
                      color: Colors.blue,
                      child: Center(
                        child: Container(
                          height: 14,
                          width: 14,
                          color: Colors.red,
                        ),
                      ),
                    )),
                  ),
            ])));
  }
}

Is there any way to omit the draggable gestures to get not detected when the position container is dragged for resizing the parent container widget?

srk_sync
  • 339
  • 1
  • 4

0 Answers0