弯曲缺口底部导航栏出现颤动问题？

Question

我想在 flutter 中创建这个底部导航栏。如何实现这一目标。使用带有弯曲导航栏的中心停靠浮动操作按钮时的问题是：在我的设计中，中心按钮稍微向下放置到凹口处，并且没有通过中心对齐。

这就是我想要实现的设计 我想要实现设计像素完美

这就是我现在拥有的。 我希望按照设计，凹口更深一些，浮动按钮向下

Scaffold(
  appBar: AppBar(
    title: const Text('Custom NavBar Example'),
  ),
  body: Center(
    child: _widgetOptions.elementAt(_selectedIndex),
  ),
  floatingActionButton:
      // Transform.translate(
      //   offset: Offset(0, 10), // Move the FAB 10 pixels down
      // child:
      SizedBox(
    width: 52,
    height: 52,
    child: FloatingActionButton(
      onPressed: () {
        // Add your onPressed code here!
      },
      child: Icon(Icons.add),
      backgroundColor: Colors.blue,
      shape: CircleBorder(), // This ensures a perfectly circular shape
      elevation: 2, // Optional: adjust elevation as needed
    ),
  ),
  //),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 8,
    child: Container(
      height: 86,
      padding: EdgeInsets.symmetric(vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          _buildNavItem(0, Icons.home, 'Home'),
          _buildNavItem(1, Icons.search, 'Search'),
          SizedBox(width: 52), // Space for the FAB
          _buildNavItem(2, Icons.favorite, 'Favorites'),
          _buildNavItem(3, Icons.person, 'Profile'),
        ],
      ),
    ),
  ),
);

Answer 1

尝试用 Transform.translate 小部件包裹 floatActionButton 的 SizedBox

floatingActionButton: Transform.translate(
        offset: Offset(0, 10), // Moves the FAB 10 pixels down
        child: SizedBox(
          width: 52,
          height: 52,
          child: FloatingActionButton(
            onPressed: () {
              // Add your onPressed code here!
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.blue,
            shape: CircleBorder(), 
            elevation: 2, 
          ),
        ),
      ),