可扩展的浮动操作按钮（使用堆栈）在 flutter 中不起作用

Question

This is my dart file where I want to create a Expandable floating button which is wrapped in Stack widget and I have created a custom IconButton named as CircularButton for Expandable FAB when I try to provide onTap/onPressed gesture in GestureDetector widget or my CircularButton custom widget it does nothing no error and on press of icon it doesnt open to respective app. I tried chaning the return type of customLaunch but that didnt worked too.

Any help is appreciated. thank you,

 import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with TickerProviderStateMixin { void customLaunch(command) async { if (await canLaunch(command)) { await launch(command); } else { print(' could not launch $command'); } } AnimationController animationController; Animation degOneTranslationAnimation, degTwoTranslationAnimation, degThreeTranslationAnimation; Animation rotationAnimation; double getRadiansFromDegree(double degree) { double unitRadian = 57.295779513; return degree / unitRadian; } @override void initState() { animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 600)); degOneTranslationAnimation = TweenSequence(<TweenSequenceItem>[ TweenSequenceItem<double>( tween: Tween<double>(begin: 0.0, end: 1.2), weight: 75.0), TweenSequenceItem<double>( tween: Tween<double>(begin: 1.2, end: 1.0), weight: 25.0), ]).animate(animationController); degTwoTranslationAnimation = TweenSequence(<TweenSequenceItem>[ TweenSequenceItem<double>( tween: Tween<double>(begin: 0.0, end: 1.4), weight: 55.0), TweenSequenceItem<double>( tween: Tween<double>(begin: 1.4, end: 1.0), weight: 45.0) ]).animate(animationController); degThreeTranslationAnimation = TweenSequence(<TweenSequenceItem>[ TweenSequenceItem<double>( tween: Tween<double>(begin: 0.0, end: 1.75), weight: 35.0), TweenSequenceItem<double>( tween: Tween<double>(begin: 1.75, end: 1.0), weight: 65.0) ]).animate(animationController); rotationAnimation = Tween<double>(begin: 180.0, end: 0.0).animate( CurvedAnimation(parent: animationController, curve: Curves.easeOut)); super.initState(); animationController.addListener(() { setState(() {}); }); } @override void dispose() { animationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return DefaultTabController( length: 5, child: Scaffold( floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, floatingActionButton: Stack( children: [ Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(270), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ( getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: Container( decoration: BoxDecoration( color: Colors.black, shape: BoxShape.circle), width: 50, height: 50, child: IconButton( icon: Icon(Icons.repeat, color: Colors.white), enableFeedback: true, onPressed: () => customLaunch('https:google.com')), ), ), ), Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(225), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ( getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: Container( decoration: BoxDecoration( color: Colors.black, shape: BoxShape.circle), width: 50, height: 50, child: GestureDetector( onTap: () => customLaunch('sms:546456464'), child: IconButton( icon: Icon(Icons.chat, color: Colors.white), enableFeedback: true, onPressed: () => {}, ), )), ), ), Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(180), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ( getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( onPressed: () => customLaunch('tel:+91 9478946545'), color: Colors.black, width: 50, height: 50, icon: Icon( Icons.call, color: Colors.white, ), ), ), ), Transform( transform: Matrix4.rotationZ( getRadiansFromDegree(rotationAnimation.value)), alignment: Alignment.center, child: CircularButton( color: Colors.black, width: 60, height: 60, icon: Icon( Icons.menu, color: Colors.white, ), onPressed: () { if (animationController.isCompleted) { animationController.reverse(); } else { animationController.forward(); } }, ), ), ], ), }

class CircularButton extends StatelessWidget {
  final double width;
  final double height;
  final Color color;
  final Icon icon;
  final dynamic onPressed;

  CircularButton({this.color, this.width, this.height, this.icon, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: color, shape: BoxShape.circle),
      width: width,
      height: height,
      child: IconButton(icon: icon, enableFeedback: true, onPressed: onPressed),
    );
  }
}

I just want to open other apps onTap of expanded floating buttons but it isnt opening though no error in code still not working. It doesnt only takes onpressed paramater or onTap.

Answer 1

I just needed to add this the IgnorePointer in stack so that it detects gesture and ignore animations for that particular area the code which I changed is as,

 floatingActionButton: Stack(
      children: <Widget>[
        Positioned(
            right: 30,
            bottom: 30,
            child: Stack(
              alignment: Alignment.bottomRight,
              children: <Widget>[
                IgnorePointer(    // this edit made it worked     
                  child: Container(
                    color: Colors.transparent,
                    height: 150.0,
                    width: 150.0,
                  ),
                ),
                Transform.translate(
                  offset: Offset.fromDirection(getRadiansFromDegree(270),
                      degOneTranslationAnimation.value * 100),
                  child: Transform(
                    transform: Matrix4.rotationZ(
                        getRadiansFromDegree(rotationAnimation.value))
                      ..scale(degOneTranslationAnimation.value),
                    alignment: Alignment.center,
                    child: CircularButton(
                      onClick: () => customLaunch('www.cigarettewala.com'),
                      color: Colors.black,
                      width: 50,
                      height: 50,
                      icon: Icon(
                        Icons.repeat,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),

Answer 2

Stack If used with animation, button click functionality will be broken.

I had the same problem as you! Put the Stack in a container and give it a certain width.

Stack It must have a certain size so that the widgets do not protrude from it.