如何修改Flutter中BottomAppBar的高度？已用PreferredSize仍未生效

问题原因 #

BottomAppBar本身默认有固定最小高度（默认56），且内部文本组件的默认行高会撑高布局，导致PreferredSize的高度设置被覆盖，无法生效。

解决方案 #

方案1：用Container强制约束高度 + 调整内部文本样式

通过外层Container固定高度，同时限制内部文本的大小和布局，避免撑高组件：

bottomNavigationBar: PreferredSize(
  preferredSize: const Size.fromHeight(20),
  child: Container(
    height: 20,
    child: BottomAppBar(
      padding: EdgeInsets.zero,
      elevation: 0,
      color: Colors.blue,
      child: Row(
        children: [
          Expanded(
            child: Container(
              height: 20,
              alignment: Alignment.center,
              child: const Text('Add to cart', style: TextStyle(fontSize: 12)),
            ),
          ),
          Expanded(
            child: Container(
              height: 20,
              alignment: Alignment.center,
              child: const Text('Buy Now', style: TextStyle(fontSize: 12)),
            ),
          ),
        ],
      ),
    ),
  ),
),

方案2：直接自定义PreferredSizeWidget（替代BottomAppBar）

如果不需要BottomAppBar的特殊特性，直接用Container实现布局，更易精准控制高度：

bottomNavigationBar: PreferredSize(
  preferredSize: const Size.fromHeight(20),
  child: Container(
    height: 20,
    color: Colors.blue,
    child: Row(
      children: [
        Expanded(
          child: Center(
            child: const Text('Add to cart', style: TextStyle(fontSize: 12, color: Colors.white)),
          ),
        ),
        Expanded(
          child: Center(
            child: const Text('Buy Now', style: TextStyle(fontSize: 12, color: Colors.white)),
          ),
        ),
      ],
    ),
  ),
),

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