动画 FAB 按钮，如 Flutter 中的 Gmail 撰写按钮答案

【问题标题】：Animate FAB button like Gmail Compose Button in Flutter动画 FAB 按钮，如 Flutter 中的 Gmail 撰写按钮
【发布时间】：2021-08-24 09:35:41
【问题描述】：

我正在开发一个button，它的动画效果类似于 Gmail 撰写按钮。这种行为是这样的，在向上滚动时它会缩小到一个以图标为中心的圆圈，而在向下滚动时它会展开以显示图标和文本。我的植入效果很好，但现在的问题是我希望文本具有类似淡入淡出的效果，这样在 FAB 按钮展开后，文本会平滑淡入而不是突然出现。

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoaded = false;
  bool upDirection = true, flag = true;
  ScrollController _scrollController = ScrollController();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  
    _scrollController
      ..addListener(() {
        upDirection = _scrollController.position.userScrollDirection ==
            ScrollDirection.forward;

        // makes sure we don't call setState too much, but only when it is needed
        if (upDirection != flag) setState(() {});
        flag = upDirection;
      });
  }

 

  @override
  Widget build(BuildContext context) {
  
    return new Scaffold(
     
       
      body: Stack(
        children: [
          SingleChildScrollView(
            controller: _scrollController,
            child: Stack(
              children: [
               
          Positioned(
            bottom: MediaQuery.of(context).size.height * 0.1,
            right: 20.0,
            child: AnimatedContainer(
                width: flag ? 170 : 56,
                height: 56,
                duration: Duration(milliseconds: 300),
                child: FloatingActionButton.extended(
                    backgroundColor: AppColors.customFabRed,
                    heroTag: null,
                    onPressed: () {
                    
                    },
                    icon: flag
                        ? Icon(
                            Icons.call,
                            color: Colors.white,
                          )
                        : null,
                    label: flag
                        ? AnimatedOpacity( //trying to get the text to fade in after the fab is expanded but nothing happens
                      opacity: flag ? 1.0 : 0.0,
                      duration: const Duration(milliseconds: 9000),
                          child: Text(
                              'Call a doctor',
                              textAlign: TextAlign.start,
                              style: TextStyle(
                                fontSize: 13.5,
                                height: 1.5,
                                fontWeight: FontWeight.w400,
                                fontFamily: 'Euclid',
                                color: Colors.white,
                              ),
                            ),
                        )
                        : Icon(
                            Icons.call,
                            color: Colors.white,
                          ))),
          ),

        ],
      ),
    );
  }

 
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

试试下面的代码希望对你有帮助：

声明一个布尔变量

bool isFABExtended = false;

为按钮动作改变创建函数：

  void _switchButton() {
    setState(
      () {
        isFABExtended = !isFABExtended;
      },
    );
  }

声明你的小部件：

floatingActionButton: FloatingActionButton.extended(
    onPressed: _switchButton,
    label: AnimatedSwitcher(
      duration: Duration(seconds: 1),
      transitionBuilder: (Widget child, Animation<double> animation) =>
          FadeTransition(
        opacity: animation,
        child: SizeTransition(
          child: child,
          sizeFactor: animation,
          axis: Axis.horizontal,
        ),
      ),
      child: isFABExtended
          ? Icon(Icons.check)
          : Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(right: 4.0),
                  child: Icon(Icons.add),
                ),
                Text("Add Button")
              ],
            ),
    ),
  ),

您的按钮看起来像和

【讨论】：