Stack中的动画FloatingActionButton不会触发onPressed事件

Question

I've created an animated Floating Action Button (FAB) menu: Main FAB which spawns other FABs when clicked. It is based on several online tutorials.

Works fine besides one major issue: The spawned FABs don't trigger an onPressed event.

Seems like there's a problem with the combination of transform animation and the stack widget (which the FABs are children of). Works fine if I replace the stack with a row...

Seems like the issue was addressed here, but without a proper solution: FloatingActionButton onPressed not triggering

Here's the complete code for that FAB menu. Just supply it a list with buttons data, similar to this one:

List<Map<String, dynamic>> _buttonsData = [
{'color': Colors.green ,'icon': Icons.stop},
{'color': Colors.blue ,'icon': Icons.subway},
{'color': Colors.green ,'icon': Icons.add},];
FancyFab2(_buttonsData, null)

The code:

import 'package:flutter/material.dart';


class FancyFab extends StatefulWidget {
  FancyFab(this._buttonsData, this._onSelected);

  final List<Map<String, dynamic>> _buttonsData;
  final ValueChanged<int> _onSelected;

  @override
  createState() => FancyFabState(_buttonsData, _onSelected);
}

class FancyFabState extends State<FancyFab> with SingleTickerProviderStateMixin {
  final List<Map<String, dynamic>> _buttonsData;
  final ValueChanged<int> _onSelected;

  // state vars
  AnimationController _controller;
  Animation <double> _transform;

  bool _isOpened = false;

  FancyFabState(this._buttonsData, this._onSelected);

  @override
  void initState() {
    // call base
    super.initState();

    // _controller
    _controller = AnimationController(
      duration: Duration(milliseconds: 100),
      vsync: this
    );

    _transform = Tween<double>(
      begin: 0.0,
      end: -64.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.fastOutSlowIn
      ),
    );
  }

  @override
  void dispose() {
    // controller
    _controller.dispose();

    // call base
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return _buildFab(_controller);
  }

  Widget _buildFab(AnimationController controller) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, builder) {
        return Stack(
          children: List.generate(_buttonsData.length, (index) => _buildStackWidget(context, index))
        );
      }
    );
  }

  Widget _buildStackWidget(BuildContext context, int index) {
    Map<String, dynamic> buttonData = _buttonsData[index];
    if (index == _buttonsData.length - 1)
      return _buildMenuButton(index, buttonData);
    else
      return _buildMenuItem(index, buttonData);
  }

  Widget _buildMenuItem(int index, Map<String, dynamic> buttonData) {
    return Transform.translate(
      offset: Offset((1 + index) * _transform.value, 0.0),
      child: FloatingActionButton(
        heroTag: 100 + index,
        backgroundColor: buttonData['color'],
        //onPressed: () => _onSelected(index),
        onPressed: () => print('click'),
        child: Icon(buttonData['icon']),
      ),
    );
  }

  Widget _buildMenuButton(int index, Map<String, dynamic> buttonData) {
    return FloatingActionButton(
      heroTag: 200,
      backgroundColor: buttonData['color'],
      onPressed: _toggle,
      child: Icon(buttonData['icon']),
    );
  }

  void _toggle() {
    print('toggle');
    _isOpened = !_isOpened;
    if (true == _isOpened)
      _controller.forward();
    else
      _controller.reverse();
  }

}

Answer 1

That's because you are moving the items outside your Stack so you can't hitTest on those positions.

I modified a few lines of your code to make it works :

• Add constraints to your Stack (you can use SizedBox also) , I'm using container to set a different color of background.

    Widget _buildFab(AnimationController controller) { return AnimatedBuilder( animation: controller, builder: (context, builder) { return Container( width: MediaQuery.of(context).size.width, height: 100, color: Colors.blueGrey, child: Stack( children: List.generate(_buttonsData.length, (index) => _buildStackWidget(context, index))), ); }); } 

• Center your items

    Widget _buildMenuItem(int index, Map<String, dynamic> buttonData) { return Center( child: Transform.translate( offset: Offset((1 + index) * _transform.value, 0.0), child: FloatingActionButton( heroTag: 100 + index, backgroundColor: buttonData['color'], //onPressed: () => _onSelected(index), onPressed: () => print('click'), child: Icon(buttonData['icon']), ), ), ); } Widget _buildMenuButton(int index, Map<String, dynamic> buttonData) { return Center( child: FloatingActionButton( heroTag: 200, backgroundColor: buttonData['color'], onPressed: _toggle, child: Icon(buttonData['icon']), ), ); }