let's say I have a Stack that takes all the device's width, in this Stack, I have a TextButton widget which I want to shift by 100% to hide on the right side of the Stack. How could I achieve that ?

Context : The goal is to make a component that the user can swipe, when swiping to the left on this component, the TextButton widget appears from the right. Hope that was clear.

CodePudding user response：

There's a flutter widget for that, called dismissible, take a look on those links:

• https://www.youtube.com/watch?v=iEMgjrfuc58
• https://docs.flutter.dev/cookbook/gestures/dismissible

CodePudding user response：

You can use Animated Container and wrap it inside the gesture detector. Detect the horizontal drag/swipe and then increase the width of the container. It will give the impression that the text button is appearing from the right.

Try this:

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

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {

  double _width = 0;
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanUpdate: (details) {
        if (details.delta.dx > 0){
          print("Dragging in  X direction");
          setState(() {
            _width = size.width;
          });
        }
        else
          print("Dragging in -X direction");
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 500),
        width: _width,
        height: 100,
        child: Text('Your text goes here...'),
      ),
    );
  }
}

Hope it helps. :)