如何更改 FloatingActionButton 的大小？答案

【问题标题】：How to change the size of FloatingActionButton?如何更改 FloatingActionButton 的大小？
【发布时间】：2019-03-18 02:32:13
【问题描述】：

我正在尝试将大小设置为FloatingActionButton，我想设置width/height，我的意思是，让按钮变大，我正在寻找一个圆形按钮，但只有一个我得到的是这个，所以，我开始使用这个，但我需要它更大一点。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

在Container 或SizedBox 中用FittedBox 包裹您的FAB，然后更改它的宽度和高度。

示例：

floatingActionButton: Container(
        height: 100.0,
        width: 100.0,
        child: FittedBox(
          child: FloatingActionButton(onPressed: () {}),
        ),
      ),

【讨论】：

没有正确和错误的答案，但恕我直言，我认为这是“最佳”答案。
这个答案更符合框架的理念
即使没有合适的盒子，该解决方案也能正常工作。
没有 FittedBox，FAB 的子节点无法缩放。不过 FittedBox 一切正常。这是我找到的最好的解决方案，如果添加适当的“大小”属性会很好。
无论您缩小哪个属性似乎都定义了大小。如果您将高度增加到超过宽度，它不会像您预期的那样变成椭圆形；相反，它沿 y 轴垂直向上移动按钮。因此，如果您对按钮的默认底部感到满意，则只需设置其宽度即可。

【解决方案2】：

使用Container 可以指定width 和height，然后使用RawMaterialButton，如下所示：

final myFabButton = Container(
  width: 200.0,
  height: 200.0,
  child: new RawMaterialButton(
    shape: new CircleBorder(),
    elevation: 0.0,
    child: Icon(
      Icons.favorite,
      color: Colors.blue,
    ),
    onPressed: () {},
  ),
);

【讨论】：

请更新代码，少了一个小括号。谢谢。

【解决方案3】：

您不必重新发明轮子，Flutter 团队知道这是需要的。

不要使用常规的FloatingActionButton()，而是使用FloatingActionButton.extended()

示例代码：

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text("DOWNLOAD"),
),

src: proandroiddev

【讨论】：

这不是OP在问题中提出的问题，请再次阅读问题。

【解决方案4】：

更新

仅使用 SizedBox 似乎不会在 FAB 内缩放子级。您需要在两者之间使用 FittedBox。

  floatingActionButton: SizedBox(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    ),
  ),

感谢chemturion 的评论。

请查看 Raouf Rahiche 的answer 了解更多详情。

旧答案

使用SizedBox

SizedBox(
  width: 200.0,
  height: 200.0,
  child: FloatingActionButton(
    onPressed: () {},
  ),
)

【讨论】：

即使在底部有缺口的导航栏和floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked 下也可以使用，谢谢！
我注意到这种方法和 Container -> FittedBox 方法之间的一个区别是，单独使用 SizedBox 父级时，FAB 中的图标也不会相应地缩放。
@chemturion 你是对的。更新了答案。赞一个！

【解决方案5】：

截图：

小 (40 x 40)

FloatingActionButton.small(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

常规 (56 x 56)

FloatingActionButton(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

大 (96 x 96)

FloatingActionButton.large(
  onPressed: onPressed,
  child: Icon(Icons.edit),
)

扩展

FloatingActionButton.extended(
  onPressed: onPressed,
  label: Text('Extended'),
  icon: Icon(Icons.edit),
)

自定义尺寸（A x B）：

SizedBox(
  width: 20,
  height: 20,
  child: FittedBox(
    child: FloatingActionButton(
      onPressed: onPressed,
      child: Icon(Icons.edit),
    ),
  ),
)

【讨论】：

正是我想要的。谢谢！

【解决方案6】：

这里的大多数答案都使用硬编码值，但实际上我们必须在这里应用通用解决方案，这在所有 UI 中应该是不变的。

Scaffold(
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.2, 
        width: MediaQuery.of(context).size.width * 0.2,
        child: FloatingActionButton(onPressed: () {}),
      ),

使用MediaQuery 设置宽度和高度，这在所有设备上都是相同的。

输出：

【讨论】：

【解决方案7】：

RawMaterialButton(
  elevation: 2.0,
  shape: CircleBorder(),
  fillColor: Colors.red,
  onPressed: (){},
  child: Icon(
    Icons.add,
    color: Colors.white,
    size: 20.0,
  ),
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
)

通过这种方式..您可以添加任何类型的按钮。

【讨论】：

【解决方案8】：

您可以使用Transform.scale() 小部件包装您的按钮：

  floatingActionButton: Transform.scale(
    scale: 1.5,
    child: FloatingActionButton(onPressed: () {}),
  )

【讨论】：

增加比例因子会使按钮从侧面被剪掉。
是的。这种方法不会改变按钮的中心点，所以如果比例太大，边会被剪掉。
相比之下，FittedBox 不仅可以缩放，还可以定位孩子。
另一个选项是使用 - CircleAvatar(radius: 42.0, child: Icon(Icons.add)，它有radius参数。
Transform.scale 是一种相对昂贵的方法

【解决方案9】：

FloatingActionButton 有一个名为 mini 的属性，可以设置为 true。

floatingActionButton: FloatingActionButton(
    mini: true,
    onPressed: (){

    },
    child: Icon(Icons.play_arrow_outlined),
  ),

【讨论】：

【解决方案10】：

这是我在我的一个应用中实现的方式：

floatingActionButton: Container(
    height: 100.0,
    width: 100.0,
    child: FittedBox(
      child: FloatingActionButton(
        onPressed: _loadProgress,
        child: Icon(Icons.ac_unit_outlined),
        child: Text(
          'Get Joke!',
          textAlign: TextAlign.center,
          style: TextStyle(fontWeight: FontWeight.w700, fontSize: 10.0),
        ),
      ),
    ),
  ),

【讨论】：

【解决方案11】：

https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html

use mini: true

FloatingActionButton(
        child: Icon(
          Icons.delete
        ),
        onPressed: () {
        }, mini: true,
      ),

【讨论】：

虽然此代码可能会解决问题，但 including an explanation 关于如何以及为何解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。请注意，感谢您提供解释链接，但最好在此处提供摘要。
我试图帮助您进行格式化，但不确定第一行和最后一行。请仔细检查，使用stackoverflow.com/editing-help

【解决方案12】：

试试这个：

floatingActionButton: Container(
    height: 50.0,
    width: MediaQuery.of(context).size.width * 0.92,
    decoration: BoxDecoration(
        color: Colors.blue, borderRadius: BorderRadius.circular(30)),
    child: Center(
      child: Text(
        'SAVE',
        textAlign: TextAlign.center,
        style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 16.0,
            color: whiteTextColor),
      ),
    ),
  ),

【讨论】：

欢迎来到 Stack Overflow，感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将帮助未来的读者更好地理解正在发生的事情，尤其是那些不熟悉该语言并努力理解这些概念的社区成员。 当已经有社区验证的答案时，这一点尤其重要。 在什么情况下您的方法可能更受欢迎？您是否在利用新功能？
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。