如何在Flutter中使用CustomPainter制作带FAB凹槽的底部导航栏

问题 #

需要制作一款基于CustomPainter的底部导航栏，核心是实现FloatingActionButton对应的凹槽/边缘造型。

已完成的解决方案更新 #

我通过自定义FloatingActionButtonLocation类，完成了FAB的定位，从而实现了预期的凹槽效果，代码如下：

class CustomFABLocation extends FloatingActionButtonLocation {
  const CustomFABLocation({
    required this.bottomBarHeight,
  });

  final double bottomBarHeight;

  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    final xPos = scaffoldGeometry.scaffoldSize.width * .4;
    final yPos = scaffoldGeometry.scaffoldSize.height - bottomBarHeight - 13.0;

    return Offset(xPos, yPos);
  }
}

效果展示 #

内容的提问来源于stack exchange，提问作者Aljan