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?