How to shift a Text by 100% with flutter? - flutter

Question

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.

Answer 1

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

Answer 2

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. :)