如何让 FAB 更宽

Question

如何使底部 FAB 像 下图一样？

这是我当前的代码示例：

class _ItemDetailsState extends State<ItemDetails> {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height * 0.42;
    return Scaffold(
        body: Stack(children: <Widget>[
      CustomScrollView(
        slivers: <Widget>[
          ...
        ],
      ),
      Positioned(
          bottom: 0,
          child: FloatingActionButton(
              elevation: 4,
              onPressed: () {},
              child: Text("SAVE THE CHANGES"),
            ),
          ))
    ]));
  }
}

我尝试了很多，但没有运气:(有什么解决办法吗？谢谢你的建议:)

Answer 1

无法设置 FAB 的大小。相反，您必须使用 RawMaterialButton，复制 FAB 的默认属性并更改大小：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        CustomScrollView(
          slivers: <Widget>[
            ...
          ],
        ),
        RawMaterialButton(
          elevation: 6,
          highlightElevation: 12.0,
          constraints: BoxConstraints(
            minHeight: 48.0,
            minWidth: double.infinity,
            maxHeight: 48.0,
          ),
          fillColor: Theme.of(context).accentColor,
          textStyle: Theme.of(context).accentTextTheme.button.copyWith(
            color: Theme.of(context).accentIconTheme.color,
            letterSpacing: 1.2,
          ),
          child: Text("SAVE THE CHANGE"),
          onPressed: () {},
        )
      ],
    ),
  );
}

如何让 FAB 更宽

How to make FAB wider

dart

material-design

flutter

flutter-sliver