Flutter：将图标完美对齐到边缘答案

【问题标题】：Flutter: perfectly align Icons to the edgeFlutter：将图标完美对齐到边缘
【发布时间】：2022-10-07 18:09:51
【问题描述】：

我正在尝试将图标与非常左边缘的蓝色容器。
红色容器仅供参考（我使用的是 ScreenUtil）。
如何将图标完美对齐到蓝色容器的左边缘？这样就没有间隙，甚至没有一个像素？
在这个 sn-p 中，我使用了 FaIcons，但是我对标准材质图标有同样的问题。

 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(
            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,
        )
      ],
    ),
  ),
);}}

标签： flutter dart flutter-layout

【解决方案1】：

从 iconbutton 中删除填充并设置约束。

Widget build(BuildContext context) {
    return Scaffold(
  body: SafeArea(
    left: false,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 50,
          color: Colors.blue,
          margin: EdgeInsets.only(left: 35),
          padding: EdgeInsets.zero,
          alignment: Alignment.centerLeft,
          child: IconButton(
            iconSize: 25,
            padding: EdgeInsets.zero,
            constraints: BoxConstraints(),
            onPressed: () {},
            icon: const Icon(Icons.person,),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 35),
          color: Colors.red,
          width: 20,
          height: 20,
        )
      ],
    ),
  ),
);
}

【讨论】：