Flutter TextField with suffix - flutter

Question

how to create a textfield with centered hint text and suffix icon?
i make centered hint with TextAlign.center
the problem is that when i add an suffix icon hint does not stay in center and moves to left

Answer 1

Well, this is working fine for me.
If it doesn't work, maybe is something else affecting your UI.
Please try this snippet.
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: 'Center the text',
suffixIcon: IconButton(
icon: Icon(Icons.add),
onPressed: () {
debugPrint('click bait');
}
),
),
),

Answer 2

Try with a below code snippet that has prefix and sufixicon in a textformField
Create a Textfield widget like a below:
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,
),
),
);
}
}
and use it wherever like a below :
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) {},
),
Don't forget to upvote if found useful.