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:
Related
I am designing a phone number input box. The default style will be like the first image, but when the textError appears, the style will break like the second image. Is there a way to keep the spacing from user text input to the bottom line like the default style when error not showing?
first image
second image
NumberTextField widget, the widget as large as shown in the picture, including the flag and the TextFieldWidget. widget
Widgets:
import 'package:flutter/material.dart';
import 'package:online_croceries/widgets/textfield_widget.dart';
class NumberTextField extends StatelessWidget {
String? urlImageFlag;
int? code;
final TextEditingController? textEditingController;
ValueChanged? onChanged;
final String? error_text;
NumberTextField({Key? key, urlImage, code, required this.textEditingController,this.onChanged, required this.error_text})
: super(key: key);
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(5.0),
child: Image.asset(
urlImageFlag ?? 'assets/images/flag_country.png',
height: (height / 100) * 3,
width: (width / 100) * 9,
fit: BoxFit.fill,
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0,right:10),
child: Text(
'+${code ?? 880}',
style: const TextStyle(
fontWeight: FontWeight.w600, fontSize: 16.0),
),
),
Expanded(
child:
TextFieldWidget(
inputType: TextInputType.phone,
textController: textEditingController!,
inputAction: TextInputAction.next,
autoFocus: false,
onChanged: onChanged,
errorText: error_text,
),
),
],
),
// const Divider(thickness: 1.5, height: 0.3, color: Colors.grey),
],
);
}
}
TextFieldWidget
#override
Widget build(BuildContext context) {
return Padding(
padding: padding,
child: TextFormField(
controller: textController,
focusNode: focusNode,
onFieldSubmitted: onFieldSubmitted,
onChanged: onChanged,
autofocus: autoFocus,
textInputAction: inputAction,
obscureText: this.isObscure,
maxLength: 25,
keyboardType: this.inputType,
decoration: InputDecoration(
hintText: this.hint,
errorText: errorText,
counterText: '',
// icon: this.isIcon ? Icon(this.icon, color: iconColor) : null
),
),
);
}
Just add a errorBorder in decoration, how you want to be when error is show:
decoration: InputDecoration(
hintText: this.hint,
errorText: errorText,
counterText: '',
// icon: this.isIcon ? Icon(this.icon, color: iconColor) : null
errorBorder: //code how you want..
),
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: '*',),
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
I have started learning Flutter recently and wanted to know how to write code that displays multiple text field of same sized box, text style, decoration. I have written code where i use Text Field for every new input is required instead want to code a dummy and call it where i want the text field and change the hint text. Let say i want to use these structure in all my text field, but don't want to write the whole code once again with different hintText
SizedBox(height: 20),
Container(
//Type TextField
width: width * 0.8,
height: height * 0.053,
color: fcolor,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintText: 'Type',
hintStyle: TextStyle(color: tcolor),
),
style: TextStyle(color: icolor),
),
),
You can create a Widget and pass the hintText and other properties you would like to(as parameters) like below:
Widget _buildTextField({String hintText, // add other properties here}) { // new
return Container(
//Type TextField
width: width * 0.8,
height: height * 0.053,
color: fcolor,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintText: hintText, // pass the hint text parameter here
hintStyle: TextStyle(color: tcolor),
),
style: TextStyle(color: icolor),
),
);
}
Then use the _buildTextField method in your StatelessWidget or StatefulWidget like below:
class StackOver extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
_buildTextField(hintText: 'First Name'),
SizedBox(height: 20,),
_buildTextField(hintText: 'Last Name'),
],
),
);
}
}
Do it like this,
Create a function which returns a widget (..textfield)
Widget getTextField(String hintText){
return Container(
//Type TextField
width: width * 0.8,
height: height * 0.053,
color: fcolor,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
hintText: hintText,
hintStyle: TextStyle(color: tcolor),
),
style: TextStyle(color: icolor),
);
Now, wherever you need textfield, call this method and pass your hintText,
Example,
getTextField("this is hint text");
Declare common textfield widget like this
class CsCommonTextFieldWidget extends StatefulWidget {
const CsCommonTextFieldWidget(
{this.titleText = '',
this.titleTextAlign = TextAlign.center,
required this.isPassword,
required this.hintText,
required this.textController});
final String titleText;
final TextAlign titleTextAlign;
final bool isPassword;
final String hintText;
final TextEditingController textController;
#override
_CsCommonTextFieldWidgetState createState() =>
_CsCommonTextFieldWidgetState();
}
class _CsCommonTextFieldWidgetState extends State<CsCommonTextFieldWidget> {
#override
Widget build(BuildContext context) {
return TextField(
obscureText: widget.isPassword,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
hintText: widget.hintText, // pass the hint text parameter here
hintStyle: TextStyle(color: Colors.black26),
),
style: TextStyle(color: Colors.black),
);
}
}
Usage
Container(
width: double.infinity,
margin: const EdgeInsets.fromLTRB(0, CsDimens.SPACE40, 0, 0),
child: CsCommonTextFieldWidget(
isPassword: false,
hintText: Languages.of(context)!.labelEmail,
textController: emailController,
),
),
I want to add the text through a container border in flutter.
I just want that Address to appear through a gap between the top border. It doesn't seem possible using a positioned widget, because then the border lines would appear through the "Address" text.
Is it at all possible?
Is this what you want?
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
FocusNode focusNode = FocusNode();
bool isFocused = false;
#override
void initState() {
focusNode.addListener(_onFocusChange);
super.initState();
}
void _onFocusChange() {
setState(() => isFocused = !isFocused);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: const EdgeInsets.symmetric(horizontal: 500, vertical: 300),
child: Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 10),
child: TextFormField(
focusNode: focusNode,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30)),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'Address',
style:
isFocused ? TextStyle(color: Colors.blue[800]) : null,
),
),
),
),
],
),
),
);
}
}
As far as I know there is no way to centerized labelText in InputDecoration.
Does it have to be the container border? If not, you can use the TextField with InputDecoration like this:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Label Text',
),
textAlign: TextAlign.center,
),
But Sadly the TextField dose not support the centered label text (textAlign: TextAlign.center, only centers the hint text). If you want to center the label text you have to change the TextField.dart.
This is TextField so it's not like a usual Text because it is editable. If you want it to be like a Text,set enabled: false and give a controller to it and set an initial value. Or you can use TextFormField so you don't have to use a controller. Like this:
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Address',
),
textAlign: TextAlign.center,
enabled: true,
initialValue: 'Address Here',
),