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

Question

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

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

Answer 1

我能够使用AnimatedSwitcherwithSizeTransition和让它工作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")
            ],
          ),
        )
      )

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

Answer 2

有一个包可以实现您期望的行为。这是https://pub.dev/packages/flutter_scrolling_fab_animated