带有后缀的Flutter TextField

Question

如何创建一个带有居中提示文本和后缀图标的文本字段？ 我用 TextAlign.center 进行居中提示 问题是，当我添加后缀图标提示时，它不会保持在中心位置并移动到左侧

Answer 1

嗯，这对我来说效果很好。

如果不起作用，可能是其他因素影响了您的 UI。

请尝试这个片段。

TextField(
   textAlign: TextAlign.center,
   decoration: InputDecoration(
     hintText: 'Center the text',
     suffixIcon: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            debugPrint('click bait');
          }
       ),
     ),
   ),

Answer 2

尝试使用下面的代码片段，该代码片段在文本表单字段中具有前缀和后缀

创建一个文本字段小部件，如下所示：

import 'package:flutter/material.dart';
import 'package:row_nation/Utils/app_colors.dart';
import 'package:row_nation/Utils/app_font_size.dart';
import 'package:row_nation/Utils/app_font_weight.dart';



class PassWordTextFormFieldWidget extends StatelessWidget {
final TextEditingController controllerName;
final String hintTxt;
final TextInputType keyboardType;
final Color cursorColor;
final Function(String) onChange;
final Function(String) onSaved;
final String? Function(String?)? validatorData;
final IconData prefixIcon;
final IconData suffixIcon;
final Function() sufficIconTap;
PassWordTextFormFieldWidget({
super.key,
required this.controllerName,
required this.hintTxt,
required this.prefixIcon,
required this.keyboardType,
required this.cursorColor,
required this.onChange,
required this.onSaved,
required this.validatorData,
required this.suffixIcon,
required this.sufficIconTap,
});
@override
Widget build(BuildContext context) {
double? height, width;
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Container(
  height: 50,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
    color: AppColors.kEmptyDotColor.withOpacity(0.4),
  ),
  child: TextFormField(
    controller: controllerName,
    cursorColor: cursorColor,
    obscureText: true,
    textAlign: TextAlign.left,
    keyboardType: keyboardType,
    style: Theme.of(context).textTheme.caption?.copyWith(
          color: AppColors.kWhiteColor,
          letterSpacing: 0.2,
          fontSize: AppFontSize.fourteenFontSize,
          fontWeight: AppFontWeight.sixHundredFont,
        ),
    validator: (value) {
      // widget.validatorData!(value);

      return validatorData!(value);
    },
    onChanged: (va) {
      onChange(va);
    },
    onSaved: (val) {
      print(val);
    },
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(
        horizontal: 15,
        vertical: 15,
      ),
      isDense: true,
      hintText: hintTxt,
      hintStyle: Theme.of(context).textTheme.caption?.copyWith(
            color: AppColors.kIconColor,
            fontSize: AppFontSize.twelveFontSize,
            fontWeight: AppFontWeight.fourHundredFont,
          ),
      // When user gets Error

      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(
          color: AppColors.kRedColor,
        ),
      ),

      //  When user getting error and focuses on a textformfield
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(
          color: AppColors.kRedColor,
        ),
      ),
      //  When user Focuses on textformField widget
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: BorderSide(
          color: AppColors.kSplashBackColor,
        ),
      ),

      //   Default TextformField Color
      enabledBorder: InputBorder.none,

      suffixIcon: GestureDetector(
        onTap: () {
          sufficIconTap();
        },
        child: Icon(
          suffixIcon,
          size: 15,
          color: AppColors.kIconColor,
        ),
      ),

      prefixIcon: Icon(
        prefixIcon,
        size: 15,
        color: AppColors.kIconColor,
      ),

      // border: InputBorder.none,
    ),
  ),
);
}
}

并在任何地方使用它，如下所示：

              PassWordTextFormFieldWidget(
              controllerName: passwordController,
              prefixIcon: Icons.lock,
              suffixIcon: Icons.visibility_off,
              sufficIconTap: () {
                print("Visibility Icon Tapped");
              },
              hintTxt: AppStrings.passwordTxt,
              keyboardType: TextInputType.text,
              cursorColor: AppColors.kSplashBackColor,
              onChange: (p0) {},
              onSaved: (p0) {},
              validatorData: (p0) {},
              ),

觉得有用别忘了点赞哦