颤振中心后缀图标文本答案

【问题标题】：Flutter center suffix icon text颤振中心后缀图标文本
【发布时间】：2021-09-22 11:30:16
【问题描述】：

我将 TextFormField 中的文本显示为后缀图标，但问题是它没有显示在中心。如果我提供填充，它可能不会在所有屏幕尺寸下都响应。

我的代码

Container(
    width:
        Width * 0.4,
    child:
        TextFormField(
      textAlignVertical:
          TextAlignVertical
              .center,
      controller:
          servicePriceInput,
      inputFormatters: [
        WhitelistingTextInputFormatter(
            RegExp(
                "[0-9 .]")),
      ],
      decoration:
          new InputDecoration(
        labelText:
            "Price",
        suffixIcon:
            Text(
          currencySet ==
                  1
              ? r"$"
              : currencySet == 2
                  ? r"AED"
                  : currencySet == 3
                      ? r"PKR"
                      : currencySet == 4
                          ? r"SR"
                          : currencySet == 5
                              ? r"£"
                              : '',
          style: TextStyle(
              color:
                  kPrimaryColor,
              fontFamily:
                  'SegoeUI-Bold'),
        ),
        labelStyle: TextStyle(
            color:
                textGreyColor,
            fontFamily:
                'SegoeUI'),
        fillColor:
            Colors
                .white,
        focusedBorder:
            OutlineInputBorder(
          borderSide: BorderSide(
              color:
                  kPrimaryColor,
              width:
                  1.0),
        ),
        enabledBorder:
            OutlineInputBorder(
          borderSide: BorderSide(
              color: Color(
                  0xffE6E6E6),
              width:
                  1.0),
        ),

        border:
            new OutlineInputBorder(
          borderRadius:
              new BorderRadius.circular(
                  10),
          borderSide:
              new BorderSide(
                  color: Color(0xffE6E6E6)),
        ),
        //fillColor: Colors.green
      ),
      keyboardType:
          TextInputType
              .number,
      style: new TextStyle(
          fontFamily:
              "SegoeUI",
          color:
              kPrimaryColor),
    ),
  ),

您可以在图像中看到 AED 显示在我的文本字段文本上方。我想用文字在中心显示它。我尝试了 isCollapsed 和 textAlignVertical 但不起作用。

【问题讨论】：

试试我的回答here希望对你有帮助

标签： flutter dart

【解决方案1】：

您可以使用顶部和底部Padding 作为图标，如下所示：

suffixIcon:
    Padding(
      padding: const EdgeInsets.only(top: 2.5, bottom: 2.5),
        Text(
      currencySet ==
              1
          ? r"$"
          : currencySet == 2
              ? r"AED"
              : currencySet == 3
                  ? r"PKR"
                  : currencySet == 4
                      ? r"SR"
                      : currencySet == 5
                          ? r"£"
                          : '',
        style: TextStyle(
          color:
              kPrimaryColor,
          fontFamily:
              'SegoeUI-Bold'),
    ))

【讨论】：

【解决方案2】：

使用后缀代替 suffixIcon。它会解决你的问题

【讨论】：

【解决方案3】：

您可以将文本包装在 `Center.

【讨论】：