如何改变 FloatingActionButton 的大小？

Question

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

Answer 1

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

example :

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

Answer 2

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

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

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

更新

仅使用 SizedBox 似乎无法缩放 FAB 内的子项。您需要在两者之间使用 FittedBox。

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

感谢 chemturion 的评论。

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

旧答案

使用 SizedBox

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

Answer 5

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 6

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

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

示例代码：

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

src: proandroiddev

Answer 7

截图：

小 (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 8

这里的大部分答案都使用硬编码值，但实际上我们必须在这里应用通用解决方案，这在所有 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 9

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

use mini: true

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

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

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

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

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

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

如何改变 FloatingActionButton 的大小？

How to change the size of FloatingActionButton?

dart

flutter

flutter-layout

更新

旧答案

截图：