How to center the text inside the Text Field Flutter - I tried everything

user_9552398 0
Viewed 39

I am trying to center the text inside the Text Field and nothing seems to work. Can anyone give me a hint about why it is not working because I spent way too much time on it and nothing seems to change? Thank you in advance.

This is the code :

 Flexible(
                      child: TextField(
                        textAlignVertical: TextAlignVertical.center,
                        enabled: false,
                        onChanged: (value) => ID = value,
                        decoration: InputDecoration(
                          contentPadding: const EdgeInsets.all(10),
                          disabledBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xff1C1C1E), width: 2.0),
                            borderRadius: BorderRadius.circular(22),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xff1C1C1E), width: 1.0),
                            borderRadius: BorderRadius.circular(22),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xff1C1C1E), width: 1.0),
                            borderRadius: BorderRadius.circular(22),
                          ),
                          labelText: dataFromPreviousPage["ID"],
                          floatingLabelBehavior:
                              FloatingLabelBehavior.never,
                          labelStyle: const TextStyle(
                              color: Color(0xff1C1C1E),
                              fontFamily: "Poppins",
                              fontWeight: FontWeight.w600,
                              fontSize: 25),
                        ),
                      ),
                    ),

This is how it shows up: As you can see the text is touching the upper part enter image description here

flutter-layout flutter
3 Answers

I fixed your code, now there is horizontal and vertical alignment, and also see the attached screenshot:

  Widget mainWidget() {
    return Scaffold(
      appBar: AppBar(
        title: const Text("App bar"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          children: [
            HelpSO(
              ID: '1',
              dataFromPreviousPage: '777777777777777777',
            ),
          ],
        ),
      ),
    );
  }


class HelpSO extends StatelessWidget {
  String ID;
  final String dataFromPreviousPage;

  HelpSO({Key? key, required this.ID, required this.dataFromPreviousPage})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: TextField(
        textAlign: TextAlign.center,
        textAlignVertical: TextAlignVertical.center,
        enabled: true,
        onChanged: (value) => ID = value,
        decoration: InputDecoration(
          contentPadding: const EdgeInsets.all(10),
          disabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xff1C1C1E), width: 2.0),
            borderRadius: BorderRadius.circular(22),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xff1C1C1E), width: 1.0),
            borderRadius: BorderRadius.circular(22),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Color(0xff1C1C1E), width: 1.0),
            borderRadius: BorderRadius.circular(22),
          ),
          floatingLabelBehavior: FloatingLabelBehavior.never,
          label: Center(
            child: Text(dataFromPreviousPage,
                style: TextStyle(
                    color: Color(0xff1C1C1E),
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w600,
                    fontSize: 24)),
          ),
        ),
      ),
    );
  }
}

Image: https://i.stack.imgur.com/QmnoY.png

Text is not touching the upper part, better to change label font size to 24, multiple of 2. Add the property "textAlign: TextAlign.center" to make input text be at the horizontally center. To make label center horizontally, remove "labeltext" and "labelstyle" and put property "label" with 2 widgets inside: Center and Text.

user_181957870

If you are talking about "horiziontal center", use this property: textAlign: TextAlign.center

demo picture

If you are talking about "vertical center", what you are currently doing is correct, the misalignment might be caused by something else. I'd suggest you check on iOS simulator first and see if this problem is only on Android devices.

user_10326130

Use the textAlign property.

 return TextField(
      textAlign: TextAlign.center,
       // your code here
      );
user_153871200
Related