Search code examples
androidiosflutteranimationmobile

Tried implementing an Animation to a Flutter Widget, but it is not working


I'm trying to animate a widget to its normal position with a smooth slide movement as soon as it shows on the screen, however, after implementing the code below, it did not work, tried multiple things such as changing the Transform.translate to a SlideTransition, i'm still not getting any result.

Is there something wrong with my code? Did I forget to add anything?

class DiscoverCard extends StatefulWidget {

  const DiscoverCard({
    super.key,
    required this.title,
    required this.symbol,
    required this.price,
    required this.imagePath
  });

  final String title;
  final String symbol;
  final String imagePath;
  final String price;

  @override
  State<DiscoverCard> createState() => _DiscoverCardState();
}

class _DiscoverCardState extends State<DiscoverCard>
  with SingleTickerProviderStateMixin {

  late AnimationController controller;
  late Animation<Offset> slide;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200)
    );

    slide = Tween<Offset>(
      begin: const Offset(0.5, 0.0),
      end: const Offset(0.0, 0.0)
    ).animate(controller);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    controller.forward();

    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        return Transform.translate(
          offset: slide.value,
          child: DiscoverCardUI(
            widget: widget
          ),
        ); 
      }
    );
  }
}

Solution

  • I assume you didnt notice the animations.

    try to increse the transalte and duration of your animations. https://api.flutter.dev/flutter/widgets/Transform/Transform.translate.html

    the offset 0.5 seem very small.

      @override
      void initState() {
        controller = AnimationController(
            vsync: this, duration: const Duration(milliseconds: 1000));
    
        slide = Tween<Offset>(
                begin: const Offset(12.5, 0.0), end: const Offset(0.0, 0.0))
            .animate(controller);
    
        super.initState();
      }
    

    I had try it on dartpad. and the animation works fine.

    enter image description here