如何将大小设置为FloatingActionButton

Question

我试图在Flutter中为FloatingActionButton设置一个大小，我想设置宽度/高度，我的意思是，使按钮变大，我正在寻找一个圆形按钮，但是我唯一得到的就是这个，因此，我开始使用它，但是我需要更大一点。

感谢您的反馈。

Answer 1

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

使用FloatingActionButton()代替常规的FloatingActionButton.extended()

示例代码：

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

src：proandroiddev

Answer 2

用FittedBox或Container内的SizedBox包裹FAB，然后更改其宽度和高度。

  

示例：

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

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

---

与原始大小40相比，FAB 56逻辑像素宽而高。

Answer 5

使用SizedBox

python

Answer 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设置宽度和高度，这在所有设备上都相同。

输出：

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

这样，您可以添加任何类型的按钮。

Answer 9

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: (){},
  );

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

Answer 11

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

use mini: true

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