I’m trying to implement a feature in Flutter that will allow me to create a fab that works like a quick menu of sorts. I want that when you press it, 2 other fabs appear, which then provide possible options. I managed to get the animation to work, but only the fab that is responsible for the animation works. The other FABs cannot be pressed and do not show any animation when they are tapped.

class _PageScreenState extends ConsumerState<PageScreen> with TickerProviderStateMixin {
  late ShoppingList shoppingList;
  late AnimationController _controller;
  late Animation<Offset> _offsetAnimation1;
  late Animation<Offset> _offsetAnimation2;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(milliseconds: 250),
      vsync: this,
    );

    _offsetAnimation1 = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(0.0, -1.5),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));

    _offsetAnimation2 = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(-1.0, -1.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    int index = ModalRoute.of(context)!.settings.arguments as int;

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.only(bottom: 16.0),
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            SlideTransition(
              position: _offsetAnimation1,
              child: FloatingActionButton(
                heroTag: 'qrButton',
                backgroundColor: Colors.white,
                onPressed: () {
                  // Add functionality here
                  //TODO: This Button is not Pressable
                  print("Button Pressed");
                },
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100),
                  side: BorderSide(color: Theme.of(context).colorScheme.primary),
                ),
                child: Icon(Icons.qr_code, color: Theme.of(context).colorScheme.primary),
              ),
            ),
            SlideTransition(
              position: _offsetAnimation2,
              child: FloatingActionButton(
                heroTag: 'addButton',
                backgroundColor: Colors.white,
                onPressed: () {
                  //TODO: This Button is not Pressable
                  print("Button Pressed")
                },
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(100),
                  side: BorderSide(color: Theme.of(context).colorScheme.primary),
                ),
                child: Icon(Icons.add, color: Theme.of(context).colorScheme.primary),
              ),
            ),
            FloatingActionButton(
              backgroundColor: Colors.white,
              onPressed: () {
                if (_controller.isDismissed) {
                  _controller.forward();
                } else {
                  _controller.reverse();
                }
              },
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(100),
                side: BorderSide(color: Theme.of(context).colorScheme.primary),
              ),
              child: Icon(Icons.menu, color: Theme.of(context).colorScheme.primary),
            ),
          ],
        ),
      ),
      body: Text(
                "Text",
              ),
      ),
    );
  }