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.

CodePudding user response：

You can use Stack with Positioned widget to handle container sizing and to drag the full container I am using transform.

Run on dartPad

You can play with this widget.

class FContainer extends StatefulWidget {
  FContainer({Key? key}) : super(key: key);

  @override
  State<FContainer> createState() => _FContainerState();
}

class _FContainerState extends State<FContainer> {

  ///initial position
  double leftPos = 33;
  double rightPos = 33;
  double transformX = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: LayoutBuilder(
        builder: (context, constraints) => Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              transform: Matrix4.translationValues(transformX, 0, 0),
              height: 60,
              width: constraints.maxWidth,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    bottom: 0,
                    left: leftPos,
                    right: rightPos,
                    child: Row(
                      children: [
                        GestureDetector(
                          onTap: () {},
                          onHorizontalDragUpdate: (details) {
                            leftPos = details.globalPosition.dx;
                            setState(() {});
                            debugPrint(leftPos.toString());
                          },
                          child: Container(
                            height: 60,
                            color: Colors.purple,
                            child: const Icon(
                              Icons.navigate_next_rounded,
                              color: Colors.black,
                            ),
                          ),
                        ),
                        Expanded(
                          child: GestureDetector(
                            onTap: () {},
                            onHorizontalDragUpdate: (details) {
                              final midPos = details.delta;
                              transformX  = midPos.dx;
                              setState(() {});
                              debugPrint(midPos.toString());
                            },
                            child: Container(
                              color: Colors.purple,
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {},
                          onHorizontalDragUpdate: (details) {
                            rightPos = constraints.maxWidth -
                                details.globalPosition.dx;
                            setState(() {});
                            debugPrint(rightPos.toString());
                          },
                          child: Container(
                            height: 60,
                            color: Colors.purple,
                            child: const Icon(
                              Icons.navigate_before_rounded,
                              color: Colors.black,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

You can wrap with if condition to avoid getting out of the screen.