Flutter技术问题：如何将图标完全对齐容器左边缘

问题出在IconButton组件默认自带内边距（padding），这就是图标和蓝色容器左边缘产生间隙的核心原因，不管使用FontAwesome还是Material Icons都会存在这个默认样式。

以下是两种可行的解决方案：

方案一：修改IconButton的默认内边距与对齐方式 #

直接给IconButton设置padding: EdgeInsets.zero去除默认内边距，同时设置alignment: Alignment.centerLeft让图标靠左对齐：

Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    left: false,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 50.w,
          color: Colors.blue,
          margin: EdgeInsets.only(left: 35.w),
          child: IconButton(
            padding: EdgeInsets.zero, // 去除默认内边距
            alignment: Alignment.centerLeft, // 图标靠左对齐
            iconSize: 25.w,
            onPressed: () {},
            icon: const FaIcon(FontAwesomeIcons.bars),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 35.w),
          color: Colors.red,
          width: 20.w,
          height: 20.w,
        )
      ],
    ),
  ),
);}}

方案二：使用GestureDetector替代IconButton（更灵活的控制） #

如果不需要IconButton自带的水波纹等交互效果，或者想要更极致的布局控制，可以用GestureDetector直接包裹Icon组件，完全自定义布局：

Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    left: false,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 50.w,
          color: Colors.blue,
          margin: EdgeInsets.only(left: 35.w),
          child: GestureDetector(
            onTap: () {},
            child: FaIcon(
              FontAwesomeIcons.bars,
              size: 25.w,
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 35.w),
          color: Colors.red,
          width: 20.w,
          height: 20.w,
        )
      ],
    ),
  ),
);}}

以上两种方式都能让图标完美贴合蓝色容器的左边缘，消除任何像素级的间隙。

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