How to center the text inside the Text Field Flutter

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

CodePudding user response：

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

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.

CodePudding user response：

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.