停靠在 Flutter 中的可扩展浮动操作按钮答案

【问题标题】：Expandable floating action button that is docked in Flutter停靠在 Flutter 中的可扩展浮动操作按钮
【发布时间】：2021-10-11 00:53:19
【问题描述】：

我想创建一个可展开的中心停靠浮动操作栏按钮。可展开的浮动动作按钮目前的设计如图所示

浮动操作按钮是一列转换小部件，当按下底部切换按钮时，它会展开/折叠。浮动操作按钮位于中心停靠，形状为 CircularNotchedRectangle，notchMargin 为 10。但是，此方法在折叠和展开时会产生不需要的背景（按钮后面的形状）。我希望它能够看起来像这样。

我将如何尝试解决这个问题。

浮动操作按钮的代码如下所示

floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Transform(
              transform: Matrix4.translationValues(
                  0.0, _translateButton!.value * 3.0, 0.0),
              child: buttonAdd()),
          Transform(
            transform: Matrix4.translationValues(
                0.0, _translateButton!.value * 2.0, 0.0),
            child: buttonFile(),
          ),
          Transform(
            transform:
                Matrix4.translationValues(0.0, _translateButton!.value, 0.0),
            child: buttonFolder(),
          ),
          buttonToggle(),
          SizedBox(height: 30),
        ],
      ),

以及按钮导航栏的代码

bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          color: default_background_color,
          notchMargin: 10,
          child: Container(
            height: 60,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    MaterialButton(
                      onPressed: () {},
                      child: Icon(Icons.home, color: Colors.blue),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    MaterialButton(
                      onPressed: () {},
                      child: Icon(Icons.settings, color: Colors.blue),
                    )
                  ],
                )
              ],
            ),
          ),
),

【问题讨论】：

标签： flutter android-studio

【解决方案1】：

您的自定义 FAB 比普通 FAB 高，因为它有额外的项目。试图把它作为一个停靠的项目来适应并不好。

本教程为我解决了这个问题。 https://codewithandrea.com/articles/adding-animated-overlays-to-your-app/

他通过使用Overlays解决了这个问题。

【讨论】：