CODEWITHSUNDEEP
dartflutter
praveen Dp
praveen Dp

Reputation: 2936

How to align Hint Text into centre in Text Field?

i am trying to add alignment to the hint-text inside Text-field.but it is not working. How to bring it to centre?? How to write text in curved shape??? 

 Container(
           child: new TextFormField(
                       controller: _pass,
                       textAlign: TextAlign.center, 
                       decoration: new InputDecoration.collapsed(
                                             hintText: " PASSWORD", ), )),

Upvotes: 48

Views: 84296

Answers (9)

Pedro Molina
Pedro Molina

Reputation: 1484

My problem was the auto content padding:

TextField(
     textAlign: TextAlign.center,
     decoration: InputDecoration(
     contentPadding: EdgeInsets.zero,
     hintText: "hola mundo",
   ),
),

Happy coding.

Upvotes: 37

Rohan Bhande
Rohan Bhande

Reputation: 1

You have to set the textAlign property to center as well as the content padding to EdgeInsets.all(0)

_inputValue({final height, final width}) {
    return Container(
      height: height / 18,
      width: width / 2.5,
      alignment: Alignment.center,
      child: TextFormField(
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(0),
          hintText: 'Enter',
          hintStyle: TextStyle(color: AppColors.mainBlue),
          alignLabelWithHint: true,
          border: OutlineInputBorder(
            borderSide: BorderSide(color: AppColors.mainBlue),
            borderRadius: BorderRadius.circular(5.0),
          ),
        ),
      ),
    );
  }

Upvotes: 0

Hekmat
Hekmat

Reputation: 531

You can use following attribute of TextFormField:

        textAlign: TextAlign.center

Upvotes: 4

reza47
reza47

Reputation: 795

all of the answers work for the fixed-sized text fields but in my case, I m using a dynamically sized container that parents my text field

AnimatedContainer(
      width: (!widget.scrollController.hasClients ||
              widget.scrollController.positions.length > 1)
          ? MediaQuery.of(context).size.width.toDouble()
          : max(
              MediaQuery.of(context).size.width -
                  widget.scrollController.offset.roundToDouble(),
              (MediaQuery.of(context).size.width - 80.w).toDouble()),
      duration: const Duration(milliseconds: 150),
      constraints: BoxConstraints(maxHeight: 40.h),
      margin: EdgeInsets.zero,
      child: TextField(
        controller: controller,
        expands: true,
        minLines: null,
        maxLines: null,
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
            filled: true,
            fillColor: MyAppColors.primaryColor1,
            border: UnderlineInputBorder(
                borderRadius: 
            BorderRadius.circular(15.w)),
            prefixIcon: Icon(
              Icons.search,
              size: 20.w,
              color: Theme.of(context).accentColor,
            ),
            hintText: 'Songs, albums or artists',
            contentPadding: EdgeInsets.zero,

            hintStyle: 
      
      
     Theme.of(context).textTheme.subtitle2!.copyWith(
                color: Colors.white.withOpacity(0.8),
                fontSize: 18.sp,
            )),
     
      ),
    );

the solution that worked for me is that I set expand parameter to true and set these parameters:

  minLines: null,
  maxLines: null,
  expands: true,
  textAlignVertical: TextAlignVertical.center

the min and max line must be set to null in order to expand. that is the only solution I found cuz in another way my hint text gain extra padding even I set the content padding to zero my hint text is not centered in other screen sizes.

Upvotes: 4

Aleksandar
Aleksandar

Reputation: 4154

Note: specific case, but might help others who tried everything else from this thread.

I had a design from which I copied all the paddings and alignments, but I somehow couldn't center the hint text, it was always a few pixels closer to the top edge.

The only thing that worked was finding out that there was a specific text height set in the design. After I applied that, everything aligned perfectly.

InputDecoration(
  hintStyle: TextStyle(
    fontSize: _smallFontSize, // or whatever
    height: 1.4, //                                <----- this was the key
  ),
  // other properties...
);

Upvotes: 11

Taba
Taba

Reputation: 4336

The textHint will have the same Alignment as the input text. So you can try the code below to achieve what you're looking for:

TextFormField(
      keyboardType: TextInputType.number,
      maxLength: 5,
      textAlign: TextAlign.center,
      autofocus: true,
      initialValue: '',
      decoration: InputDecoration(
        hintText: 'some hint',
        counterText: "",
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
      ),
    );

Upvotes: 15

Tushar Nikam
Tushar Nikam

Reputation: 1593

use textAlign: TextAlign.center, inside TextFormField or textfield

here is the code

enter image description here

The Output Like This

enter image description here

Upvotes: 55

Golnar sheikh bahaie
Golnar sheikh bahaie

Reputation: 202

you can add textAlign: TextAlign.center to your code here is my code and its works:

new Padding(
                padding: new EdgeInsets.all(30.0),

                child:
                new TextField(
                  textAlign: TextAlign.center,

                  decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                        borderSide: new BorderSide(color: Colors.teal)),
                    hintText: 'REF: 2',
                  ),
                ),
              ),

Upvotes: 7

aubykhan
aubykhan

Reputation: 264

This used to work earlier but now it doesn't. There's a recently opened issue in flutter repo which you can follow

Edit Now works as expected.

Upvotes: -1

Related Questions