Flutter中如何移除AppBar左侧leading图标周围的多余内边距

嘿，我来帮你搞定这个烦人的内边距问题！从你的截图和代码来看，多余的内边距主要来自两个地方：AppBar本身给leading区域预留的默认宽度，以及你用的FlatButton自带的内边距。下面给你两种靠谱的解决办法：

方法一：替换FlatButton为GestureDetector（推荐） #

FlatButton属于Material组件，默认带有8px左右的内边距，而且点击区域会比图标大。换成GestureDetector可以完全自定义点击区域，去掉多余的padding：

修改你的addLeadingIcon方法：

Widget addLeadingIcon() {
  return GestureDetector(
    onTap: () {
      onLeadingShowCategoryClick();
    },
    child: Image.asset(
      Constant.iconNotification,
      width: 25.0,
      height: 25.0,
    ),
  );
}

然后在setAppBar里设置leadingWidth为图标的宽度，覆盖AppBar默认的leading区域宽度（默认是56.0）：

Widget setAppBar() {
  return AppBar(
    title: addAppBarTextWidget('Explore'),
    elevation: 0.0,
    leadingWidth: 25.0, // 与图标宽度一致
    leading: addLeadingIcon(),
    actions: <Widget>[
      addAppBarActionWidget(Constant.iconNotification, 22.0, 16.0, 8.0),
      addAppBarActionWidget(Constant.iconProfile, 30.0, 30.0, 15.0),
    ],
  );
}

方法二：保留FlatButton但移除它的内边距 #

如果你坚持要用FlatButton，可以通过两个属性去掉它的默认padding，同时缩小点击区域：

修改addLeadingIcon：

Widget addLeadingIcon() {
  return Container(
    height: 25.0,
    width: 25.0,
    padding: EdgeInsets.zero,
    margin: EdgeInsets.zero,
    child: FlatButton(
      padding: EdgeInsets.zero, // 移除按钮内部padding
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 缩小点击区域到图标大小
      onPressed: () {
        onLeadingShowCategoryClick();
      },
      child: Image.asset(
        Constant.iconNotification,
        width: 25.0,
        height: 25.0,
      ),
    ),
  );
}

同样别忘了在AppBar里设置leadingWidth: 25.0，这样就能彻底去掉leading区域的多余间距了。

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