Flutter 带图标的颤振数字文本字段

这就是最终结果：

这是我的代码：

SizedBox(width: 150, child: TextField(
  keyboardType: TextInputType.number,
  textAlign: TextAlign.center,
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    border: new OutlineInputBorder(
      borderRadius: const BorderRadius.all(
        const Radius.circular(10.0),
      ),
    ),
    prefixIcon: IconButton(icon: Icon(MdiIcons.minus), onPressed: () async {

    }),
    suffixIcon: IconButton(icon: Icon(MdiIcons.plus), onPressed: () async {

    })
  )
));

我的问题是，即使我的宽度设置为150，我也只能输入3位数字。屏幕上显示的

123

之外的任何数字都不可见

---

而且它不是中心。

您可以用

内部宽度

它是一个小部件，将其子对象的大小调整为子对象的最大固有宽度

 IntrinsicWidth(
                child: TextField(

但是上面的代码使它在为空时变小，因此您应该使用

ConstrainedBox

ConstrainedBox(
              constraints: BoxConstraints(minWidth: 120),//here is the initial or default width
              child: IntrinsicWidth(
                child: TextField(

正如您所提到的，请记住将

contentPadding:EdgeInsets.zero，

添加到

InputDecoration

以使文本对齐到中心，如果您不这样做，默认情况下文本将向右移动

我想已经完成了

结果:

这是全部代码

    ConstrainedBox(
      constraints: BoxConstraints(minWidth: 120),
      child: IntrinsicWidth(
        child: TextField(
            keyboardType: TextInputType.number,
            textAlign: TextAlign.center,
            textAlignVertical: TextAlignVertical.center,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                prefixIcon: IconButton(
                    icon: Icon(Icons.remove), onPressed: () async {}),
                suffixIcon: IconButton(
                    icon: Icon(Icons.add), onPressed: () async {}))),
      ),
    ),

---

我找到了答案，添加

contentPadding:EdgeInsets.zero，

回答您自己的问题，使其显示为已完成。