Use * (Asterisk) instead of . in flutter textfield - flutter

I have a custom form field to enter pin of the app. Instead of using conventional . when writing the pin, I want to use * like shown in the image below. How do I achieve this?
This is the code of the form Fields:
class PINNumber extends StatelessWidget {
final TextEditingController textEditingController;
final OutlineInputBorder outlineInputBorder;
const PINNumber(
{Key key, this.textEditingController, this.outlineInputBorder})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: 50.0,
child: TextFormField(
controller: textEditingController,
enabled: false,
obscureText: true,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(16.0),
border: outlineInputBorder,
filled: true,
fillColor: Colors.white30,
),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21.0,
color: Colors.black,
),
),
);
}
}


In the TextField widget, there is a property called obscureText, which will make the letters into a dot. But you can override the character to show an asterisk.
obscureText: true,
obscuringCharacter: '*',
So In your case you need to add the obscuringCharacter here:
class PINNumber extends StatelessWidget {
final TextEditingController textEditingController;
final OutlineInputBorder outlineInputBorder;
const PINNumber(
{Key key, this.textEditingController, this.outlineInputBorder})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: 50.0,
child: TextFormField(
controller: textEditingController,
enabled: false,
obscuringCharacter: '*', //added obscuringCharacter here
obscureText: true,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(16.0),
border: outlineInputBorder,
filled: true,
fillColor: Colors.white30,
),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 21.0,
color: Colors.black,
),
),
);
}
}


Set the obsecuring character to *, like this:
TextFormField(obscuringCharacter: '*',),

Related

Is it possible to just use one TextFormField for the email and password?

My idea is to use only one TextFormField for the email and password...
But I also want to make the password obscure, and I have no idea how to implement this, using just a TextFormField
TextFormField inputField({
required String hintText,
required String errorMessage,
required bool isPassword,
}) {
return TextFormField(
decoration: InputDecoration(
enabledBorder: inputBorder(const Color(0xFF000000), 2),
focusedBorder: inputBorder(const Color(0xFF000000), 3),
errorBorder: inputBorder(const Color(0xFFF44336), 2),
focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
hintText: hintText,
hintStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return errorMessage;
}
return null;
},
obscureText: isPassword,
);
}
Padding password:
Padding(
padding: const EdgeInsets.only(top: 24, left: 32, right: 24),
child: Stack(
children: [
SizedBox(
height: 60,
child: Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(right: 16),
child: GestureDetector(
onTap: () {_changeIcon(passwordIcon);},
child: passwordIcon,
),
),
),
),
inputField(
hintText: 'password',
errorMessage: 'Please enter your password',
isPassword: _LoginFormState()._isHidden,
),
],
),
),
Is there any way to implement this? Sorry for anything I just started on Flutter :(

Here is a example:
import 'package:flutter/material.dart';
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
#override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
late TextEditingController _emailEditingController;
late TextEditingController _passwordEditingController;
#override
Widget build(BuildContext context) {
return Column(children: [
inputField(
hintText: 'email',
errorMessage: 'errorMessage',
isPassword: false,
textEditingController: _emailEditingController),
inputField(
hintText: 'password',
errorMessage: 'errorMessage',
isPassword: true,
textEditingController: _passwordEditingController),
]);
}
#override
void dispose() {
_emailEditingController.dispose();
_passwordEditingController.dispose();
super.dispose();
}
}
And your helper method:
TextFormField inputField(
{required String hintText,
required String errorMessage,
required bool isPassword,
required TextEditingController textEditingController}) {
return TextFormField(
decoration: InputDecoration(
enabledBorder: inputBorder(const Color(0xFF000000), 2),
focusedBorder: inputBorder(const Color(0xFF000000), 3),
errorBorder: inputBorder(const Color(0xFFF44336), 2),
focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
hintText: hintText,
hintStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
controller: textEditingController,
validator: (value) {
if (value == null || value.isEmpty) {
return errorMessage;
}
return null;
},
obscureText: isPassword,
);
}
Here you are using TextEditingController to re use these method, if you want more info about it: TextEditingController
Whenever the user modifies a text field with an associated TextEditingController, the text field updates value and the controller notifies its listeners.

add this line your code keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,
TextFormField(
decoration: InputDecoration(
enabledBorder: inputBorder(const Color(0xFF000000), 2),
focusedBorder: inputBorder(const Color(0xFF000000), 3),
errorBorder: inputBorder(const Color(0xFFF44336), 2),
focusedErrorBorder: inputBorder(const Color(0xFFF44336), 3),
hintText: hintText,
hintStyle: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w500,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return errorMessage;
}
return null;
},
keyboardType: isPassword ? TextInputType.text : TextInputType.emailAddress,
obscureText: isPassword,
)

