CODEWITHSUNDEEP
flutterdart
Umer
Umer

Reputation: 203

How to align the HelperText in center?

TextFormField has a hintText and a HelperText , but i can seem to find a way to align the helperText in center , this is my code :

child: Container(

                  child: TextFormField(
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 21),
                    decoration: InputDecoration(

                      hintText: "hint text",
                      focusedBorder: UnderlineInputBorder(

                          borderSide: BorderSide(color: primaryColor)),
                      helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
                       

                      helperStyle:
                          TextStyle(color: oASDC, fontSize: 15),

                    ),
                    onChanged: (value) {
                      setState(() {.......});
                    },
                  ),
                ),

is there a way to align the helper text in center?

Upvotes: 1

Views: 2539

Answers (3)

LihnNguyen
LihnNguyen

Reputation: 865

You try this way:

https://i.sstatic.net/7LFJc.png

return TextFormField(
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 21),
      decoration: InputDecoration(
        contentPadding: EdgeInsets.only(left: 50, right: 50),
        hintText: "hint text",
        focusedBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
        helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
        helperStyle: TextStyle(
          color: Colors.blue,
          fontSize: 15,
        ),
      ),
    );

Upvotes: 4

xahid_rocks
xahid_rocks

Reputation: 702

As far as I know, there is nothing conventional to align the helpertext. Use contentPadding instead, not a proper way, but it's a day saver!

  Container(
    child: TextFormField(
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 21),
      decoration: InputDecoration(
          hintText: "hint text",
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.yellow)),
          helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",
          helperStyle: TextStyle(
            color: Colors.red,
            fontSize: 15,
          ),
          contentPadding: EdgeInsets.symmetric(horizontal: 25)),
      onChanged: (value) {
        print(value);
      },
    ),
  ),

Upvotes: 1

yoad
yoad

Reputation: 95

From what I understand the position of the helperText is like the position of the errorText,

issue 1 issue 2

according to these issues, there seems to be no solution to this.

However, if you only need text , you can easily add Text widget below the TextFormField

like so:

Container(
                child: Column(
                  children: [
                    TextFormField(
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 21),
                      decoration: InputDecoration(
                        hintText: "hint text",
                        focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: primaryColor),),
                        // helperText: "THIS IS THE HELPER TEXT TO BE ALIGNED ",

                        helperStyle: TextStyle(color: oASDC, fontSize: 15),
                      ),
                      onChanged: (value) {
                        // setState(() {.......});
                      },
                    ),
                    Text(
                      'THIS IS THE HELPER TEXT TO BE ALIGNED',
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),

Upvotes: 2

Related Questions