InputDecorator 'errorText' should have 'textAlign' property

When used with the TextField the InputDecorator 'errorText' uses the TextField's textAlign property (I suspect).

This is a problem when the TextField is used to show numerical values in which case the value should be right-aligned but the error message should be left-aligned.

@HansMuller

cc @HansMuller

This makes sense. We could an errorAlign property or just enable providing an error widget.

@HansMuller

@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;
                });
              },
            ),
          ],
        ),
      ],
    );
  }
}

I 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.

As i use textAlign: TextAlign.center for the TextFormField, i would like the error text to also be center aligned.

A solution could be to either return a Widget in the validator or set in errorText ( instead of a string ), or add a errorAlignment property.

Returning an error widget would be more flexible / customisable.

Please, is there any update on this?

@Wilburt

I'm with @Wilburt on this. When will this be added? This is pretty necessary and there are multiple issues open related to this.

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 Directionality widget
const 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: Directionality widget 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

Fixes flutter#11068 with errorWidgetBuilder

Any updates on this??

@Renzo-Olivares

A fix was started in January and seemed to be getting pretty close: #118610. Unfortunately the dev hasn't been active since early March.

CC @Renzo-Olivares, @justinmc, @KishanBusa8

@KishanBusa8

If @KishanBusa8 doesn't respond, then someone should probably take over the PR. I think it was pretty close, from my memory.

@KishanBusa8

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.

Add InputDecorator.error to allow error message customization (#129275)

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 -v and a minimal reproduction of the issue.

Add InputDecorator.error to allow error message customization (#129275)

Navigation Menu

Repository navigation

InputDecorator 'errorText' should have 'textAlign' property #11068

31 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

InputDecorator 'errorText' should have 'textAlign' property #11068

Description

Activity

Hixie commented on May 1, 2018

HansMuller commented on Jun 13, 2018

jonas-zebari commented on Oct 17, 2019

esDotDev commented on Dec 28, 2019

erf commented on Apr 13, 2020

wilburx9 commented on Apr 25, 2020

LockedThread commented on May 2, 2020

31 remaining items

artimmy commented on May 24, 2022

CordMemescape commented on Jun 5, 2022

HansMuller commented on Jun 6, 2022

Julitech commented on Jun 19, 2023

HansMuller commented on Jun 20, 2023

justinmc commented on Jun 20, 2023

bleroux commented on Jun 21, 2023

justinmc commented on Jun 21, 2023

github-actions commented on Jul 12, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions