I created six digit passcode filed component and it is working fine as expected in bigger size emulator but when I check with small size emulator, the passcode input is hidden by keyboard.
child: TextField(
enableInteractiveSelection: false,
focusNode: focusNode,
controller: widget.controller,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
style: const TextStyle(
height: 0.1,
color: Colors.transparent,
),
decoration: const InputDecoration(
focusedErrorBorder: transparentBorder,
errorBorder: transparentBorder,
disabledBorder: transparentBorder,
enabledBorder: transparentBorder,
focusedBorder: transparentBorder,
helperStyle: TextStyle(
color: Colors.transparent,
),
fillColor: Colors.transparent,
border: InputBorder.none,
),
cursorColor: Colors.transparent,
showCursor: false,
maxLength: widget.maxLength,
onChanged: _onTextChanged,
),
Wrap the whole column within scaffold with SingleChildScrollView with property reverse: true.
Like this:
Can you check this package: keyboard_visibility
You can get the state of your keyboard and based on that hide/show your text widgets. Consider the following code:
class _LoginPageState extends State<LoginPage> {
bool _isKeyboardVisible = false;
StreamSubscription _subscription;
#override
void initState() {
super.initState();
_subscription =
KeyboardVisibilityController().onChange.listen((bool visible) {
setState(() => _isKeyboardVisible = visible);
});
}
#override
void dispose() {
_subscription.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Visibility(
visible: !_isKeyboardVisible,
child: Text("Your header text"),
),
Visibility(
visible: !_isKeyboardVisible,
child: Text("Your description text"),
)
TextField(
...
) // Your PIN widgets
]
);
}
}
Related
how can I call a function whenever there is a change in TextFormField .
I have many of them and it's more like an invoice.
So whenever the user changes a value, I need to make some mathematical operations.
The problem is that sometimes some TextFormField could be NULL (User did'tn insert a value yet) and that causes an error.
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
late TextEditingController age = TextEditingController();
late TextEditingController height = TextEditingController();
late TextEditingController weight = TextEditingController();
late TextEditingController result = TextEditingController();
return Scaffold(
appBar: AppBar(
title: const Text('BMI !'),
),
body: Center(
child: DecoratedBox(
decoration: const BoxDecoration(
color: Colors.white10,
),
child: Padding(
padding: const EdgeInsets.all(48.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller:age,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'AGE',
),
),
TextFormField(
controller:height,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'HEIGHT',
),
),
TextFormField(
controller:weight,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'WEIGHT',
),
),
TextFormField(
enabled:false,
controller:result,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Result',
),
),
],
),
),
),
),
);
}
}
void main() {
runApp(
MaterialApp(
home: MyApp(),
),
);
}
To call a function every time the TextFormField has a change, there's a property for exactly that!
the onChanged property, which fires every time something is typed:
return TextFormField(
onChanged: (value) {
// do something with `value`
},);
Since this is only called once there's a change, you don't have to worry about null
Edit: you can check if the controler.isNotEmpty and do something based on that:
void onChanged(String value){
if (_controller.text.isNotEmpty && _secondController.text.isNotEmpty) {
// do something
} else {
// do something
}
}
return TextFormField(
controller: _controller,
onChanged: (value) => onChanged(value),);
I want to align the price text as it is in the first image, I tried to do it as in the second image, but I could not.
I want to do:
The problem:
This is the code I wrote to try to build the design.
TextFormField(
controller: startController,
keyboardType: TextInputType.number,
textAlign: TextAlign.end,
decoration: const InputDecoration().copyWith(
border: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
enabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
disabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: kPinCodeColor)),
suffix: Text('JOD', style:
Theme.of(context).textTheme.headline6!.copyWith(fontSize:
Sizes.textSize_22)),
),
style: Theme.of(context).textTheme.headline6!.copyWith(fontSize:
Sizes.textSize_34),
)
You have make custom widget for this purpose. I made StatefulWidget I hope it make sense for you.
FocusNode is for handling focus change and animate the line underneath the Text.
MouseRagion is for handling hovering events.
IntrinsicWidth is for making TextFormInput expandable while typing.
This is the code:
class TextCustom extends StatefulWidget {
const TextCustom({Key? key, this.textController, this.suffix})
: super(key: key);
final TextEditingController? textController;
final String? suffix;
#override
State<TextCustom> createState() => _TextCustomState();
}
class _TextCustomState extends State<TextCustom> {
bool _isHovering = false;
bool _isFocased = false;
FocusNode textFocus = FocusNode();
#override
void initState() {
textFocus.addListener(() {
setState(() {
_isFocased = textFocus.hasFocus;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return SizedBox(
child: MouseRegion(
onEnter: (event) {
setState(() {
_isHovering = true;
});
},
onExit: (event) {
setState(() {
_isHovering = false;
});
},
child: GestureDetector(
onTap: () {
textFocus.requestFocus();
},
child: InputDecorator(
expands: false,
isFocused: _isFocased,
isHovering: _isHovering,
decoration: const InputDecoration(),
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
IntrinsicWidth(
child: TextFormField(
focusNode: textFocus,
controller: widget.textController,
decoration: const InputDecoration(
constraints: BoxConstraints(minWidth: 20),
isCollapsed: true,
border: UnderlineInputBorder(borderSide: BorderSide.none),
),
style: Theme.of(context)
.textTheme
.headline6!
.copyWith(fontSize: 34),
),
),
const SizedBox(width: 8),
(widget.suffix != null)
? Text(
'JOD',
style: Theme.of(context)
.textTheme
.headline6!
.copyWith(fontSize: 22),
)
: Container(),
],
),
),
),
),
);
}
}
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:
Minimum 1 alphabetic
Minimum 1 number
Allow only Character (_)
its failed
Pattern pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[_]).{8,}$';
RegExp regex = new RegExp(pattern);
Just check out this example that i have created :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController userName = TextEditingController();
FocusNode usernameFocus = new FocusNode();
String errorText;
bool _isValid = false;
#override
void initState() {
super.initState();
userName.addListener(() {
String pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[_]).{8,}$';
RegExp regExp = new RegExp(pattern);
if (userName.text.isEmpty) {
setState(() {
errorText = 'Field cannot be empty';
});
} else {
if (!regExp.hasMatch(userName.text)) {
print('The does not matches the requirement');
setState(() {
// here you can add you text
errorText =
'Minimum 1 Capital letter, 1 small letter and 1 number and _';
_isValid = false;
});
} else {
print('the value matches');
setState(() {
errorText = null;
_isValid = true;
});
}
}
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: TextField(
focusNode: usernameFocus,
decoration: new InputDecoration(
errorText: errorText,
prefixIcon: Icon(
Icons.supervised_user_circle,
color: Color(0xFF282858),
),
labelText: "UserName",
labelStyle: TextStyle(
fontFamily: "Poppins-Medium",
color: usernameFocus.hasFocus
? Colors.grey[600]
: Colors.grey[600]),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey[400], width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide:
new BorderSide(color: Colors.grey[400], width: 2.0),
),
//fillColor: Colors.green
),
controller: userName,
keyboardType: TextInputType.text,
),
),
RaisedButton(
child: Text('Login'),
onPressed: () {
print(_isValid);
if (!_isValid) {
return;
}
print('validation sucess');
},
)
],
)),
),
);
}
}
let me know if it works.
You would need to use a validator on your Textfield. You would add a condtion in the validator function to check if it's false and returns the error meessage that you would like the user to see.
You can either validate by using autovalidate: true, or you can do it manualy by using .currentState.validate() on your form before saving.
so your code could look something like this
validator: (value) {
final alphanumeric = RegExp(YOUR_REGEX_HERE);
if (!alphanumeric.hasMatch(value)) return 'YOUR_ERROR_MESSAGE';
}
You can use this library
pubspec.yaml
flutter_form_builder: ^3.7.3
Code will be like this:
GlobalKey _addextKey = GlobalKey();
FormBuilder(
key: _addextKey,
child: ListView(
children: <Widget>[
TextFormField(
textInputAction: TextInputAction.next,
style: textStyle,
controller: _NameauthController,
// ignore: missing_return
validator: FormBuilderValidators.required(),
decoration: InputDecoration(
hintText: 'name',
hintStyle: TextStyle(fontSize: 12.0),
labelStyle: textStyle,
errorStyle:
TextStyle(color: Colors.red, fontSize: 12.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
keyboardType: TextInputType.text,
),
]);),
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',
),