Flutter add value from custom TextFormField and automatically show the value in another customtextformfield

I have a custom Textfield, In my application, the user enters an amount in the textfield with the label quantity, the amount entered should be multiplied with value in another textfield(the value in this textfield is from list on the previous page called price). The total should be automatically calculated in another textfield called total. Below is code that I have tried.
import 'package:flutter/material.dart';
import 'package:kingstar/res/custom_colors.dart';
class CustomFormField extends StatelessWidget {
const CustomFormField({
Key? key,
required TextEditingController controller,
// required FocusNode focusNode,
required TextInputType keyboardType,
required TextInputAction inputAction,
required String label,
required String hint,
required Function(String value) validator,
required Function(String value) onChanged,
this.isObscure = false,
this.isCapitalized = false,
this.maxLines = 1,
this.isLabelEnabled = true,
this.readOnly = false,
}) : _emailController = controller,
// _emailFocusNode = focusNode,
_keyboardtype = keyboardType,
_inputAction = inputAction,
_label = label,
_hint = hint,
_validator = validator,
super(key: key);
final TextEditingController _emailController;
// final FocusNode _emailFocusNode;
final TextInputType _keyboardtype;
final TextInputAction _inputAction;
final String _label;
final String _hint;
final bool isObscure;
final bool isCapitalized;
final int maxLines;
final bool isLabelEnabled;
final Function(String) _validator;
final bool readOnly;
#override
Widget build(BuildContext context) {
return TextFormField(
maxLines: maxLines,
controller: _emailController,
readOnly: readOnly,
// focusNode: _emailFocusNode,
keyboardType: _keyboardtype,
obscureText: isObscure,
textCapitalization:
isCapitalized ? TextCapitalization.words : TextCapitalization.none,
textInputAction: _inputAction,
style: TextStyle(color: Colors.white),
cursorColor: CustomColors.firebaseYellow,
validator: (value) => _validator(value!),
decoration: InputDecoration(
labelText: isLabelEnabled ? _label : null,
labelStyle: TextStyle(color: CustomColors.firebaseYellow),
hintText: _hint,
hintStyle: TextStyle(
color: Colors.white,
),
errorStyle: TextStyle(
color: Colors.redAccent,
fontWeight: FontWeight.bold,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: CustomColors.firebaseAmber,
width: 2,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: CustomColors.firebaseGrey.withOpacity(0.5),
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Colors.redAccent,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
color: Colors.redAccent,
width: 2,
),
),
),
);
}
}
class EditItemForm extends StatefulWidget {
final String currentName;
final String currentPrice;
final String currentQuantity;
final String documentId;
const EditItemForm({
required this.currentName,
required this.currentPrice,
required this.currentQuantity,
required this.documentId,
});
#override
_EditItemFormState createState() => _EditItemFormState();
}
class _EditItemFormState extends State<EditItemForm> {
final _editItemFormKey = GlobalKey<FormState>();
final DocumentReference docId = _salesCollection.doc();
bool _isProcessing = false;
late TextEditingController _nameController;
late TextEditingController _priceController;
late TextEditingController _quantityAvailableController;
late TextEditingController _quantityController;
late TextEditingController _totalController;
int? _total = 0;
late SharedPreferences sharedPreferences;
late String documentId = "", buyer_name = "", buyer_phonenumber="", buyer_email="", buyer_address="", seller_name="", seller_location = "";
late int total;
void _onChange() {
setState(() {
_total = (int.parse( widget.currentPrice) * int.parse(_quantityController.text));
print(int.parse( widget.currentPrice) * int.parse(_quantityController.text));
});
}
textListener() {
_total = (int.parse(_priceController.text) * int.parse(_quantityController.text));
print("Current Text is ${_total.toString()}");
}
#override
void initState() {
_nameController = TextEditingController(
text: widget.currentName,
);
_priceController = TextEditingController(
text: widget.currentPrice,
);
_quantityAvailableController = TextEditingController(
text: widget.currentQuantity,
);
_quantityController = TextEditingController(
text: widget.currentQuantity,
);
_totalController = TextEditingController(
text: widget.currentQuantity,
);
super.initState();
_onChange();
_quantityController.addListener(textListener);
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Form(
key: _editItemFormKey,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 8.0,
right: 8.0,
bottom: 24.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 24.0),
Text(
'Feed Name',
style: TextStyle(
color: CustomColors.firebaseGrey,
fontSize: 22.0,
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
CustomFormField(
readOnly: true,
isLabelEnabled: false,
controller: _nameController,
keyboardType: TextInputType.text,
inputAction: TextInputAction.next,
validator: (value) => Validator.validateField(
value: value,
),
label: 'Feed',
hint: 'Feed Name', onChanged: (String value) { },
),
SizedBox(height: 24.0),
Text(
'Price',
style: TextStyle(
color: CustomColors.firebaseGrey,
fontSize: 22.0,
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
CustomFormField(
// readOnly: true,
isLabelEnabled: false,
controller: _priceController,
keyboardType: TextInputType.text,
inputAction: TextInputAction.done,
validator: (value) => Validator.validateField(
value: value,
),
label: 'Price',
hint: 'Price for' + widget.currentName,
onChanged: (value) => _onChange,
),
SizedBox(height: 24,),
Text(
'Quanity Available',
style: TextStyle(
color: CustomColors.firebaseGrey,
fontSize: 22.0,
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
CustomFormField(
readOnly: true,
isLabelEnabled: false,
controller: _quantityAvailableController,
keyboardType: TextInputType.number,
inputAction: TextInputAction.done,
validator: (value) => Validator.validateField(
value: value,
),
label: 'Quantity',
hint: 'Quantity available for' + widget.currentName,
onChanged: (value) => _onChange,
),
SizedBox(height: 24,),
Text(
'Quanity ',
style: TextStyle(
color: CustomColors.firebaseGrey,
fontSize: 22.0,
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
CustomFormField(
isLabelEnabled: false,
controller: _quantityController,
keyboardType: TextInputType.number,
inputAction: TextInputAction.done,
validator: (value) => Validator.validateField(
value: value,
),
label: 'Quantity',
hint: 'Enter your quantity',
onChanged: (value) => _onChange,
),
SizedBox(height: 24,),
Text(
'Total ',
style: TextStyle(
color: CustomColors.firebaseGrey,
fontSize: 22.0,
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8.0),
CustomFormField(
readOnly: true,
isLabelEnabled: false,
controller: _totalController,
keyboardType: TextInputType.number,
inputAction: TextInputAction.done,
validator: (value) => Validator.validateField(
value: value,
),
label: 'Total',
hint: 'Total',
onChanged: (String value) { },
),
Text(
_total!.toString()
)
],
),
),
_isProcessing
? Padding(
padding: const EdgeInsets.all(16.0),
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
CustomColors.firebaseOrange,
),
),
) ,
}
}
I have tried using the onChange both inside the customFormField but I am still not having the having the value changed in the last CustomFormField with the label total or in the text widget below it.

Use TextEditingController
here is working demo:
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
// value "passed" from other screen
child: MyWidget(price: 12),
),
),
);
}
}
class MyWidget extends StatelessWidget {
double price;
MyWidget({required this.price}) {
controllerPrice.text = this.price.toString();
}
// price "from other screen"
TextEditingController controllerPrice = TextEditingController();
// controller to update Total value
TextEditingController controllerTotal = TextEditingController();
#override
Widget build(BuildContext context) {
return Column(children: [
Text("Quantity:"),
TextField(onChanged: (String t) {
controllerTotal.text =
(double.parse(t) * double.parse(controllerPrice.text)).toString();
}),
Text("Price:"),
TextField(readOnly: true, controller: controllerPrice),
Text("Total:"),
TextField(readOnly: true, controller: controllerTotal),
]);
}
}
}
And dartpad:
https://dartpad.dev/?id=051b6df715ecfa9b54e5a771c3927057&null_safety=true
Of course you need to handle input when you delete everything from Quantity field.

