Repository navigation
InputDecorator 'errorText' should have 'textAlign' property #11068
Description
Activity
- added this to the milestone
on May 1, 2018 cc @HansMuller
This makes sense. We could an errorAlign property or just enable providing an error widget.
Reacted by Jonas Zebari, Narges Sadeghi, Oyvind Habberstad, Kshitiz Kamal, Morgan and Abdulalim Elmozogi@HansMuller Is there an update on this issue? I have also run into the need for explicitly specifying the text alignment for the field input and the error text separately.
Also, the alignment of error text changes its default from left to center depending on the number of lines the error text takes up, which does not seem like intended behavior.
Here's a project that makes it easy to observe the behavior I'm talking about:
code sample
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: AdjustableTextFieldWithError(), ), ), ); } } class AdjustableTextFieldWithError extends StatefulWidget { @override _AdjustableTextFieldWithErrorState createState() => _AdjustableTextFieldWithErrorState(); } class _AdjustableTextFieldWithErrorState extends State<AdjustableTextFieldWithError> { late TextEditingController _controller; bool _isValid = false; TextAlign _alignment = TextAlign.left; int _lengthMultiplier = 1; @override void initState() { super.initState(); _controller = TextEditingController(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(12), child: TextField( controller: _controller, textAlign: _alignment, onChanged: (value) { setState(() { _isValid = _controller.text == 'A1'; }); }, decoration: InputDecoration( hintText: 'Write the string "A1"', errorText: _isValid ? null : 'The string must be "A1"' * _lengthMultiplier, errorMaxLines: 3, ), ), ), ButtonBar( alignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: const Text('Long'), onPressed: () { setState(() { _lengthMultiplier = 7; }); }, ), FlatButton( child: const Text('Medium'), onPressed: () { setState(() { _lengthMultiplier = 4; }); }, ), FlatButton( child: const Text('Short'), onPressed: () { setState(() { _lengthMultiplier = 1; }); }, ), ], ), ButtonBar( alignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: const Text('Left'), onPressed: () { setState(() { _alignment = TextAlign.left; }); }, ), FlatButton( child: const Text('Center'), onPressed: () { setState(() { _alignment = TextAlign.center; }); }, ), FlatButton( child: const Text('Right'), onPressed: () { setState(() { _alignment = TextAlign.right; }); }, ), ], ), ], ); } }
Reacted by Mahesh JamdadeI think the errorWidget approach makes sense. Most of what is useful about the TextInput's built-in error handling is the way the label interacts with the border, and animates it's color and position.
The error messages are simple widgets, we can provide those ourselves and it is much more flexible.
For example, I'm stuck right now cause I need a 2 line error message, which is a dead end with the existing TextInput. Now I basically need to hack the widget to get the error outline to show, while providing my own error message, which is going to be pretty cringy.
Reacted by Herc and koldoon- modified the milestones: ,
on Jan 7, 2020 As i use
textAlign: TextAlign.centerfor theTextFormField, i would like the error text to also be center aligned.A solution could be to either return a
Widgetin thevalidatoror set inerrorText( instead of a string ), or add aerrorAlignmentproperty.Returning an error widget would be more flexible / customisable.
Reacted by Oyvind Habberstad, Jvery, Tokenyet, shinlh, Kshitiz Kamal, peengle, Katekko, Rodion Serebrynskyi and Abdulalim ElmozogiPlease, is there any update on this?
I'm with @Wilburt on this. When will this be added? This is pretty necessary and there are multiple issues open related to this.
31 remaining items
I got the solution, i'm trying to make a PR but i don't have enough time to make the tests. The solution consist in a WidgetBuilder function inside the InputDecoration class that take in input the errorText String when not Null and we can build a widget from it. If someone want to help me on how to tests it i really appreciate it.
atta boy
For my case, I got a workaround solution using
Directionalitywidgetconst Directionality( textDirection: TextDirection.rtl, // align errorText to the right child: TextField( textDirection: TextDirection.ltr, // keep the input text aligned to the left decoration: InputDecoration(errorText: 'Field required'), ), ),
NOTE:
Directionalitywidget allows to align only to the left or to the right.Nice idea but it also aligns the InputDecoration's labelText to the right and there doesn't appear to be a way to align that back to the left. So, a good workaround if you don't use labelText. Not so good if you do.
The right solution would be to simply replace the errorText string with an errorText widget and allow the user to decide.
There's a PR underway that's attempting to provide support for specifying an error widget. Looks like it could use some help: #104165
- added a commit that references this issue
on Jan 17, 2023 Any updates on this??
A fix was started in January and seemed to be getting pretty close: #118610. Unfortunately the dev hasn't been active since early March.
If @KishanBusa8 doesn't respond, then someone should probably take over the PR. I think it was pretty close, from my memory.
FYI, I filed #129275 which can be used by @KishanBusa8 to update #118610 or can become a non WIP PR if @KishanBusa8 does not respond or can not work on the update.
Great, thanks! Let's give it until next week maybe and then move forward with your PR if we haven't heard back.
Reacted by Bruno Leroux- added a commit that references this issue
on Jun 28, 2023 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Jul 12, 2023 - added a commit that references this issue
on Jun 12, 2026
When used with the
TextFieldtheInputDecorator'errorText' uses theTextField'stextAlignproperty (I suspect).This is a problem when the
TextFieldis used to show numerical values in which case the value should be right-aligned but the error message should be left-aligned.