0

I'm creating a custom radial menu. I followed this tutorial as starting point : https://fireship.io/lessons/flutter-radial-menu-staggered-animations/ . Now when I add a onTap or Onpressed It doesnt seem to work. After taking a closer look it seems that the translation is not performed on the button location where you need to press (only visualy te buttons move but the button can be pressed where the buttons used to be without the translation).

  void initState() {
    super.initState();

    translation = Tween<double>(begin: 0.0, end: 35.0).animate(
      CurvedAnimation(parent: widget.controller, curve: Curves.elasticOut),
    );
    scale = Tween<double>(begin: 1.5, end: 0.0).animate(
      CurvedAnimation(parent: widget.controller, curve: Curves.fastOutSlowIn),
    );
    rotation = Tween<double>(begin: 0.0, end: 360.0).animate(
      CurvedAnimation(
        parent: widget.controller,
        curve: Interval(0.0, 0.9, curve: Curves.decelerate),
      ),
    );
  }
Widget _buildButton(double angle,
    {required Color color,
    required IconData icon,
    required LikeType likeType}) {
  final double rad = radians(angle);
  return Transform(
    transform: Matrix4.identity()
      ..translate(
          (translation.value) * cos(rad), (translation.value) * sin(rad)),
    child: ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: color, // Set the button's background color
        shape: CircleBorder(), // Make the button circular
      ),
      onPressed: () {
        logger.d("This should print");
        react(likeType);
      },
      child: Icon(icon),
    ),
  );
}

What is the correct way to do the animation and keep the right functionality of the buttons ? thanks

Tried to do animation on buttons without loosing their functionality

0

Browse other questions tagged or ask your own question.