Flutter how to center Textfield on screen after the user taps on it?

I am just wondering how should I go about making the Textfield widget to be on the center of the screen when the user taps on it?
Right now with what I have, the textfield gets the focus but it will be up only enough to barely be above the keyboard.
This is what I have:
class InputTextFields extends StatelessWidget {
InputTextFields(
{this.title,
this.obscureText,
this.setValue,
this.keyboardType,
this.inputTextFieldFocusNode});
final String title;
final bool obscureText;
Function setValue;
TextInputType keyboardType;
FocusNode inputTextFieldFocusNode;
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(bottom: 10, left: 35, right: 35),
child: TextField(
//focusNode: focusNode,
obscureText: obscureText,
keyboardType: keyboardType,
decoration: InputDecoration(
labelText: title,
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
),
),
),
onChanged: setValue,
onTap: () {
inputTextFieldFocusNode.requestFocus();
},
),
);
}
}
They are being used in a SingleChildScrollView with a Column Widget as its children.
Thanks, I wish you a wonderful day

How to use custom text field in another StatefulWidget class with a lot of parameters?

Today I made a custom text field of my own and I want to use it in many of the pages but it contains some arguments.
You can see here
import 'package:flutter/material.dart';
class RequiredText extends StatefulWidget {
#override
_RequiredTextState createState() => _RequiredTextState();
}
class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
return Padding(
padding: const EdgeInsets.only(left: 18.0),
child: TextField(
cursorColor: ColorCursor,
style: TextStyle(
color: ColorField,
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
controller: myController,
decoration: InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(width: 1.5, color: ColorBorder)),
border: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.cyan[200]),
borderRadius: new BorderRadius.all(Radius.circular(20.0))),
helperText: HelperTextField,
labelText: LabelTextField,
labelStyle: TextStyle(
color: Colors.black26,
fontSize: 20.0,
fontFamily: 'DancingScript',
),
icon: Icon(
Icons.apps,
)),
),
);
}
}
But I want to use this in my main.dart class and other pages too.
But it is showing errors
import 'package:AllInOneCalci/CustomTextFields.dart';
import 'package:AllInOneCalci/customAppBar.dart';
import 'package:flutter/material.dart';
class BMICalcUI extends StatefulWidget {
#override
_BMICalcUIState createState() => _BMICalcUIState();
}
class _BMICalcUIState extends State<BMICalcUI> {
#override
Widget build(BuildContext context) {
double AppBarHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: customAppBar(
height: (AppBarHeight / 3) * 0.4,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 18.0),
child: Text(
'All In One Cali',
style: TextStyle(
color: Colors.black,
fontSize: 35.0,
fontFamily: 'DancingScript',
fontWeight: FontWeight.bold),
),
),
],
),
),
body: Padding(
padding: const EdgeInsets.only(top: 18.0),
child: Container(
width: 300.0,
child: Column(
children: [
RequiredText('Height', 'Input height in meters', Colors.cyan[200],
Colors.redAccent, Colors.redAccent),
],
),
),
),
);
}
}
Also I want to use this in many of my pages. Can you help me that how can I do this?
It would be very helpful to me. I am Stuck here
RequiredText('Height', 'Input height in meters', Colors.cyan[200],
Colors.redAccent, Colors.redAccent),
This line is showing error.

