How to center TextField inside Container?

Question

I want to center the TextField inside Container but they are aligned to the left.

  @override
 Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
    appBar: AppBar(
      title: Text('Login'),
    ),
    body: Container(
        child: Column(          
      children: <Widget>[
        Container(
          child: TextField(
            decoration: InputDecoration(hintText: 'Email Address'),
          ),width: MediaQuery.of(context).size.width * 0.5,
        ),
        Container(
          child: TextField(
            decoration: InputDecoration(hintText: 'Password'),
          ),
          width: MediaQuery.of(context).size.width * 0.5,
        ),
        RaisedButton(
          onPressed: () {
            print('Pressed');
          },
          child: Text('Login'),
          textColor: Colors.white,
          color: Colors.blue,
        ),
      ],
    )));

}

How can I center the email and password TextField to the main Container?

Edit: I tried using the crossAxisAlignment: CrossAxisAlignment.center but it isnt working, although when I tried mainAxisAlignment: MainAxisAlignment.center it is centering the TextFields vertically.

Answer 1

give crossAxisAlignment property to your column with CrossAxisAlignment.center value

Column(
   crossAxisAlignment: CrossAxisAlignment.center
.
.
.
),

Answer 2

I think you just add textAlign: TextAlign.center inside your TextField

 Container(
      child: TextField(
      textAlign: TextAlign.center,
        decoration: InputDecoration(hintText: 'Email Address'),
      ),width: MediaQuery.of(context).size.width * 0.5,
    )

Answer 3

Hope it works for you.

Container(
      height: 36,
      child: TextField(
        maxLines: 1,
        style: TextStyle(fontSize: 17),
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          filled: true,
          prefixIcon:
              Icon(Icons.search, color: Theme.of(context).iconTheme.color),
          border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          fillColor: Theme.of(context).inputDecorationTheme.fillColor,
          contentPadding: EdgeInsets.zero,
          hintText: 'Search',
        ),
      ),
    )

Answer 4

Edit: Place each one of your Textfield inside a Row widget, and apply a MainAxisAlignment.center to each one of them:

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: TextField(
                      decoration: InputDecoration(hintText: 'Email Address'),
                    ),width: MediaQuery.of(context).size.width * 0.5,
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: TextField(
                      decoration: InputDecoration(hintText: 'Password'),
                    ),width: MediaQuery.of(context).size.width * 0.5,
                  ),
                ],
              ),
              RaisedButton(
                onPressed: () {
                  print('Pressed');
                },
                child: Text('Login'),
                textColor: Colors.white,
                color: Colors.blue,
              ),
            ],
          )));
     }

I tried implementing other variants of this solution, but only by placing Textfield inside a Row I was able to center it.

Answer 5

There is a property alignment in container widget set that property value to set the content inside the Container widget to be aligned.

Container(
  alignment: Alignment.center,
  child: {your child Widget here},
),