如何让 FAB 更宽答案

【问题标题】：How to make FAB wider如何让 FAB 更宽
【发布时间】：2019-05-18 14:52:01
【问题描述】：

我怎样才能使底部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"),
            ),
          ))
    ]));
  }
}

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

【问题讨论】：

您希望它一直是这种方式，还是具有常规尺寸然后在某些时候扩展？如果你希望它一直这样，为什么不使用常规按钮？
因为我想 FAB 不是常规按钮和底部宽。看照片。抱歉英语不好。顺便说一句，谢谢你的回复：D
FAB 的常规按钮没有做什么？在这种情况下，您似乎只是通过使用 FAB 使您的生活复杂化。
为了清楚起见，FAB 最终只是一个RawMaterialButton 和特定的BoxConstraints。顺便说一句，它的约束也是恒定的，所以不可能改变它。
嗯，常规按钮不浮动对吗？我需要屏幕底部的浮动按钮。

标签： dart flutter material-design flutter-sliver

【解决方案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: () {},
        )
      ],
    ),
  );
}

【讨论】：

感谢您的帮助。但它位于屏幕顶部。如何让它底部？
我认为你没有复制我的整个代码。看看我的Stack。属性alignment: Alignment.bottomCenter 使按钮移到底部。请将其也添加到您的代码中。