flutter - 是否可以向停靠的浮动操作按钮添加填充或边距？

Question

如下图所示，我的按钮在靠近屏幕边缘时感觉不舒服。有没有办法在保持缺口外观的同时将按钮移动到远离屏幕边缘的位置？如果我向按钮添加填充，它会正确移动按钮，但槽口会弄乱..

参考代码：

      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(
          height: 70.0,
        ),
      ),

      floatingActionButton: Container(
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.menu),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,

如果我在按钮上使用边距或填充，它会是什么样子：

标签： flutterflutter-layout

Answer 1

我有 x 范围的硬编码 100，您可以根据您的要求进行修改

步骤1：

static const double fabIconHeight= 50.0;

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: LayoutBuilder(
      builder: (context, constraint) {
        return Scaffold(
          bottomNavigationBar: BottomAppBar(
            shape: const CircularNotchedRectangle(),
            child:  Container(
            height: 70.0,
            )
          ),
          floatingActionButton: new FloatingActionButton(
            child: Icon(Icons.dehaze),
            onPressed: () {},
          ),
          floatingActionButtonLocation: CustomFloatingActionButtonLocation(
              constraint.maxWidth - 100,
              constraint.maxHeight - fabIconHeight - (fabIconHeight / 2)),
        );
      },
    ),
  );
}

第2步：

class CustomFloatingActionButtonLocation implements FloatingActionButtonLocation {
  final double x;
  final double y;
  const CustomFloatingActionButtonLocation(this.x, this.y);

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    return Offset(x, y);
  }
}

或者

class CustomFloatingActionButtonLocation
    implements FloatingActionButtonLocation {
  static const double fabIconHeight = 50.0;

  const CustomFloatingActionButtonLocation();

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    return Offset(
        scaffoldGeometry.scaffoldSize.width - 100,
        scaffoldGeometry.scaffoldSize.height - (70.0 / 2) -
            fabIconHeight -
            (fabIconHeight / 2));
  }
}