如何在Flutter的TextButton中实现文本左对齐？

你推测的原因正确，TextButton默认不会占满父容器的宽度，且内部内容默认居中，导致文本无法与左侧的'Starts'、'Ends'对齐。可以通过以下两种方式解决：

方法一：让TextButton占满容器宽度，文本左对齐 #

给TextButton添加style: TextButton.styleFrom(minimumSize: Size.infinite)使其铺满父容器，再设置文本的textAlign: TextAlign.left：

Container(
  height: 50,
  width: 350,
  margin: const EdgeInsets.only(left: 20.0, right: 20.0),
  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0)),
  child: TextButton(
    // 让TextButton占满父容器宽度
    style: TextButton.styleFrom(minimumSize: Size.infinite),
    child: const Text(
      'Add attachment...',
      style: TextStyle(color: CupertinoColors.activeBlue, fontSize: 16),
      textAlign: TextAlign.left,
    ),
    onPressed: () {},
  ),
)

方法二：直接设置TextButton内部内容左对齐 #

在TextButton的style中添加alignment: Alignment.centerLeft，同时让按钮占满容器宽度：

Container(
  height: 50,
  width: 350,
  margin: const EdgeInsets.only(left: 20.0, right: 20.0),
  decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0)),
  child: TextButton(
    style: TextButton.styleFrom(
      minimumSize: Size.infinite,
      alignment: Alignment.centerLeft, // 直接指定内容左对齐
    ),
    child: const Text(
      'Add attachment...',
      style: TextStyle(color: CupertinoColors.activeBlue, fontSize: 16),
    ),
    onPressed: () {},
  ),
)

两种方法都能实现文本与左侧元素对齐的效果，你可以根据习惯选择。

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