String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
you mentioned the param but you didn't initialize it ,
do it in this way
class RequiredText extends StatefulWidget {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
RequiredText(this.LabelTextField,this.HelperTextField,this.ColorBorder,this.ColorField,this.ColorCursor);
#override
_RequiredTextState createState() => _RequiredTextState();
}
class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 18.0),
child: TextField(
cursorColor: widget.ColorCursor,
style: TextStyle(
color: widget.ColorField,
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
controller: myController,
decoration: InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(width: 1.5, color: widget.ColorBorder)),
border: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.cyan[200]),
borderRadius: new BorderRadius.all(Radius.circular(20.0))),
helperText: widget.HelperTextField,
labelText: widget.LabelTextField,
labelStyle: TextStyle(
color: Colors.black26,
fontSize: 20.0,
fontFamily: 'DancingScript',
),
icon: Icon(
Icons.apps,
)),
),
);
}
}

Flutter TextField LabelText Center

The Desired Effect is to have Kartennummer and Passwort centrated.
How is this possible?
I use a custom class for this:
import 'package:flutter/material.dart';
import 'package:impex_shop/styles/impex_styles.dart';
class ImpexTextField extends StatefulWidget {
final TextEditingController controller;
final bool obscureText;
final TextInputType keyboardType;
final String labelText;
final IconData prefixIcon;
final int maxLines;
final TextInputAction textInputAction;
final void Function(String) onSubmitted;
final bool autofocus;
const ImpexTextField(
{Key key,
this.controller,
this.obscureText,
this.keyboardType,
this.labelText,
this.prefixIcon,
this.maxLines = 1,
this.textInputAction,
this.onSubmitted,
this.autofocus = false})
: super(key: key);
#override
_ImpexTextFieldState createState() => _ImpexTextFieldState();
}
class _ImpexTextFieldState extends State<ImpexTextField> {
FocusNode _focusNode = FocusNode();
Paint paint;
InputDecoration buildTextInputDecoration(
String labelText, TextEditingController controller, IconData prefixIcon) {
return InputDecoration(
labelText: labelText,
labelStyle: TextStyle(
color: ImpexColors.mainColor,
height: 0.8, // 0,1 - label will sit on top of border
background: paint,
),
fillColor: ImpexColors.lightGrey,
filled: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.grey,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.secondaryColor,
width: 2.0,
),
),
suffixIcon: InkWell(
onTap: () => controller.clear(),
child: Icon(Icons.cancel),
),
prefixIcon: prefixIcon == null ? null : Icon(prefixIcon),
);
}
#override
Widget build(BuildContext context) {
return Container(
child: ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: <Widget>[
Container(
height: 12,
),
TextField(
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.center,
focusNode: _focusNode,
controller: widget.controller,
obscureText: widget.obscureText ?? false,
maxLines: widget.maxLines,
textInputAction: widget.textInputAction,
decoration: buildTextInputDecoration(
widget.labelText, widget.controller, widget.prefixIcon),
keyboardType: widget.keyboardType,
autofocus: widget.autofocus,
onSubmitted: widget.onSubmitted,
onTap: () => setState(() {
FocusScope.of(context).requestFocus(_focusNode);
}),
),
],
),
);
}
#override
void dispose() {
_focusNode.dispose();
super.dispose();
}
}

