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

31 Views Asked by At

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
          ),
        ); 
      }
    );
  }
}
1

There are 1 best solutions below

1
pmatatias On BEST ANSWER

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