带后缀的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

尝试使用下面的代码片段在textformField

中添加前缀和后缀创建一个像下面这样的Textfield小部件:

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) {},
),

如果你觉得有用的话，别忘了点赞。