在扩展和正常类型之间 flutter 动画 FAB

Question

我想实现一个 float 操作按钮，在扩展和正常大小之间设置动画，如 androids messenger 应用程序所示:https://blog.usejournal.com/expand-collapse-fab-on-scrolling-like-googles-message-app-484df2d9d246

我怎样才能做到这一点？我目前正在考虑使用 AnimatedSwitcher、FloatingActionButton.extended 和 FloatingActionButton 小部件。

Answer 1

我能够使用 AnimatedSwitcher 让它工作与 SizeTransition和 FadeTransition .请看下面的代码。

floatingActionButton:
     FloatingActionButton.extended(
        onPressed: _onFabPress,
        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: isExtended?
          Icon(Icons.arrow_forward):
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(right: 4.0),
                child: Icon(Icons.add),
              ),
              Text("Add To Order")
            ],
          ),
        )
      )

仅图标 View 不是完全圆形的，但我相信可以通过调整填充来修复。