使用flutter制作扩展FAB（FloatingActionButton）流体宽度

Question

有没有办法通过颤振来制作像 Material 3 规范中描述的扩展 FAB 流体宽度？

尝试使用合适的盒子：

    return Container(
      width: double.infinity,
      color: Colors.red,
      child: FittedBox(
        child: FloatingActionButton.extended(
            onPressed: () {},
            label: const Text('My button'),
            icon: const Icon(Icons.add),
        ),
      ),
    );

结果，按钮的高度与宽度成正比，因此按钮变得巨大：

尝试限制身高：

    return Container(
      width: double.infinity,
      color: Colors.red,
      height: 88,
      child: FittedBox(
        child: FloatingActionButton.extended(
            onPressed: () {},
            label: const Text('My button'),
            icon: const Icon(Icons.add),
        ),
      ),
    );

结果：按钮已调整大小，并且不占用红色容器中的所有空间：

如何做到这样？：（流体宽度容器是通过其与屏幕尺寸的关系来定义的，例如屏幕宽度或布局网格。）

相关主题

• flutter - 如何更改 FloatingActionButton 的大小？ - 堆栈溢出
• 颤振中的全宽浮动操作按钮？ - 堆栈溢出
• 用户界面 - 如何设置 FloatingActionButton 的大小 - Flutter - Thinbug

Answer 1

return Container(
      width: double.infinity,
      color: Colors.red,
      child: FloatingActionButton.extended(
        onPressed: () {},
        label: const Text('My button'),
        icon: const Icon(Icons.add),
      ),
    ),