A Very and Handy solution to Center the Label:
Since Label is accepting Widget after flutter 2.5.x, so you can wrap your Text widget into
Center widget like this,
TextFormField(
decoration: InputDecoration(
label: const Center(
child: Text("Your Centered Label Text"),
),
),
)
Note:
If Upper border is not Visible due to this, Then:
Try Wraping Center widget to Row, and give mainAxisSize: MainAxisSize.min, this will not cover the entire border

There is a nice decision for this.
Try to use alignLabelWithHint: true.
As example:
TextField(keyboardType: TextInputType.number, textAlign: TextAlign.center, maxLines: 1, decoration: InputDecoration(alignLabelWithHint: true, enabledBorder: InputBorder.none, contentPadding: EdgeInsets.zero, focusedBorder: InputBorder.none, border: InputBorder.none, labelStyle: Theme.of(context).textTheme.headline6, labelText: 'Amount (GPB)'.toUpperCase(),),),

I had a similar problem with labels, my solution was, as Ragu Swaminathan says, to create my own custom widget that used a Stack with the TextField on the bottom and faded Text widget above it. Obviously the text widget doesn't need to be faded but I was just mimicking the style of regular labels.
class CenteredTextField extends StatelessWidget {
final String label;
final TextEditingController controller;
CenteredTextField({
#required this.label,
this.controller,
});
#override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.topCenter,
children: [
Padding(
padding: EdgeInsets.only(top: 12.5),
child: TextField(
textAlign: TextAlign.center,
controller: controller,
),
),
Padding(
padding: EdgeInsets.only(top: 4.0),
child: Opacity(
opacity: 0.7,
child: Text(label),
),
),
],
);
}
}

