Flutter SlideTransition Working in start back not going back on click-CodePudding

What I need to is when page load the container goes to right side by animation from middle. Which is working fine Now I need If I click on left container goes to left by animation right now its just blink and shows to right with out slide.

I have created a dummy code

class changeit extends StatefulWidget {
  const changeit({super.key});

  @override
  State<changeit> createState() => _changeitState();
}

class _changeitState extends State<changeit>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  );

  bool coin10 = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 200,
          ),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                    onTap: () {
                      setState(() {
                        coin10 = true;
                      });
                    },
                    child: Text('LLLLL')),
                SlideTransition(
                  position: Tween<Offset>(
                          begin: Offset(0, 0), end: Offset(coin10 ? -2 : 2, 0))
                      .animate(controller),
                  child: Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                  ),
                ),
                GestureDetector(
                    onTap: () {
                      setState(() {
                        coin10 = false;
                      });
                    },
                    child: Text('RRRRR'))
              ],
            ),
          )
        ],
      ),
    );
  }
}

I don't know why it's not going by animation I try to use offset animations try to change it by function, also tried on click to forward as its working on start but nothing is working for me.

CodePudding user response：

Please try the below code : **

Expected output is :

class changeit extends StatefulWidget {
  const changeit({super.key});

  @override
  State<changeit> createState() => _changeitState();
}

class _changeitState extends State<changeit>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );

  bool coin10 = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(
            height: 200,
          ),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                    onTap: () {
                      setState(() {
                        controller.reverse();
                      });
                    },
                    child: const Text('LLLLL')),
                SlideTransition(
                  position: Tween<Offset>(
                          begin: const Offset(0, 0),
                          end: Offset(coin10 ? -2 : 2, 0))
                      .animate(controller),
                  child: Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                  ),
                ),
                GestureDetector(
                    onTap: () {
                      setState(() {
                        controller.forward();
                      });
                    },
                    child: const Text('RRRRR'))
              ],
            ),
          )
        ],
      ),
    );
  }
}

CodePudding user response：

When trying to run animation & run the animation on demand you need to execute animation programmatically.

When clicking on left or right buttons, you have to call the forward() on controller. like this

setState(() {
   coin10 = true;
});
controller.forward(from: 0);

SUGGESTION

But your current code only run from center to left or center to right. To start animation from square's current position to move far right or far left, you need to maintain position in a variable. Change it like this.

// DECLARE VARIABLE

double position = 0;

//INSIDE initState

   controller.addStatusListener((status) {
      if(status == AnimationStatus.completed) {
        setState((){
          position = coin10 ? -2 : 2;
        });
      }
   });

Change animation begin with position variable

begin: Offset(position, 0)