Flutter中如何让IconButton与Text组件实现左对齐？

我编写的Flutter代码如下，运行后发现IconButton组件和下方的"Add Task"文本没有左对齐，需要调整IconButton使其与文本保持一致的左对齐效果（截图显示返回图标视觉上比文本靠右）：

import 'package:flutter/material.dart';
import 'package:calendar_app/consts/routes.dart';

class AddTaskView extends StatelessWidget {
    const AddTaskView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 202, 202, 202),
      body: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 30,
        ),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              IconButton(
                onPressed: () {
                  Navigator.of(context).pushNamedAndRemoveUntil(
                    homePageRoute,
                    (route) => false,
                  );
                },
                icon: const Icon(
                  Icons.arrow_back_ios_new,
                  size: 40,
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Text(
                'Add Task',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 35,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
// Calendar app

问题原因 #

IconButton默认自带内边距，且组件本身有固定的约束尺寸，导致它的视觉位置会比无内边距的Text组件靠右。

解决方案 #

可以通过以下几种方式实现对齐：

方法1：移除IconButton默认内边距并调整约束

给IconButton添加padding: EdgeInsets.zero，同时设置constraints让组件尺寸适配图标大小：

IconButton(
  padding: EdgeInsets.zero, // 移除默认内边距
  constraints: const BoxConstraints(), // 清除默认约束
  onPressed: () {
    Navigator.of(context).pushNamedAndRemoveUntil(
      homePageRoute,
      (route) => false,
    );
  },
  icon: const Icon(
    Icons.arrow_back_ios_new,
    size: 40,
  ),
),

方法2：用Align包裹IconButton强制左对齐

将IconButton放在Align组件中，设置对齐方式为左对齐：

Align(
  alignment: Alignment.centerLeft,
  child: IconButton(
    onPressed: () {
      Navigator.of(context).pushNamedAndRemoveUntil(
        homePageRoute,
        (route) => false,
      );
    },
    icon: const Icon(
      Icons.arrow_back_ios_new,
      size: 40,
    ),
  ),
),

方法3：用GestureDetector替代IconButton

如果需要更灵活的布局控制，可以直接用GestureDetector包裹Icon，完全自定义样式：

GestureDetector(
  onTap: () {
    Navigator.of(context).pushNamedAndRemoveUntil(
      homePageRoute,
      (route) => false,
    );
  },
  child: const Icon(
    Icons.arrow_back_ios_new,
    size: 40,
  ),
),

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