You can Style TextFormField with Centered Text and Centered Label in Flutter
by using textAlign and floatingLabelAlignment property. I use Flutter 2.10.4
TextFormField(
controller: textController,
textAlign: TextAlign.center,
decoration:
InputDecoration(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(5.0))),
isDense: true,
labelText: 'Label',
hintText: 'Hint',
floatingLabelAlignment: FloatingLabelAlignment.center,
floatingLabelStyle: const TextStyle(fontSize: 16),
labelStyle: const TextStyle(
fontSize: 13, color: Color.fromARGB(255, 152, 121, 11))),
)

Alignment for the label text appears in the screenshot is due to the presence of Prefix Icon. Label text will make a spacing according to the prefix icon present.
And for you, below is the same exact thing that makes the above design.
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
prefixIcon: Icon(Icons.card_giftcard),
hintText: 'Hint Text',
labelText:'Label',
border: const OutlineInputBorder(),
),
)
Try and let know, if that helps you.
EDIT: I think there is no proper way to align the label text alone.

you can use the contentPadding: EdgeInsets.only(left: <Any_value>), property to move the label text

In My case, I need the text field to show some information and update them. So basically I am not strict about sticking with the labelText. So, I done the following trick to center the text.
Instead of using a label text you can use the Text itself and center it with textAlign property.
textAlign: TextAlign.center
By using the controller, you can assign a text to the text field. Also, you can update the textfield if you need a labeltext like effect. (but no animation)
This is my code:
TextEditingController timeText = TextEditingController()..text = '12:24 AM';
...
TextField(
controller: timeText,
enabled: false,
style: TextStyle(fontSize: 20),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Center the text',
alignLabelWithHint: true,
),
textAlign: TextAlign.center,
),
OUTPUT

Well, it's not perfect, but I achieved it by using Center() in the label. Sadly, it erases part of the upper border.
label: Center(child: Text('Label')),

You can achieve thus by using the textAlign property of the TextField and set it to TextALign.center.
Check the code below:
TextField(
// use the text align property
textAlign: TextAlign.center,
decoration: InputDecoration(
labelText: 'Yay, it works',
hintText: 'Center the text',
),
),
OUTPUT: