Flutter 如何在 AppBar 的标题右侧添加图标

实现方案 #

你可以直接将AppBar的title属性从单个Text组件替换为横向排列的Row组件，即可实现图标紧跟在my app name正右侧的效果，完整修改后的代码如下：

appBar: AppBar(
  title: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(
        'my app name',
        style: TextStyle(
          fontFamily: 'OpenSansBold',
          fontSize: 26.0,
        ),
      ),
      // 调整标题和图标之间的间距，可按需修改数值
      SizedBox(width: 8),
      // 替换为你需要的图标，也可以换成Image组件放自定义logo
      Icon(Icons.your_icon_name, size: 24)
    ],
  ),
),

关键说明 #

• mainAxisSize: MainAxisSize.min是核心配置：它会让Row只占用内容本身需要的宽度，不会撑满整个AppBar的横向空间，避免出现标题居左、图标跑到AppBar最右侧的问题，保证图标始终在标题正右侧
• 如果要放自定义的logo图片，把上面的Icon组件替换为Image.asset('你的logo资源路径', height: 24)即可，注意提前在pubspec.yaml中配置好图片资源的引用路径
• 不需要额外配置点击事件，纯展示的组件即可满足需求

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