Flutter中如何让suffixText与输入框值居中对齐？

我想让TextField的suffixText和输入值在垂直方向居中对齐，但尝试了textAlign: TextAlign.center以及用Align、Center组件都没成功，而这个效果用CSS很容易实现。

我的当前代码：

TextField(
              textAlign: TextAlign.center,
              decoration: InputDecoration(
                  labelText: 'Amount',
                  suffixText: "(700INR)", // 会根据输入动态变化
                  prefixText: "\$"),
              controller: amountController,
              keyboardType: TextInputType.number,
              onSubmitted: (_) => submitData(),
            )

当前效果：输入框内的前缀"$"、输入数值、后缀"(700INR)"垂直方向未居中，整体偏上，仅输入数值水平居中。

预期效果：前缀"$"、输入数值、后缀"(700INR)"在输入框内同时实现水平居中与垂直居中，三者在同一水平线上对齐，整体位于输入框的中间区域（类似CSS中vertical-align: middle的效果）。

Flutter默认InputDecoration里的prefixText和suffixText是和输入文本的基线对齐的，没法直接设置垂直居中，试试这两种方法：

方法1：用prefix/suffix替代文本属性 #

放弃prefixText和suffixText，改用prefix和suffix传入自定义的居中Widget：

TextField(
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    labelText: 'Amount',
    prefix: Center(child: Text("\$")),
    suffix: Center(child: Text("(700INR)")),
  ),
  controller: amountController,
  keyboardType: TextInputType.number,
  onSubmitted: (_) => submitData(),
)

这样前后文本会和输入框的中心对齐，直接解决垂直居中问题。

方法2：自定义Row布局控制整体对齐 #

如果需要更灵活的布局，用Row把前缀、输入框、后缀放在一起，统一设置居中：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text("\$"),
    SizedBox(width: 8),
    Expanded(
      child: TextField(
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          labelText: 'Amount',
          border: InputBorder.none,
        ),
        controller: amountController,
        keyboardType: TextInputType.number,
        onSubmitted: (_) => submitData(),
      ),
    ),
    SizedBox(width: 8),
    Text("(700INR)"),
  ],
)

这种方式能完全掌控每个元素的间距和对齐方式，适合复杂的样式需求。

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