更改 Flutter 中浮动操作按钮的形状

Question

我正在尝试创建一个浮动操作按钮，它同时使用有和没有扩展。

我的要求是当页面滚动时，浮动操作按钮应该从扩展变为不扩展。我面临的问题是形状没有变成圆形。下面我附上了代码和截图。

FloatingActionButton.extended(
          label: AnimatedSwitcher(
            duration: Duration(milliseconds: 500),
            transitionBuilder: (Widget child, Animation<double> animation) => FadeTransition(
              opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
              child: SizeTransition(
                child: child,
                sizeFactor: animation,
                axis: Axis.horizontal,
              ),
            ),
            child: isExtended
                ? SvgPicture.asset(
                  floatIcon,
                )
                : Row(
                    children: [
                      SvgPicture.asset(
                        floatIcon,
                      ),
                      const Text(
                        ' New',
                        style: TextStyle(fontFamily: 'Gilroy Medium', fontSize: 20, color: Color(0xffB0B0B0)),
                      ),
                    ],
                  ),
          ),
          backgroundColor: Colors.black,
          elevation: 0,
          onPressed: () {},
        ),

截图：

谁能帮我解决这个问题。

Answer 1

试试下面的代码，或者你可以使用 flutter_scrolling_fab_animated 包

声明一个布尔变量

bool isFABExtended = false;

为按钮操作更改创建函数：

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

声明您的小部件：

 floatingActionButton: isFABExtended
      ? FloatingActionButton(
          onPressed: _switchButton,
          child: Icon(Icons.check),
        )
      : FloatingActionButton.extended(
          onPressed: _switchButton,
          label: Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(right: 4.0),
                child: Icon(Icons.add),
              ),
              Text("Add Button")
            ],
          ),
        ),

扩展 FloatingActionButton 结果屏幕 ->

循环FloatingActionButton结果->

更改 Flutter 中浮动操作按钮的形状

Change the shape of Floating action button in Flutter

floating-action-button

flutter