如何将大小设置为FloatingActionButton

Question

我试图将一个大小设置为一个飘动的FloatingActionButton,我想设置宽度/高度,我的意思是,让按钮更大,我正在寻找一个圆形按钮,但我唯一得到的就是这个,所以,我开始使用它,但我需要它更大一些.

我将不胜感激任何反馈.

Answer 1

你不必重新发明轮子，flutter 团队知道这将是必要的。

而不是经常FloatingActionButton()使用FloatingActionButton.extended()

示例代码：

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

源代码：proandroiddev

Answer 2

用一个FittedBox内部包裹你的FAB Container或SizedBox然后改变它的宽度和高度.

例如:

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

Answer 3

使用Container在那里你可以指定width和height，然后用RawMaterialButton，就像这样：

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

Answer 4

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

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

使用MediaQuery在设备上相同的宽度和高度设置。

输出：

Answer 5

FloatingActionButton(
  mini: true, // set it to true
  onPressed: () {},
)

这使得 FAB40逻辑像素的宽度和高度与其原始大小相比56。

Answer 6

使用SizedBox

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

Answer 7

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

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

Answer 8

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,
  ),
)

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