Flutter AppBar定制：如何在leading区域添加自定义盒子

作为Flutter新手，默认AppBar的leading区域确实有固定尺寸限制，直接放超出尺寸的内容就会溢出。下面给你两种实用的实现思路：

方案一：突破默认Leading的约束（快速修改） #

不用完全自定义AppBar，直接给leading区域的内容套个UnconstrainedBox，就能突破父级的尺寸限制，同时保留AppBar的其他默认功能。代码示例：

AppBar(
  leading: UnconstrainedBox(
    // 自定义橙色盒子，尺寸随便设
    child: Container(
      width: 60,
      height: 40,
      margin: EdgeInsets.only(left: 8), // 调整和屏幕边缘的间距
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.circular(6),
      ),
      child: Center(
        child: Text(
          'NEW',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    ),
  ),
  title: Text('首页'),
  actions: [
    IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
  ],
)

这种方法改动小，适合只需要调整leading区域的场景，要是盒子太大可能和标题重叠，记得调整margin或padding规避。

方案二：完全自定义AppBar（灵活可控） #

如果需求更复杂，比如要调整标题位置、添加其他元素，直接自定义一个继承PreferredSizeWidget的AppBar组件，完全掌控布局：

// 自定义AppBar组件
class CustomOrangeAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight); // 和系统AppBar高度一致

  @override
  Widget build(BuildContext context) {
    return Container(
      height: kToolbarHeight,
      padding: EdgeInsets.symmetric(horizontal: 12),
      color: Theme.of(context).primaryColor,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 橙色盒子，想怎么设就怎么设
          Container(
            width: 65,
            height: 38,
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Center(
              child: Text(
                '99+',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          ),
          SizedBox(width: 16), // 盒子和标题的间距
          Expanded(
            child: Text(
              '我的消息',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          ),
          // 右侧操作按钮
          IconButton(
            icon: Icon(Icons.settings, color: Colors.white),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

// 使用时直接替换系统AppBar
Scaffold(
  appBar: CustomOrangeAppBar(),
  body: Center(child: Text('页面内容')),
)

这种方法布局完全由你掌控，没有尺寸限制，还能根据需求调整状态栏适配（比如加SafeArea包裹Container），适合复杂自定义场景。

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