如何改变FloatingActionButton的大小？

Question

我正在尝试将尺寸设置为颤动中的

FloatingActionButton

，我想设置

width

/

height

，我的意思是，让按钮更大，我一直在寻找一个圆形按钮，但我唯一一个得到的是这个，所以，我开始使用这个，但我需要它更大一点。

Answer 1

将 FAB 用

FittedBox

包裹在

Container

或

SizedBox

内，然后更改其宽度和高度。

示例：

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

Answer 2

截图：

---

• 小（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),
      ),
    ),
  )
  

Answer 3

使用

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

Answer 4

您不必重新发明轮子，flutter 团队知道需要这样做。

不要使用常规的

FloatingActionButton()

，而是使用

FloatingActionButton.extended()

示例代码：

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

源代码：proandroiddev

Answer 5

更新

仅使用 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: () {},
  ),
)

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

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

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 10

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

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

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

Answer 11

您可以使用extendPadding。它对我有用

floatingActionButton: FloatingActionButton.extended(
    onPressed: () {
      // Add your onPressed code here!
    },
    extendedPadding:
        const EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
    label: const Text('Approve'),
    icon: const Icon(Icons.thumb_up),
    backgroundColor: Colors.pink,
  ),

Answer 12

请在主题中使用以下选项。

floatingActionButtonTheme: const FloatingActionButtonThemeData(
  sizeConstraints: BoxConstraints.expand(
    width: 60,
    height: 60,
  ),
)

Answer 13

我使用

Expanded

来扩大行或列中按钮的大小：

    content: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(children: [
          Expanded(
              child: FloatingActionButton.extended(