Flutter BottomAppBar自定义求助：侧边内边距致样式异常

想要实现特定样式的BottomAppBar，但当前实现效果与目标不符。尝试给BottomAppBar添加左右内边距来匹配目标样式时，出现了异常效果：添加外层Padding后，BottomAppBar的中间缺口与FloatingActionButton错位，破坏了原本的布局联动。

当前实现代码：

class Test2 extends StatelessWidget {
  const Test2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: const Icon(Icons.ac_unit_sharp,color: Colors.black,),
    onPressed: () {
     
    },
    
  ),
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.only(left:8.0,right: 8),
    child: BottomAppBar(
      shape: CircularNotchedRectangle(),
      color: Colors.red,
      child: Container(
        height: 60,
      ),
    ),
  ),
      body: Column(
        children: [
        ],
      ),
    );
  }
}

直接给BottomAppBar套外层Padding会破坏它与FloatingActionButton的位置联动逻辑，导致缺口错位。正确的做法是利用BottomAppBar自身的padding属性，或者在其内部添加Padding来实现左右留白：

方法一：使用BottomAppBar的padding属性 #

class Test2 extends StatelessWidget {
  const Test2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        child: const Icon(Icons.ac_unit_sharp, color: Colors.black),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        color: Colors.red,
        // 设置内部左右内边距，不影响shape布局
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Container(
          height: 60,
        ),
      ),
      body: const Column(
        children: [],
      ),
    );
  }
}

方法二：在BottomAppBar内部添加Padding #

如果需要仅给底部栏的内容区域留白，而非整个BottomAppBar的背景，可以将内容放在内部Padding中：

bottomNavigationBar: BottomAppBar(
  shape: const CircularNotchedRectangle(),
  color: Colors.red,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Container(
      height: 60,
      // 此处添加导航按钮等内容
    ),
  ),
),

两种方法都能保留BottomAppBar与FloatingActionButton的正确位置关系，同时实现目标样式的左右留白效果。

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