flutterdartflutter-layoutflutter-animation
Flutter Resizable Container using Gestures
I want to create a resizable container which can be resized by user using horizontal drag.
This Gif can explain the requirement:
I tried GestureDetector.horizontal drag but the results are way off:
Container(
color: primary,
width: size.width,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onHorizontalDragUpdate: (details) {
final double newWidth;
if (details.delta.dx > 0) {
// movement in positive direction
final newWidth = size.width + 1;
print(newWidth);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
} else {
// movement in negative direction
final newWidth = math.max(size.width - 1, 5).toDouble();
print(newWidth);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
}
},
child: const Icon(
Icons.navigate_before_rounded,
color: Colors.white,
),
),
GestureDetector(
onHorizontalDragUpdate: (det) {
if (det.delta.dx > 1) {
var newWidth = size.width + 1;
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
} else {
var newWidth = size.width - 1;
newWidth = math.max(newWidth, 10);
final updatedSize = Size(newWidth, size.height);
setState(() {
size = updatedSize;
});
}
},
child: const Icon(
Icons.navigate_next_rounded,
color: Colors.white,
),
),
],
),
),
I am looking for a way to get size change of one side using drag, also the width should decrease or increase on the basis of dragging direction and if possible the whole container can be moved as well.
Solution
Here is an updated version of @Yeasin Sheikh´s answer that takes care of some bugs and avoids both going outside the window and crossing over itself.
class inputBox extends StatefulWidget {
inputBox({Key? key}) : super(key: key);
@override
State<inputBox> createState() => _inputBoxState();
}
class _inputBoxState extends State<inputBox> {
///initial position or size of the bar
double leftPos = 30;
double rightPos = 30;
double transformX = 0;
double barHeight = 30;
double _expandedWidth = 0.0; // keep track of the middle bar width
@override
Widget build(BuildContext context) {
return Center(
child: LayoutBuilder(
builder: (context, constraints) => Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
transform: Matrix4.translationValues(0, 0, 0),
height: barHeight,
width: constraints.maxWidth,
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: leftPos,
right: rightPos,
child: Row(
children: [
GestureDetector(
onTap: () {},
onHorizontalDragUpdate: (DragUpdateDetails details) {
final moveDelta = details.delta;
setState(() {
// Don't let the user pass outside the window or through the right dragbox
if (leftPos > 0 && _expandedWidth > 10) {
leftPos += moveDelta.dx;
} else if (leftPos < 0) {
// Do something when leftPos is less than zero
leftPos = 0.01;
} else if (_expandedWidth < 10) {
// Do something when _expandedWidth is less than
leftPos -= 20;
}
});
},
child: Container(
height: barHeight,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(0),
bottomRight: Radius.circular(0),
topLeft: Radius.circular(barHeight * 0.315),
bottomLeft:
Radius.circular(barHeight * 0.315)),
color: Color.fromARGB(255, 119, 176, 39),
),
child: const Icon(
Icons.navigate_next_rounded,
color: Colors.black,
),
),
),
Expanded(
child: LayoutBuilder(
builder: (BuildContext context,
BoxConstraints constraints) {
double containerWidth = constraints.maxWidth;
_expandedWidth =
containerWidth; // store the current width in a state variable
return GestureDetector(
onTap: () {},
onHorizontalDragUpdate:
(DragUpdateDetails details) {
final moveDelta = details.delta;
setState(() {
if (leftPos > 0 && rightPos > 0) {
leftPos += moveDelta.dx;
rightPos -= moveDelta.dx;
} else if (leftPos < 0) {
// Do something when leftPos is less than zero
leftPos +=
moveDelta.dx + 10; // move back in
rightPos -=
moveDelta.dx + 10; // move back in
} else if (rightPos < 0) {
// Do something when rightPos is less than zero
leftPos +=
moveDelta.dx - 10; // move back in
rightPos -=
moveDelta.dx - 10; // move back in
}
});
},
child: Container(
color: Color.fromARGB(255, 119, 176, 39),
width: containerWidth,
),
);
},
),
),
GestureDetector(
onTap: () {},
onHorizontalDragUpdate:
(DragUpdateDetails details) {
final moveDelta = details.delta;
setState(() {
// Don't let the user pass outside the window or through the left dragbox
if (rightPos > 0 && _expandedWidth > 10) {
rightPos -= moveDelta.dx;
} else if (rightPos < 0) {
// Do something when rightPos is less than zero
rightPos = 0.01;
} else if (_expandedWidth < 10) {
// Do something when _expandedWidth is less than
rightPos -= 20;
}
});
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight:
Radius.circular(barHeight * 0.315),
bottomRight:
Radius.circular(barHeight * 0.315),
topLeft: Radius.circular(0),
bottomLeft: Radius.circular(0)),
color: Color.fromARGB(255, 119, 176, 39),
),
height: barHeight,
child: const Icon(
Icons.navigate_before_rounded,
color: Colors.black,
))),
],
),
)
],
),
)
],
),
),
);
}
}