改变FloatingActionButton的大小

Question

如何更改FloatingActionButton的大小？

我尝试增加图标的大小，但它不会影响周围的圆形形状。我还尝试将按钮包装在PreferredSize小部件中，但这没有任何效果。

- Duncan Jones

Answer 1

将FloatingActionButton包装在一个Container中，指定宽度和高度。

您可以覆盖图标的大小，使其看起来更加自然：

Container(
  width: 80.0,
  height: 80.0,
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(
      Icons.add,
      size: 30.0,
    ),
  ),
);

如果您将此按钮嵌入到BottomAppBar中，则缺口大小会相应调整，我很高兴发现这一点。

- Duncan Jones

Answer 2

Container(
          height: 46.0,
          width: 46.0,
          child: FittedBox(
            child: FloatingActionButton(
              onPressed: () {
                 "your code"
              },
              child: Icon(Icons.arrow_forward_ios),
              backgroundColor: PrimaryColor,
            ),
          ),
        ),

- AlexPad

---

你能解释一下你的答案吗？与被接受的答案相比，看起来你使用了一个FittedBox - 这样做是否避免了调整图标大小的需要？ - Duncan Jones

嗨，邓肯， 感谢你的问题。与其使用图标中的大小，不如使用FittedBox，它会自动调整子元素（在这种情况下是图标）在容器中的大小。您可以使用各种类型的适配，有更多选项可供选择。 - AlexPad