Flutter floatingActionButton 在模态底部（无脚手架）答案

【问题标题】：Flutter floatingActionButton on modal bottom (without scaffold)Flutter floatingActionButton 在模态底部（无脚手架）
【发布时间】：2021-05-27 19:47:04
【问题描述】：

我有一种情况，我希望在点击小部件时可以看到模态底页。这段代码可以正常工作（来自小部件，它基本上是一张“卡片”）：

    return Container(
        color: Colors.white,
        margin: EdgeInsets.symmetric(horizontal: 5.0),
        child: Material(
            child: InkWell(
            onTap: () {
                    showMaterialModalBottomSheet(
                                expand: false,
                                context: context,
                                builder: (context) =>
                                    customiseItemScreen(item: this.item,),
                                );

            },
            ...
            ...

不过，我还想在customiseItemScreen 小部件中显示一个浮动操作按钮。当涉及到脚手架时，这很容易理解：

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton:
...
...

但是由于customiseItemScreen返回的是一个Material（没有脚手架），所以上面的成员不存在。有没有更好的方法来解决这个问题或现有代码可能缺少的解决方案？

提前致谢，

【问题讨论】：

我不知道你的customiteItemScreen，因为你没有包含它，但如果你可以在任何你想要的地方显示一个浮动操作按钮。如果你想在模态表中使用它，你的模态应该返回类似：Column(children:[Container1(),Container2(child:FloatingActionButton())])

标签： flutter modal-dialog floating-action-button bottom-sheet

【解决方案1】：

您可以将 Stack 小部件与 Positioned 小部件一起使用

Stack(
 children: [
  Material(...),
  Positioned(...) //put a button inside and position it with bottom and right
)

【讨论】：

感谢@captain-web，我希望避免使用Positioned 小部件，但事实上我最终还是这样做了，因为我找不到更好的解决方案。对于未来的复制粘贴：dart Positioned( bottom: 10, child: yourChildWidget() ),

【解决方案2】：

您可以将Align 与alignment: Alignment.bottomRight 一起使用，而不是Positioned 作为按钮，如下所示：

Stack(
    children: [
        Material(...),
        Align(
            alignment: Alignment.bottomRight,
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Ink(
                    decoration: const ShapeDecoration(
                        color: Colors.lightBlue,
                        shape: CircleBorder(),
                    ),
                    child: IconButton(
                        icon: const Icon(Icons.add),
                        color: Colors.white,
                        onPressed: () {...},
                    ),
                ),
            ),
        ),
    ],

【讨论】：