TextFormField 中的提示文本未与前缀和后缀图标对齐

Question

与前缀和后缀图标相比，textformfield 中的提示文本有点提升（感觉好像与两个图标相比是向上的）。

我还附上了我用于此 TextFormfield 的代码：

TextFormField(
            style:
                w400.size12.copyWith(color: BrandColor.foodsearchViewTextColor),
            cursorColor: BrandColor.foodsearchViewTextColor,
            decoration: InputDecoration(
                prefixIcon: Padding(
                  padding: const EdgeInsets.only(right: 18.0),
                  child: IconButton(
                    icon: SvgPicture.asset(
                      SvgAssets.food_search_icon,
                      color: BrandColor.foodsearchViewTextColor,
                    ),
                    onPressed: null,
                  ),
                ),
                suffixIcon: Padding(
                  padding: const EdgeInsets.only(right: 14.0),
                  child: IconButton(
                    icon: SvgPicture.asset(
                      SvgAssets.food_searchview_suffix,
                      color: BrandColor.foodsearchViewTextColor,
                    ),
                    onPressed: null,
                  ),
                ),
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
                focusedErrorBorder: InputBorder.none,
                border: InputBorder.none,
                hintText: foodSearchText,
                hintStyle: w400.size12.copyWith(
                    color: BrandColor.foodsearchViewTextColor, fontSize: 13)),
          ),

我也试过用中心小部件包装 textformfield 但它没有解决问题。 如果有人可以提供帮助，我将不胜感激

Answer 1

您可以像这样在InputDecoration使用contentPadding参数

contentPadding: EdgeInsets.symmetric(vertical: 15)

要么

contentPadding: EdgeInsets.only(top: 15)

您可以借助MaterialApp的theme来全局设置 contentPadding

theme: ThemeData(
            inputDecorationTheme: InputDecorationTheme(
              contentPadding: EdgeInsets.symmetric(vertical: 15),
            ),
          ),

Answer 2

最后，我找到了一个合适的方法来处理它。

我们可以将TextButton用作 SuffixIcon。 大多数时候我们需要将 text/loading 应用于后缀。 我们可以为它提供任何类型的小部件。

这是代码示例，

                    TextFormField(
                        onSaved: (code) {
                          log(code!);
                        },

                        textAlign: TextAlign.center,
                        onChanged: (value) {},
                        decoration: InputDecoration(
                          hintText: "Enter your coupon code here",
                          suffixIcon: TextButton(
                            child: const Text(
                              "Apply",
                              style: TextStyle(color: primaryColor),
                            ),
                            onPressed: () {},
                          ),
                        ),
                      ),

OUTPUT：